Job card

The job card shows one open role on the werklist.com job board. Workers scan a column of them, so each card reads as a line of type with the pay at the right.

A column of roles

Warehouse worker
Vienna, AustriaTrade and transportUnskilledEnglish A2
Distribution center on the edge of the city, steady shift plan, permanent contract from day one.
968 to 1,250 EUR
net per monthToday
CNC operator
Maribor, SloveniaMetal industrySkilledEnglish A2
Three shift production of car parts, accommodation arranged by the employer, one year contract with extension.
1,450 to 1,800 EUR
net per month3 days ago
Hotel housekeeper
Split, CroatiaHospitalityUnskilledEnglish A1
Seasonal contract from May to October in a seaside hotel, meals and a shared room included.
1,050 to 1,200 EUR
net per month41 days ago

Each card is one link to the role's page. The title names the position, the line under it says where and in what trade, and the right column holds the pay and View role.

When to use it

Use the job card wherever open roles are listed for workers: the home page, a country page, an industry page, a search result.

Use a card from the Card page for anything that is not a role, and the board grid when a recruiter compares roles column by column.

Anatomy

From 768 px the card has two columns: the text at the left takes the free width, and the pay and the button sit at the right. Below 768 px the pay and the button move under the text, side by side.

Warehouse worker for the night shift at the distribution center

Vienna, AustriaTrade and transportUnskilledEnglish A2

Distribution center on the edge of the city, steady shift plan, permanent contract from day one.

968 to 1,250 EUR

net per monthToday

Padding 24 px
Column gap 24 px
Button at least 112 px

Fill: The card surface, one step above the page; --surface-1
Corner: 16 px; --radius-2xl
Padding: 20 px, 24 px from 768 px; --space-5, --space-6
Column gap: 16 px, 24 px from 768 px; --space-4, --space-6
Title: 17/24, weight 700, one line
Where and what: 14/20, two lines, one from 768 px; --text-label
Intro: 14/20, two lines; --text-muted
Pay: 17/24, weight 700, tabular digits
Pay basis: 12/16; --text-muted
Button: Small, 36 px high, at least 112 px wide

States

Hover shifts the fill one step and turns View role into the primary button. The card does not rise: in a column of twenty cards, a rise reads as the list moving.

An expired role keeps its layout and its contrast. The word Expired follows the title in muted ink, the pay stays readable, and the button stays gray on hover.

Rest

CNC operator

Maribor, SloveniaMetal industrySkilledEnglish A2

Three shift production of car parts, accommodation arranged by the employer, one year contract with extension.

1,450 to 1,800 EUR

net per month3 days ago

Hover

CNC operator

Maribor, SloveniaMetal industrySkilledEnglish A2

Three shift production of car parts, accommodation arranged by the employer, one year contract with extension.

1,450 to 1,800 EUR

net per month3 days ago

Focus

CNC operator

Maribor, SloveniaMetal industrySkilledEnglish A2

Three shift production of car parts, accommodation arranged by the employer, one year contract with extension.

1,450 to 1,800 EUR

net per month3 days ago

Expired

Hotel housekeeper

Split, CroatiaHospitalityUnskilledEnglish A1

Seasonal contract from May to October in a seaside hotel, meals and a shared room included.

1,050 to 1,200 EUR

net per month41 days ago

Rest: Card fill, secondary button; --surface-1, --surface-control
Hover: Fill one step up, primary button; --glass-fill-hover, --brand-true, --on-brand
Pressed: Fill one more step; --glass-fill-active
Focus: 2 px ring, 2 px outside the card; --focus-ring
Expired: The word Expired, no hover color; --text-muted
Loading: A card of the same size with gray bars; --surface-control

Content

Title: the position as the employer names it, in sentence case, translated on a localized board.

Where and what, in this order: city and country, industry, seniority, then the English level when the role asks for one. Middle dots separate them.

Pay: the net monthly range, low to high, with the currency code once at the end: 968 to 1,250 EUR. Under it, net per month and the age of the post: Today, 3 days ago.

Intro: the first two lines of the role's summary. The button reads View role.

Keyboard and screen readers

The title is the link, and its hit area covers the whole card, so a click anywhere opens the role. A screen reader hears the title as the link's name and the location line as its description. View role looks like a button but takes no focus, since the whole card is already the link.

