# Card

Holds one item, such as a hiring project or a candidate, on a flat surface with a title, optional detail and at most two actions.

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

## When to use it

* A set of items of one kind that people browse and open one at a time.
* Each item has a title and a line or two of detail.

## When not to use it

* Items people compare field by field or act on in bulk: use a list or the board grid.
* A job ad: use the job card. One headline figure: use the stat tile.
* A group of settings on a page: group it with a heading and space.
* A card inside a card, a card on a well, or a card on --surface-1.

## Rules

* The card sits on --bg, never on another card, a well or --surface-1.

## Anatomy

* Container: The fill alone, with no border, ring or shadow. (--surface-1)
* Corner radius: 16 px (--radius-2xl)
* Padding: 16 px, or 24 px when spacious (--space-4, --space-6)
* Title: 16 px on 26 px, weight 500, in --text. Two lines at most, then an ellipsis. (--type-body)
* Supporting text: 14 px on 22 px, in --text-muted, 4 px below the title (--type-small)
* Details: 13 px on 20 px, in --text-label, tabular digits, 4 px below the line above (--type-caption)
* Actions: At most two small buttons (36 px), quiet or secondary, 16 px below the text and 8 px apart (--space-2)
* Grid: A list of cards 16 px apart: one column, two from 640 px, three from 1024 px (--space-4)

## Variants

* static: Shows information. Its actions are buttons inside it. It has no hover and no focus of its own.
* clickable: Opens one item. The title is the link, and its target covers the card. The buttons of the card sit above that target and keep their own action.

## Sizes

* default: padding 16 px, type Title 16 px on 26 px at weight 500, supporting text 14 px on 22 px, details 13 px on 20 px
* spacious: padding 24 px, type Title 16 px on 26 px at weight 500, supporting text 14 px on 22 px, details 13 px on 20 px

## States

* rest: Flat: the fill alone. (--elevation-0, --surface-1)
* hover: The fill turns --surface-control over 150 ms, with no shadow and no lift. Only on a pointer that can hover. (--surface-control, --duration-fast, --ease-standard)
* pressed: The same --surface-control fill. On a touch screen, where there is no hover, it appears when the card is pressed. (--surface-control)
* focus visible: A 2 px outline 2 px outside the card while its link has keyboard focus. The outline follows the corners. (--focus-ring, --focus-ring-width, --focus-ring-offset)
* loading: A skeleton card of the final size and radius. (--radius-2xl)
* reduced motion: The fill changes at once, without the 150 ms transition.
* forced colors: A 1 px border in CanvasText. Focus in Highlight.

## Keyboard

* Tab: Moves to the title link, then to each button of the card in order.
* Shift+Tab: Moves back.
* Enter: Opens the item from the title link.

## Accessibility

* Cards sit in a ul, so screen readers announce the count.
* The title is the only link. Its name is the title, and aria-describedby points at the supporting line.
* Buttons inside a clickable card are siblings of the link, not its children.
* No arrow key navigation between cards: a grid of cards is a list of links, not a composite widget.
* Actions are 36 px and reach 44 px on a coarse pointer.

## Content

* The title is the item's own name, as people say it.
* The supporting line carries what people need before opening: for a project, the country and the number of positions.
* Dates and counts in tabular digits.
* Long country names wrap. Nothing shrinks to fit.

## Tokens

* --surface-1
* --bg
* --radius-2xl
* --space-1
* --space-2
* --space-4
* --space-6
* --text
* --text-muted
* --text-label
* --elevation-0
* --surface-control
* --duration-fast
* --ease-standard
* --focus-ring
* --focus-ring-width
* --focus-ring-offset