# Job card

One open role in a list on werklist.com: position, location and trade, net pay and a link to the role.

* Kind: component
* Page: https://design.werklist.com/components/job-card
* Version: 2.1.2

## When to use it

* Lists of open roles for workers: home page, country and industry pages, search results.
* Boards in other languages, with the position and the intro in the language of the board.

## When not to use it

* Anything that is not a role: use Card.
* Comparing roles by field inside WerkOS: use the board grid.
* Icons, flags, tags, eyebrows or badges on the card.

## Anatomy

* Container: the full width of the list; stacked, and a row with its items centered from 768 px; radius 16 px; padding 20 px, 24 px from 768 px; gap 16 px, 24 px from 768 px (--surface-1, --radius-2xl, --space-5, --space-6, --space-4)
* Text column: takes the free width
* Title: a level 3 heading, 17/24 weight 700, one line cut with an ellipsis, 6 px above the meta line (--type-product-title-3, --text)
* Meta line: city, country · industry · seniority · English level; 14/20; two lines below 768 px, one from 768 px; 8 px above the intro; middle dots with 6 px on each side, hidden from screen readers (--type-product-body, --text-label)
* Intro: 14/20, two lines cut with an ellipsis (--type-product-body, --text-muted)
* Pay column: below 768 px a row under the text, the pay at the left and the button at the right; from 768 px a right aligned column, 12 px between the pay and the button (--space-3)
* Pay: 17/24 weight 700, tabular digits, range written low to high with the code once: 968 to 1,250 EUR (--type-product-title-3, --text)
* Pay basis: 12/16: net per month; from 768 px followed by a middle dot and the age of the post (--type-product-caption, --text-muted)
* Button: looks like a small button, 36 px, at least 112 px wide, radius 8 px, label View role; hidden from screen readers and takes no focus (--surface-control, --radius-lg, --type-product-dense)

## Variants

* Live: An open role.
* Expired: A closed role that still links to its page; same footprint as a live card.

## Sizes

* Stacked: padding 20 px, type title 17/24
* Row, from 768 px: padding 24 px, type title 17/24

## States

* Rest: The card fill; the button in the secondary fill with full ink (--surface-1, --surface-control, --text)
* Hover (fine pointer): The card takes the hover wash; the button turns primary (--glass-fill-hover, --brand-true, --on-brand)
* Pressed: The card takes the active wash (--glass-fill-active)
* Focus visible: A 2 px ring, 2 px out, around the whole card and its 16 px corner, when its link has keyboard focus (--focus-ring, --focus-ring-width, --focus-ring-offset)
* Expired: The word Expired after the title in muted ink at 14/20; no strike through, no fading; on hover the button stays secondary (--text-muted, --surface-control)
* Loading: A skeleton of the same size: a title bar, two meta bars, a pay bar and a button block (--surface-control, --radius-2xl)

## Keyboard

* Tab: Moves to the next card's link
* Enter: Opens the role

## Accessibility

* The cards are a list, one card per item, so the count is announced.
* The link in the title is the only control, and its hit area covers the whole card.
* The link is named by the position and described by the meta line.
* The link of an expired card is named by the position followed by a comma and Expired.
* View role is hidden from screen readers and takes no focus.
* All text on the card, including the muted intro and the button label, meets 4.5 to 1 in both themes.

## Content

* Title: the position, in sentence case, translated on a board in another language.
* Meta order: city and country, industry, seniority, then the English level when the role asks for one.
* Pay: the net monthly range, low to high, with the currency code once at the end; the basis reads net per month.
* Age: Today, or {n} days ago.
* Button: View role.
* Expired: Expired.

## Tokens

* --surface-1
* --surface-control
* --glass-fill-hover
* --glass-fill-active
* --brand-true
* --on-brand
* --text
* --text-label
* --text-muted
* --radius-2xl
* --radius-lg
* --space-3
* --space-4
* --space-5
* --space-6
* --type-product-title-3
* --type-product-body
* --type-product-caption
* --type-product-dense
* --focus-ring
* --focus-ring-width
* --focus-ring-offset