Tab: Moves to the next card
Enter: Opens the role
List: A list of cards, so the count is announced
Title: A level 3 heading that holds the link

Pay, expiry and decoration

Permitted

Pay as a range with its code
968 to 1,250 EUR, with net per month underneath.
Expired said with a word
The card keeps full contrast and its place in the list.

Not permitted

Fading or striking through an expired card
Muted text drops under 4.5 to 1 and the pay turns hard to read.
Icons, flags or tags on the card
Location and trade are words. The card stays a line of type.
A dash in the pay range
Write the range with to.

NextWerkAI

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

JSON

{
  "title": "Job card",
  "path": "/components/job-card",
  "url": "https://design.werklist.com/components/job-card",
  "text": "https://design.werklist.com/agent/components/job-card",
  "summary": "One open role as a row: the position, where and what, the net pay and a way in.",
  "version": "2.1.2",
  "kind": "component",
  "name": "Job card",
  "purpose": "One open role in a list on werklist.com: position, location and trade, net pay and a link to the role.",
  "use": [
    "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."
  ],
  "avoid": [
    "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": [
    {
      "part": "Container",
      "measure": "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",
      "token": "--surface-1, --radius-2xl, --space-5, --space-6, --space-4"
    },
    {
      "part": "Text column",
      "measure": "takes the free width"
    },
    {
      "part": "Title",
      "measure": "a level 3 heading, 17/24 weight 700, one line cut with an ellipsis, 6 px above the meta line",
      "token": "--type-product-title-3, --text"
    },
    {
      "part": "Meta line",
      "measure": "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",
      "token": "--type-product-body, --text-label"
    },
    {
      "part": "Intro",
      "measure": "14/20, two lines cut with an ellipsis",
      "token": "--type-product-body, --text-muted"
    },
    {
      "part": "Pay column",
      "measure": "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",
      "token": "--space-3"
    },
    {
      "part": "Pay",
      "measure": "17/24 weight 700, tabular digits, range written low to high with the code once: 968 to 1,250 EUR",
      "token": "--type-product-title-3, --text"
    },
    {
      "part": "Pay basis",
      "measure": "12/16: net per month; from 768 px followed by a middle dot and the age of the post",
      "token": "--type-product-caption, --text-muted"
    },
    {
      "part": "Button",
      "measure": "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",
      "token": "--surface-control, --radius-lg, --type-product-dense"
    }
  ],
  "variants": [
    {
      "name": "Live",
      "use": "An open role."
    },
    {
      "name": "Expired",
      "use": "A closed role that still links to its page; same footprint as a live card."
    }
  ],
  "sizes": [
    {
      "name": "Stacked",
      "padding": "20 px",
      "type": "title 17/24"
    },
    {
      "name": "Row, from 768 px",
      "padding": "24 px",
      "type": "title 17/24"
    }
  ],
  "states": [
    {
      "name": "Rest",
      "change": "The card fill; the button in the secondary fill with full ink",
      "tokens": [
        "--surface-1",
        "--surface-control",
        "--text"
      ]
    },
    {
      "name": "Hover (fine pointer)",
      "change": "The card takes the hover wash; the button turns primary",
      "tokens": [
        "--glass-fill-hover",
        "--brand-true",
        "--on-brand"
      ]
    },
    {
      "name": "Pressed",
      "change": "The card takes the active wash",
      "tokens": [
        "--glass-fill-active"
      ]
    },
    {
      "name": "Focus visible",
      "change": "A 2 px ring, 2 px out, around the whole card and its 16 px corner, when its link has keyboard focus",
      "tokens": [
        "--focus-ring",
        "--focus-ring-width",
        "--focus-ring-offset"
      ]
    },
    {
      "name": "Expired",
      "change": "The word Expired after the title in muted ink at 14/20; no strike through, no fading; on hover the button stays secondary",
      "tokens": [
        "--text-muted",
        "--surface-control"
      ]
    },
    {
      "name": "Loading",
      "change": "A skeleton of the same size: a title bar, two meta bars, a pay bar and a button block",
      "tokens": [
        "--surface-control",
        "--radius-2xl"
      ]
    }
  ],
  "keys": [
    {
      "key": "Tab",
      "action": "Moves to the next card's link"
    },
    {
      "key": "Enter",
      "action": "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"
  ]
}

Raw file: https://design.werklist.com/agent/components/job-card