# Careers vacancies

> Open roles as ruled rows for a local employer: the role and its team at the left, then the hours, then the pay set larger than body text, and an Apply button at the right, so the terms are read before the click. Above the rows a heading and one line on why to work here; below them a general enquiries link. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/careers-vacancies.html
Section: Listings
Access: Included in Pattern Paste access.
Needs: Requires a block theme on WordPress 7.0. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type.
Blocks: button, buttons, column, columns, group, heading, paragraph
Keywords: careers, jobs, vacancies, hiring, recruitment, apply, salary

## Variations (2)

### Ruled vacancies (the default)

Identical markup in every theme.

Four rows between currentColor rules on your base ground, the pay at row size and an Apply button in your theme's button colours.

### Putty and racing green

This variation states its own colours and states its own type: identical in every theme.

Putty ground, near-black ink and rules, square racing green Apply buttons, in Helvetica Neue throughout with a heavy heading.


---

## The signature moment: the pay is on the row, not behind the button

**Every row states its hours and its pay before the Apply button, and the pay
is set larger than anything but the role.** A job seeker compares four roles
by reading down one column. The pay is a bare `clamp(1.125rem, 1.6vw, 1.5rem)`
at weight 700, the row's second mass after the role on the `large` rung. The
mark survives colourlessness because it is made of alignment and rule: the
four columns hold the same widths in every row, and each row is closed by a
`currentColor` rule the width of the section.

## What it inherits from your theme

- The ground is `base` and every line of type is `contrast`, each a two-rung
  chain. Text is at 4.5:1 or better in the stock themes.
- The rules are `currentColor`, so they follow your text.
- The label starts on `role-label` and the enquiries link on `role-link`,
  both falling through to `contrast`.
- The Apply buttons state no colour, so your theme's button paints them; they
  state their padding so the target holds in any theme.
- The heading is on the `x-large` rung, the roles on `large`, body copy on
  `medium`. The typeface is your theme's.

## What it decides for itself

- Each row is a columns block at 40, 22, 24 and 14 per cent, so the hours, the
  pay and the button line up down the list. Below 782px the columns stack and
  each row reads top to bottom: role, team, hours, pay, Apply.
- The enquiries email is kept short so it does not break mid-word on a phone.

## The Styled look

`putty-and-racing-green` states a putty ground `#ece6d9`, near-black ink and
rules `#1b1d1a` and square racing green `#1f4a36` Apply buttons with warm
white `#f7f3ea` uppercase labels. It is Helvetica Neue throughout, the heading
at weight 800 with tight tracking and the body at 400. It is for a trade
employer that wants to look steady and well run.

## What to change first

The roles, their teams, hours and pay, the "why work here" line, and the
`#apply` and `mailto:` links.