# Card

A bounded box about one thing: an optional picture, a header, a body and a footer, on one of five surfaces and in one of five layouts.

Block: `smbk-card`. Status: experimental. Figma: the Figma file, https://www.figma.com/community/file/1688324308358870630. Desktop and mobile: differ by presentation only.

## Options

| Axis | Values | Default | Meaning |
|---|---|---|---|
| `surface` | `slab`, `raised`, `float`, `well`, `outline` | `slab` | The floor the card stands on: slab for panels, raised for cards to pick from, float for the one that leads, well cut into the page with its picture raised inside, outline with no fill. |
| `layout` | `stacked`, `side`, `panel`, `compact`, `behind` | `stacked` | Stacked puts the picture on top, side beside the words, behind under them; panel lays the parts edge to edge with the header on a shaded band; compact is the tight card for a grid. |
| `selected` | on / off | off | The brand edge round the card, for the one chosen among several. Say so in words too. |
| `brackets` | on / off | off | Brand marks at the four corners, a decoration that points at the card. |
| `warning-edge` | on / off | off | A warning edge for a card that needs attention. Say why in words too. |
| `danger-edge` | on / off | off | A danger edge for a card in trouble. Say why in words too. |
| `dragged` | on / off | off | Lifted with the overlay shadow while the card is being moved, as on a board. The page sets it for as long as the move lasts. |

Parts: `smbk-card__media`, `smbk-card__content`, `smbk-card__header`, `smbk-card__top`, `smbk-card__icon-tile`, `smbk-card__icon`, `smbk-card__avatar`, `smbk-card__lights`, `smbk-card__header-text`, `smbk-card__eyebrow`, `smbk-card__title-row`, `smbk-card__title`, `smbk-card__link`, `smbk-card__number`, `smbk-card__window-title`, `smbk-card__meta`, `smbk-card__trailing`, `smbk-card__arrow`, `smbk-card__body`, `smbk-card__divider`, `smbk-card__footer`, `smbk-card__footer-row`, `smbk-card__footer-start`, `smbk-card__footer-end`

## Markup

```html
<article class="smbk-card smbk-card--surface-slab smbk-card--layout-stacked">
  <img
    class="smbk-card__media"
    src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22480%22%20height%3D%22270%22%3E%3Crect%20width%3D%22480%22%20height%3D%22270%22%20fill%3D%22%235c7798%22%2F%3E%3Ccircle%20cx%3D%22360%22%20cy%3D%2290%22%20r%3D%2260%22%20fill%3D%22%23cc0d0d%22%2F%3E%3C%2Fsvg%3E"
    alt=""
    width="480"
    height="270"
  >
  <div class="smbk-card__content">
    <header class="smbk-card__header smbk-card__header--type-title smbk-card__header--size-md">
      <div class="smbk-card__header-text">
        <div class="smbk-card__title-row">
          <h3 class="smbk-card__title">Design foundations</h3>
        </div>
        <p class="smbk-card__meta">Updated 2 min ago</p>
      </div>
    </header>
    <div class="smbk-card__body smbk-card__body--type-text">A shared starting point for better interfaces. Explore the principles, patterns and resources your team needs.</div>
    <footer class="smbk-card__footer smbk-card__footer--type-actions">
      <div class="smbk-card__footer-row">
        <div class="smbk-card__footer-end">
          <button type="button" class="smbk-btn smbk-btn--tone-ghost smbk-btn--size-sm">
            <span class="smbk-btn__label">Preview</span>
          </button>
          <button type="button" class="smbk-btn smbk-btn--tone-brand smbk-btn--size-sm">
            <span class="smbk-btn__label">Open</span>
          </button>
        </div>
      </div>
    </footer>
  </div>
</article>
```

## React

```tsx
import { Card, CardFooter } from './design-system/components/card/card.js';
import { Button } from './design-system/components/button/button.js';

<Card surface="slab" layout="stacked" image="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22480%22%20height%3D%22270%22%3E%3Crect%20width%3D%22480%22%20height%3D%22270%22%20fill%3D%22%235c7798%22%2F%3E%3Ccircle%20cx%3D%22360%22%20cy%3D%2290%22%20r%3D%2260%22%20fill%3D%22%23cc0d0d%22%2F%3E%3C%2Fsvg%3E" imageWidth={480} imageHeight={270} title="Design foundations" meta="Updated 2 min ago" footer={<CardFooter end={<Button tone="ghost" size="sm">Preview</Button>
<Button tone="brand" size="sm">Open</Button>} />}>A shared starting point for better interfaces. Explore the principles, patterns and resources your team needs.</Card>
```

## Stylesheet

```css
/* smbk-card — Card. Figma "Card" 7363:823 (Surface × Layout) with "CardHeader" 7357:668,
 * "CardBody" 7361:535 and "CardFooter" 7362:518, read on 14 October 2026.
 * A column: an optional picture, then the content (header, body, footer). The surface decides the fill,
 * the shadow and the edge; the layout where the picture goes and how much room the parts get. Selected,
 * the brackets and the two edges draw over the rim. The old media classes answer beside the layouts that
 * replaced them, for markup written by hand.
 * The card clips nothing, so the selected edge and the brackets can cover its rim; a part that meets the
 * card's rounded edge takes the card's corner itself. */

.smbk-card {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--smbk-space-inset-md);
  border: var(--smbk-border-width-hairline) solid var(--smbk-color-border-rim);
  border-radius: var(--smbk-radius-container-lg);
  background: var(--smbk-color-surface-default);
  color: var(--smbk-color-text-default);
  box-shadow: var(--smbk-elevation-raised);
}

/* ---- surface ---- */

.smbk-card--surface-raised {
  background: var(--smbk-color-surface-raised);
  box-shadow: var(--smbk-elevation-raised-strong);
}

.smbk-card--surface-float {
  background: var(--smbk-color-surface-raised);
  box-shadow: var(--smbk-elevation-overlay);
}

/* Cut into the page; its picture stands raised inside it. */
.smbk-card--surface-well {
  background: var(--smbk-color-surface-sunken);
  box-shadow: var(--smbk-elevation-inset-strong);
}

.smbk-card--surface-well > .smbk-card__media {
  outline: var(--smbk-border-width-hairline) solid var(--smbk-color-border-rim);
  outline-offset: calc(-1 * var(--smbk-border-width-hairline));
  box-shadow: var(--smbk-elevation-raised);
}

.smbk-card--surface-outline {
  border-color: var(--smbk-color-border-subtle);
  border-radius: var(--smbk-radius-container-md);
  background: none;
  box-shadow: none;
}

/* ---- the picture ---- */

.smbk-card__media {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  border-radius: var(--smbk-radius-container-sm);
  object-fit: cover;
  background: var(--smbk-color-surface-disabled);
}

/* A picture given as an element (a placeholder, a picture with sources): the frame takes the corners. */
div.smbk-card__media {
  overflow: hidden;
}

div.smbk-card__media > * {
  display: block;
  width: 100%;
  object-fit: cover;
}

/* The picture's shape, when the page wants one rather than the picture's own. */
.smbk-card__media--ratio-16-9 {
  aspect-ratio: 16 / 9;
}

.smbk-card__media--ratio-4-3 {
  aspect-ratio: 4 / 3;
}

.smbk-card__media--ratio-1-1 {
  aspect-ratio: 1 / 1;
}

div.smbk-card__media:is(.smbk-card__media--ratio-16-9, .smbk-card__media--ratio-4-3, .smbk-card__media--ratio-1-1) > * {
  height: 100%;
}

.smbk-card__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--smbk-space-stack-lg);
  min-width: 0;
  padding: var(--smbk-space-inset-xl);
}

/* ---- layout: side, the picture beside the words; stacked on a narrow layout ---- */

.smbk-card--layout-side {
  flex-direction: row;
}

.smbk-card--layout-side > .smbk-card__media {
  width: var(--smbk-size-width-240);
  max-width: 40%;
  align-self: stretch;
}

@container style(--smbk-layout: narrow) {
  .smbk-card--layout-side {
    flex-direction: column;
  }

  .smbk-card--layout-side > .smbk-card__media {
    width: 100%;
    max-width: none;
  }
}

/* ---- layout: panel, the parts edge to edge for a dashboard ---- */

.smbk-card--layout-panel {
  padding: 0;
}

.smbk-card--layout-panel > .smbk-card__content {
  gap: 0;
  padding: 0;
}

/* The header on a shaded band: sunken on the slab, the default surface on the others. */
.smbk-card--layout-panel > .smbk-card__content > .smbk-card__header {
  padding: var(--smbk-space-inset-lg) var(--smbk-space-inset-xl);
  background: var(--smbk-color-surface-default);
}

.smbk-card--layout-panel.smbk-card--surface-slab > .smbk-card__content > .smbk-card__header {
  background: var(--smbk-color-surface-sunken);
}

/* The band meets the card's rounded top, inside its edge: its corners are the card's less the edge's width, so
   its fill follows the rim's inner curve and never shows past the corners. The card clips nothing, so the band
   rounds itself. */
.smbk-card--layout-panel > .smbk-card__content:first-child > .smbk-card__header:first-child {
  border-start-start-radius: calc(var(--smbk-radius-container-lg) - var(--smbk-border-width-hairline));
  border-start-end-radius: calc(var(--smbk-radius-container-lg) - var(--smbk-border-width-hairline));
}

.smbk-card--layout-panel.smbk-card--surface-outline > .smbk-card__content:first-child > .smbk-card__header:first-child {
  border-start-start-radius: calc(var(--smbk-radius-container-md) - var(--smbk-border-width-hairline));
  border-start-end-radius: calc(var(--smbk-radius-container-md) - var(--smbk-border-width-hairline));
}

.smbk-card--layout-panel > .smbk-card__content > .smbk-card__body,
.smbk-card--layout-panel > .smbk-card__content > .smbk-card__footer {
  padding: var(--smbk-space-inset-lg) var(--smbk-space-inset-xl);
}

/* The divider runs edge to edge above the footer; the footer's own rule stays off. */
.smbk-card--layout-panel > .smbk-card__content > .smbk-card__footer {
  border-top: 0;
}

/* ---- layout: compact, the tight card for a grid ---- */

.smbk-card--layout-compact {
  padding: 0;
  border-radius: var(--smbk-radius-container-md);
}

.smbk-card--layout-compact > .smbk-card__content {
  gap: var(--smbk-space-stack-md);
  padding: var(--smbk-space-inset-lg);
}

/* In the panel and compact layouts the picture meets the card's top edge and takes its corners there. */
:is(.smbk-card--layout-panel, .smbk-card--layout-compact) > .smbk-card__media:first-child {
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
}

/* ---- layout: behind, the picture fills the card and the words sit at its foot on the scrim, dark enough
   in both themes for the on-media text on any picture ---- */

.smbk-card--layout-behind {
  min-height: var(--smbk-size-content-sm);
  padding: 0;
  color: var(--smbk-color-text-on-media);
}

.smbk-card--layout-behind > .smbk-card__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.smbk-card--layout-behind > .smbk-card__content {
  position: relative;
  flex: 0 0 auto;
  margin-top: auto;
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
  background: var(--smbk-color-surface-scrim);
}

.smbk-card--layout-behind :is(.smbk-card__eyebrow, .smbk-card__title, .smbk-card__number, .smbk-card__meta, .smbk-card__body, .smbk-card__footer, .smbk-card__footer-row) {
  color: var(--smbk-color-text-on-media);
}

/* The quiet button's label reads on the scrim too; the brand button keeps its own. */
.smbk-card--layout-behind .smbk-card__footer .smbk-btn--tone-ghost {
  color: var(--smbk-color-text-on-media);
}

/* ---- selected, the brackets and the edges, drawn over the rim ---- */

.smbk-card--selected {
  outline: var(--smbk-border-width-emphasis) solid var(--smbk-color-border-brand);
  outline-offset: calc(-1 * var(--smbk-border-width-emphasis));
}

/* Four corner marks: one edge kept only at the corners. Decoration, so nothing reads it or takes a press. */
.smbk-card--brackets::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--smbk-border-width-hairline));
  border: var(--smbk-border-width-emphasis) solid var(--smbk-color-border-brand);
  border-radius: var(--smbk-radius-container-sm);
  pointer-events: none;
  mask:
    linear-gradient(var(--smbk-color-border-brand) 0 0) top left / var(--smbk-size-16) var(--smbk-size-16) no-repeat,
    linear-gradient(var(--smbk-color-border-brand) 0 0) top right / var(--smbk-size-16) var(--smbk-size-16) no-repeat,
    linear-gradient(var(--smbk-color-border-brand) 0 0) bottom left / var(--smbk-size-16) var(--smbk-size-16) no-repeat,
    linear-gradient(var(--smbk-color-border-brand) 0 0) bottom right / var(--smbk-size-16) var(--smbk-size-16) no-repeat;
}

.smbk-card--warning-edge {
  border-color: var(--smbk-color-feedback-warning-border);
}

.smbk-card--danger-edge {
  border-color: var(--smbk-color-feedback-danger-border);
}

/* ---- dragged: lifted off its column while it moves ---- */

.smbk-card--dragged {
  box-shadow: var(--smbk-elevation-overlay);
}

/* ---- a card that opens something: the title is a link or a button whose box covers the card, so the whole
   card is the one place to press. The edge turns strong on hover and the focus ring goes round the card. ---- */

.smbk-card__link {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.smbk-card__link::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--smbk-border-width-hairline));
  border-radius: var(--smbk-radius-container-lg);
}

:is(.smbk-card--surface-outline, .smbk-card--layout-compact) .smbk-card__link::after {
  border-radius: var(--smbk-radius-container-md);
}

@media (hover: hover) {
  .smbk-card:not(.smbk-card--warning-edge, .smbk-card--danger-edge):has(.smbk-card__link:hover) {
    border-color: var(--smbk-color-border-strong);
  }
}

.smbk-card__link:focus-visible::after {
  outline: var(--smbk-focus-ring-width) solid var(--smbk-color-border-focus);
  outline-offset: var(--smbk-focus-ring-offset);
}

/* With its picture behind, the words' band stops holding the link's box, so the press covers the whole card;
   the picture goes under the band instead, inside the card. */
.smbk-card--layout-behind:has(.smbk-card__link) {
  isolation: isolate;
}

.smbk-card--layout-behind:has(.smbk-card__link) > .smbk-card__media {
  z-index: -1;
}

.smbk-card--layout-behind:has(.smbk-card__link) > .smbk-card__content {
  position: static;
}

/* On a touch screen a second invisible area over the card reaches above and below it to the comfortable target,
   so even a card holding only a short title is a full press. The card, its focus ring and its place stay as drawn. */
@media (pointer: coarse) {
  .smbk-card__link::before {
    content: "";
    position: absolute;
    inset-inline: calc(-1 * var(--smbk-border-width-hairline));
    inset-block: min(calc(-1 * var(--smbk-border-width-hairline)), (100% - var(--smbk-size-target-comfortable)) / 2);
  }
}

/* ---- header: a title with its meta, and kinds with an icon, a person, a number or a window bar.
   Markup written by hand without a kind stacks its parts, as before. ---- */

.smbk-card__header {
  display: flex;
  flex-direction: column;
  gap: var(--smbk-space-stack-xs);
  min-width: 0;
}

.smbk-card__header:is(.smbk-card__header--type-title, .smbk-card__header--type-person, .smbk-card__header--type-number, .smbk-card__header--type-window) {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--smbk-space-inline-md);
}

.smbk-card__header:is(.smbk-card__header--type-person, .smbk-card__header--type-window) {
  align-items: center;
}

.smbk-card__header--type-icon {
  gap: var(--smbk-space-stack-lg);
}

/* The icon kind's top row: the icon well, and the trailing parts at the end. */
.smbk-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--smbk-space-inline-md);
}

.smbk-card__icon-tile {
  box-sizing: border-box;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--smbk-size-control-lg);
  height: var(--smbk-size-control-lg);
  border: var(--smbk-border-width-hairline) solid var(--smbk-color-border-rim);
  border-radius: var(--smbk-radius-control-lg);
  background: var(--smbk-color-surface-sunken);
  color: var(--smbk-color-text-default);
  box-shadow: var(--smbk-elevation-inset-strong);
}

.smbk-card__icon-tile--color-brand {
  color: var(--smbk-color-icon-brand);
}

/* An icon written by hand straight into the header keeps its old size. */
.smbk-card__icon {
  font-size: var(--smbk-size-icon-xl);
}

.smbk-card__icon-tile .smbk-card__icon {
  font-size: var(--smbk-size-icon-lg);
}

.smbk-card__avatar {
  flex: none;
}

.smbk-card__lights {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--smbk-space-inline-xs);
}

.smbk-card__header-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--smbk-space-stack-xs);
  min-width: 0;
}

.smbk-card__eyebrow {
  margin: 0;
  color: var(--smbk-color-text-brand);
  font-family: var(--smbk-typography-label-sm-font-family);
  font-size: var(--smbk-typography-label-sm-font-size);
  font-weight: var(--smbk-typography-label-sm-font-weight);
  line-height: var(--smbk-typography-label-sm-line-height);
  letter-spacing: var(--smbk-typography-label-sm-letter-spacing);
}

.smbk-card__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--smbk-space-inline-sm);
  min-width: 0;
}

/* The title: md by default, as in an app. */
.smbk-card__title {
  margin: 0;
  color: var(--smbk-color-text-default);
  font-family: var(--smbk-typography-label-lg-font-family);
  font-size: var(--smbk-typography-label-lg-font-size);
  font-weight: var(--smbk-typography-label-lg-font-weight);
  line-height: var(--smbk-typography-label-lg-line-height);
  letter-spacing: var(--smbk-typography-label-lg-letter-spacing);
}

.smbk-card__header--size-lg .smbk-card__title {
  font-family: var(--smbk-typography-heading-2xs-font-family);
  font-size: var(--smbk-typography-heading-2xs-font-size);
  font-weight: var(--smbk-typography-heading-2xs-font-weight);
  line-height: var(--smbk-typography-heading-2xs-line-height);
  letter-spacing: var(--smbk-typography-heading-2xs-letter-spacing);
}

.smbk-card__header--size-sm .smbk-card__title {
  font-family: var(--smbk-typography-label-md-font-family);
  font-size: var(--smbk-typography-label-md-font-size);
  font-weight: var(--smbk-typography-label-md-font-weight);
  line-height: var(--smbk-typography-label-md-line-height);
  letter-spacing: var(--smbk-typography-label-md-letter-spacing);
}

/* A number before the title, such as an issue's, in the title's style and the quietest text color. */
.smbk-card__number {
  margin-inline-end: var(--smbk-space-inline-sm);
  color: var(--smbk-color-text-subtlest);
}

/* The window bar's title: a path in code type, centred in the bar. */
.smbk-card__window-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--smbk-color-text-subtle);
  text-align: center;
  font-family: var(--smbk-typography-code-sm-font-family);
  font-size: var(--smbk-typography-code-sm-font-size);
  font-weight: var(--smbk-typography-code-sm-font-weight);
  line-height: var(--smbk-typography-code-sm-line-height);
  letter-spacing: var(--smbk-typography-code-sm-letter-spacing);
}

.smbk-card__meta {
  margin: 0;
  color: var(--smbk-color-text-subtlest);
  font-family: var(--smbk-typography-body-sm-font-family);
  font-size: var(--smbk-typography-body-sm-font-size);
  font-weight: var(--smbk-typography-body-sm-font-weight);
  line-height: var(--smbk-typography-body-sm-line-height);
  letter-spacing: var(--smbk-typography-body-sm-letter-spacing);
}

.smbk-card__header--size-lg .smbk-card__meta {
  color: var(--smbk-color-text-subtle);
  font-family: var(--smbk-typography-body-md-font-family);
  font-size: var(--smbk-typography-body-md-font-size);
  font-weight: var(--smbk-typography-body-md-font-weight);
  line-height: var(--smbk-typography-body-md-line-height);
  letter-spacing: var(--smbk-typography-body-md-letter-spacing);
}

.smbk-card__trailing {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--smbk-space-inline-xs);
  margin-inline-start: auto;
}

.smbk-card__arrow {
  font-size: var(--smbk-size-icon-md);
}

/* ---- body: text by default, or a slot that stacks what the page puts in it ---- */

/* A block, not a flex column: paragraphs keep the same gap as margins. */
.smbk-card__body {
  display: block;
  margin: 0;
  color: var(--smbk-color-text-subtle);
  font-family: var(--smbk-typography-body-md-font-family);
  font-size: var(--smbk-typography-body-md-font-size);
  font-weight: var(--smbk-typography-body-md-font-weight);
  line-height: var(--smbk-typography-body-md-line-height);
  letter-spacing: var(--smbk-typography-body-md-letter-spacing);
}

.smbk-card__body > * {
  margin-block: 0;
}

.smbk-card__body > * + * {
  margin-block-start: var(--smbk-space-stack-md);
}

/* The slot: the system's other components, one under another. */
.smbk-card__body--type-slot {
  display: flex;
  flex-direction: column;
  gap: var(--smbk-space-stack-md);
  min-width: 0;
}

.smbk-card__body--type-slot > * + * {
  margin-block-start: 0;
}

/* A stat in the slot is one of the card's parts: its tile padding and fill go, so its name starts on the
   card's own inset. */
.smbk-card__body--type-slot > .smbk-stat {
  padding: 0;
  background: none;
}

/* ---- footer: a rule, then one row. Markup written by hand without a kind keeps its content as it is. ---- */

.smbk-card__footer {
  display: flex;
  flex-direction: column;
  gap: var(--smbk-space-stack-lg);
  margin-top: auto;
  padding-top: var(--smbk-space-stack-lg);
  border-top: var(--smbk-border-width-hairline) solid var(--smbk-color-border-subtle);
}

.smbk-card__footer--rule-off {
  padding-top: 0;
  border-top: 0;
}

.smbk-card__footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--smbk-space-inline-sm);
  min-width: 0;
  color: var(--smbk-color-text-subtle);
  font-family: var(--smbk-typography-body-sm-font-family);
  font-size: var(--smbk-typography-body-sm-font-size);
  font-weight: var(--smbk-typography-body-sm-font-weight);
  line-height: var(--smbk-typography-body-sm-line-height);
  letter-spacing: var(--smbk-typography-body-sm-letter-spacing);
}

.smbk-card__footer-start,
.smbk-card__footer-end {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--smbk-space-inline-sm);
  min-width: 0;
}

.smbk-card__footer-end {
  margin-inline-start: auto;
}

/* Meta: a person's name, and the reading time at the end. */
.smbk-card__footer--type-meta .smbk-card__footer-start {
  color: var(--smbk-color-text-default);
  font-family: var(--smbk-typography-label-md-font-family);
  font-size: var(--smbk-typography-label-md-font-size);
  font-weight: var(--smbk-typography-label-md-font-weight);
  line-height: var(--smbk-typography-label-md-line-height);
  letter-spacing: var(--smbk-typography-label-md-letter-spacing);
}

.smbk-card__footer--type-meta .smbk-card__footer-end {
  color: var(--smbk-color-text-subtlest);
}

/* Total: the figure at the end. */
.smbk-card__footer--type-total .smbk-card__footer-end {
  color: var(--smbk-color-text-default);
  font-variant-numeric: tabular-nums;
  font-family: var(--smbk-typography-label-md-font-family);
  font-size: var(--smbk-typography-label-md-font-size);
  font-weight: var(--smbk-typography-label-md-font-weight);
  line-height: var(--smbk-typography-label-md-line-height);
  letter-spacing: var(--smbk-typography-label-md-letter-spacing);
}

/* Note: the note takes the room, its button at the end. */
.smbk-card__footer--type-note .smbk-card__footer-start {
  flex: 1 1 auto;
}

/* Full button: one button across the card. */
.smbk-card__footer--type-full-button .smbk-card__footer-row > * {
  flex: 1 1 auto;
}

/* ---- the panel's divider above the footer is the divider component, edge to edge ---- */

.smbk-card__divider {
  flex: none;
}

/* ---- high contrast (forced colors) ---- */
/* In Windows high-contrast mode the browser drops shadows; this puts the meaning back with the user's own colors.
   Nothing here applies outside that mode. */

@media (forced-colors: active) {
  .smbk-card--dragged {
    outline: var(--smbk-focus-ring-width) dashed CanvasText;
  }

  .smbk-card__link:focus-visible::after {
    outline-color: Highlight;
  }
}
```

## Tokens it reads

```json
{
  "space": {
    "inset": {
      "md": {
        "$type": "dimension",
        "$value": "{{space.8}}",
        "$description": "Padding inside a component, medium."
      },
      "xl": {
        "$type": "dimension",
        "$value": "{{space.16}}",
        "$description": "Padding inside a component, extra large."
      },
      "lg": {
        "$type": "dimension",
        "$value": "{{space.12}}",
        "$description": "Padding inside a component, large."
      }
    },
    "stack": {
      "lg": {
        "$type": "dimension",
        "$value": "{{space.16}}",
        "$description": "Gap between things stacked one above another, large."
      },
      "md": {
        "$type": "dimension",
        "$value": "{{space.12}}",
        "$description": "Gap between things stacked one above another, medium."
      },
      "xs": {
        "$type": "dimension",
        "$value": "{{space.4}}",
        "$description": "Gap between things stacked one above another, extra small."
      }
    },
    "inline": {
      "md": {
        "$type": "dimension",
        "$value": "{{space.8}}",
        "$description": "Gap between things side by side, medium."
      },
      "xs": {
        "$type": "dimension",
        "$value": "{{space.4}}",
        "$description": "Gap between things side by side, extra small."
      },
      "sm": {
        "$type": "dimension",
        "$value": "{{space.6}}",
        "$description": "Gap between things side by side, small."
      }
    }
  },
  "border-width": {
    "hairline": {
      "$type": "dimension",
      "$value": "{{border-width.1}}",
      "$description": "Thin lines: dividers and almost every edge."
    },
    "emphasis": {
      "$type": "dimension",
      "$value": "{{border-width.2}}",
      "$description": "Two-pixel edges for emphasis: a chosen card, a focus ring."
    }
  },
  "color": {
    "border": {
      "rim": {
        "$type": "color",
        "$value": "{{color.alpha.white.90}}",
        "$description": "The light rim that makes a surface look lit: fields, chosen pills, cards."
      },
      "subtle": {
        "$type": "color",
        "$value": "{{color.grey.300}}",
        "$description": "Dividers and quiet edges."
      },
      "brand": {
        "$type": "color",
        "$value": "{{color.red.600}}",
        "$description": "Brand-red edge; also the logo’s mark."
      },
      "strong": {
        "$type": "color",
        "$value": "{{color.grey.400}}",
        "$description": "Stronger edges and separators."
      },
      "focus": {
        "$type": "color",
        "$value": "{{color.red.600}}",
        "$description": "Keyboard focus ring on controls."
      }
    },
    "surface": {
      "default": {
        "$type": "color",
        "$value": "{{color.grey.100}}",
        "$description": "Standard surface: cards, panels, the header."
      },
      "raised": {
        "$type": "color",
        "$value": "{{color.grey.50}}",
        "$description": "One floor above default: popovers, raised panels."
      },
      "sunken": {
        "$type": "color",
        "$value": "{{color.alpha.grey-800.5}}",
        "$description": "Recessed wells: fields, tracks, code. See-through, so a well always shows one step below what it sits on: the page, a card or a panel."
      },
      "disabled": {
        "$type": "color",
        "$value": "{{color.grey.200}}",
        "$description": "Surface of a disabled card or field."
      },
      "scrim": {
        "$type": "color",
        "$value": "{{color.alpha.grey-950.80}}",
        "$description": "A dark band under light text over a picture, such as the words on a picture card. The same in both themes, so the text stays readable on any photo."
      }
    },
    "text": {
      "default": {
        "$type": "color",
        "$value": "{{color.grey.900}}",
        "$description": "Main text."
      },
      "on-media": {
        "$type": "color",
        "$value": "{{color.grey.50}}",
        "$description": "Text over pictures."
      },
      "brand": {
        "$type": "color",
        "$value": "{{color.red.600}}",
        "$description": "Brand-red text."
      },
      "subtlest": {
        "$type": "color",
        "$value": "{{color.grey.600}}",
        "$description": "Quietest text: hints, captions, placeholders."
      },
      "subtle": {
        "$type": "color",
        "$value": "{{color.grey.700}}",
        "$description": "Secondary text: descriptions, metadata."
      }
    },
    "feedback": {
      "warning": {
        "border": {
          "$type": "color",
          "$value": "{{color.orange.500}}",
          "$description": "Warning messages: edge."
        }
      },
      "danger": {
        "border": {
          "$type": "color",
          "$value": "{{color.red.500}}",
          "$description": "Danger messages: edge; the edge of a field in error (3:1)."
        }
      }
    },
    "icon": {
      "brand": {
        "$type": "color",
        "$value": "{{color.red.600}}",
        "$description": "Brand-red icons, at the same contrast as brand text."
      }
    }
  },
  "radius": {
    "container": {
      "lg": {
        "$type": "dimension",
        "$value": "{{radius.16}}",
        "$description": "Corners of cards, panels and dialogs, large."
      },
      "md": {
        "$type": "dimension",
        "$value": "{{radius.12}}",
        "$description": "Corners of cards, panels and dialogs, medium."
      },
      "sm": {
        "$type": "dimension",
        "$value": "{{radius.8}}",
        "$description": "Corners of cards, panels and dialogs, small."
      }
    },
    "control": {
      "lg": {
        "$type": "dimension",
        "$value": "{{radius.8}}",
        "$description": "Corners of controls, large."
      }
    }
  },
  "elevation": {
    "raised": {
      "$type": "shadow",
      "$value": {
        "light": "0px 2px 8px 1px #373d431a, 0px 1px 2px 0px #373d431a",
        "dark": "0px 2px 8px 1px #00000026, 0px 1px 2px 0px #00000026"
      }
    },
    "raised-strong": {
      "$type": "shadow",
      "$value": {
        "light": "0px 4px 16px 1px #373d431a, 0px 2px 4px 0px #373d431a",
        "dark": "0px 4px 16px 1px #00000026, 0px 2px 4px 0px #00000026"
      }
    },
    "overlay": {
      "$type": "shadow",
      "$value": {
        "light": "0px 12px 16px 2px #373d431a, 0px 2px 8px 0px #373d4326",
        "dark": "0px 12px 16px 2px #00000026, 0px 2px 8px 0px #00000033"
      }
    },
    "inset-strong": {
      "$type": "shadow",
      "$value": {
        "light": "inset -1px 2px 2px 0px #373d4333",
        "dark": "inset -1px 2px 2px 0px #0000004d"
      }
    }
  },
  "size": {
    "16": {
      "$type": "dimension",
      "$value": "16px",
      "$description": "Raw size step, 16 px. Only for fixed sizes inside a component; semantic sizes (size/control, icon, mark) point here."
    },
    "width": {
      "240": {
        "$type": "dimension",
        "$value": "240px",
        "$description": "A fixed width of 240 px: a narrow column, a list’s greatest height. Semantic sizes point here."
      }
    },
    "content": {
      "sm": {
        "$type": "dimension",
        "$value": "{{size.width.480}}",
        "$description": "Widest a content column may grow, small."
      }
    },
    "target": {
      "comfortable": {
        "$type": "dimension",
        "$value": "{{size.44}}",
        "$description": "Comfortable touch target (44)."
      }
    },
    "control": {
      "lg": {
        "$type": "dimension",
        "$value": "{{size.48}}",
        "$description": "Height of a large control: 48 comfortable, 40 compact. A page may use it for its main call to action; apps use md. Dashboard recipe: use compact density; 40 for the page’s one main action and for forms; 32 for toolbars and filters, the size used most; 28 for actions inside table rows and cards. On phones switch to comfortable density, or give small controls an invisible 44 px tap area (size/target/comfortable)."
      }
    },
    "icon": {
      "xl": {
        "$type": "dimension",
        "$value": "{{size.32}}",
        "$description": "Icon box, extra large."
      },
      "lg": {
        "$type": "dimension",
        "$value": "{{size.24}}",
        "$description": "Icon box, large."
      },
      "md": {
        "$type": "dimension",
        "$value": "{{size.20}}",
        "$description": "Icon box, medium."
      }
    }
  },
  "focus": {
    "ring": {
      "width": {
        "$type": "dimension",
        "$value": "{{border-width.2}}",
        "$description": "Thickness of the focus ring."
      },
      "offset": {
        "$type": "dimension",
        "$value": "{{space.2}}",
        "$description": "Gap between a control and its focus ring."
      }
    }
  },
  "typography": {
    "label-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Geist, Geist Fallback, system-ui, sans-serif",
        "fontSize": "12px",
        "fontWeight": 500,
        "lineHeight": 1.4,
        "letterSpacing": "0px"
      },
      "$description": "Label SM: labels on controls and short UI text (buttons, chips, tabs, menu headings). Geist Medium, sentence case. Code and keys use Code SM and Code MD."
    },
    "label-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Geist, Geist Fallback, system-ui, sans-serif",
        "fontSize": "16px",
        "fontWeight": 500,
        "lineHeight": 1.4,
        "letterSpacing": "0px"
      },
      "$description": "Label LG: labels on controls and short UI text (buttons, chips, tabs, menu headings). Geist Medium, sentence case. Code and keys use Code SM and Code MD."
    },
    "heading-2xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Funnel Display, Funnel Display Fallback, system-ui, sans-serif",
        "fontSize": {
          "min": "18px",
          "max": "24px"
        },
        "fontWeight": 400,
        "lineHeight": 1.2,
        "letterSpacing": "0px"
      }
    },
    "label-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Geist, Geist Fallback, system-ui, sans-serif",
        "fontSize": "14px",
        "fontWeight": 500,
        "lineHeight": 1.4,
        "letterSpacing": "0px"
      },
      "$description": "Label MD: labels on controls and short UI text (buttons, chips, tabs, menu headings). Geist Medium, sentence case. Code and keys use Code SM and Code MD."
    },
    "code-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Geist Mono, Geist Mono Fallback, ui-monospace, monospace",
        "fontSize": "12px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": "0px"
      },
      "$description": "Code SM: keys (Kbd) and short code in a line of text. Geist Mono."
    },
    "body-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Geist, Geist Fallback, system-ui, sans-serif",
        "fontSize": "14px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": "0px"
      }
    },
    "body-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Geist, Geist Fallback, system-ui, sans-serif",
        "fontSize": "16px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": "0px"
      }
    }
  }
}
```

## Purpose

A bounded box about one thing — an article, a product, a person, a queue, a figure — presented as a unit with its own picture, header, body and footer. It stands on one of five surfaces, from a raised slab to a well cut into the page, and takes one of five layouts, from the picture on top to the picture behind the words.

## Anatomy

- The block, the box. Its surface sets its fill, shadow and edge; its layout where the picture goes and how much room the parts get.
- The media part, an optional picture: on top, beside the content, edge to edge at the top, or behind everything. It is a picture element, or a frame holding any element given in its place, such as an image placeholder.
- The content part, the column holding the header, the body and the footer, each optional.
- The header part, in one of five kinds: a title with an optional eyebrow and a quiet meta line; an icon in a sunken well over the title; a person, their avatar beside their name and role; a number before the title; or a window bar, three dots and a title in code type. Each comes in three sizes, lg for marketing pages, md for apps and sm for dense boards. A count, a status badge, a link, an arrow and a menu button can sit after the title or at the end.
- The body part, in one of two kinds: text, or a slot that stacks the system's other components, such as a stat, a list, a description list, a progress bar, a code block, an empty state or a chart. A stat in the slot drops its own padding and surface, so it lines up with the header.
- The footer part, a hairline rule and one row, in one of nine kinds: buttons at the end, a link with buttons, one button across the card, a link, a person with the reading time, tags, people, a total, or a note beside a button. The rule can be left out.
- In the panel layout, a divider runs edge to edge above the footer in place of its rule.

## When to use

- A grid or list of like items, each summarized: articles, tools, people, projects.
- A single highlighted item: a featured article, a plan, a quote.
- A dashboard panel: a title on a shaded band over a figure, a list or a chart, with its actions underneath.
- An item on a board, compact on the raised surface, that the reader opens or drags to another lane.
- A choice among a few options shown as cards, marked selected.

## When not to use

- As a wrapper for a whole page section. Sections are not cards.
- For a single line of information. Use a [list](list.md) row.
- For a choice a reader makes with the keyboard as a radio or checkbox. Use a [choice card](choice-card.md), which is the control.

## Behavior

None of its own beyond its layout. The side layout stacks the picture above the words when the layout switch is narrow. With the picture behind, the picture fills the card and the content sits at its foot on a dark band, the scrim, in the on-media text color; the card is at least as tall as the small content width, so the picture shows above the band.

A picture keeps its own shape, as wide as the card, unless given a shape (16:9, 4:3 or 1:1). Given the picture's own size, the card holds the picture's place before it loads, so nothing below it moves; cards further down a long page can also wait to fetch their picture until it nears the screen. A picture with its own sources and sizes, or an image placeholder, can be given as an element instead of an address.

Content given to the wrapper goes into one body part, unless every piece of it is a body already: a `CardBody`, or a component of the page's own that draws one and carries the mark `cardPart = 'body'` (as in `ProjectBody.cardPart = 'body'`). The `footer` takes a `CardFooter`, or a component that draws one and carries `cardPart = 'footer'`, as it is, and puts anything else in a footer part. A component that draws a body without the mark ends up inside a second body; in development the console says so.

The selected flag draws a brand edge round the card; the brackets flag draws brand marks at its corners; the warning and danger edges color its rim; the dragged flag lifts the card with a deeper shadow while the page moves it.

Given an address or an open handler, the title becomes the card's one link or button, and its box is stretched over the card, so a press anywhere on the card follows it. The edge turns strong under the pointer, and the focus ring goes round the whole card. On a touch screen the press reaches the comfortable target size above and below a short card. With your own header, give the address or the handler to the header.

## Accessibility

### What it does for you

- The card is an article element, and its title is a heading. The wrapper renders a level-three heading unless given a `headingLevel` from two to six. The level never changes how the title looks.
- The header's arrow is decoration.
- The brackets are decoration and are hidden from assistive technology.
- The person header's avatar is hidden from assistive technology, since the name beside it is the heading.
- A card that opens something has one link or button, its title, so a screen reader hears the card's name once, as the link's or the button's. The rest of the card is not read twice.
- With a picture behind, the scrim keeps the text readable: it is dark enough in both themes that the on-media text passes 4.5:1 on it over the brightest picture.

### What you must do

- Pick the heading level one below the heading the card sits under, so the page's outline never skips a level. In plain markup, write the title as the heading element that fits where the card sits, and keep the title class on it.
- Make a card one of two things, never both: one link with nothing else to press inside it, or a box whose links and buttons are each their own target. Never wrap a link round a button.
- Name a menu button in the header for the card it acts on, such as "More actions for Team activity".
- Say what the selected edge, the warning and danger edges and a status dot mean in words too, in a status badge or the text, or use a choice card when the reader makes the choice. They are colors.
- Give a chart in the slot its own text alternative, as the chart asks.
- Keep everything else in a card that opens something out of the way of the press: no other link or button inside it.
- Give a picture alternative text unless it is decorative.

### How to test

- Tab through the card: focus goes to its one link, or to each link and button inside it, with the focus ring showing in both themes and in a forced-color mode.
- With a screen reader, the card is read as an article with its title as a heading at the level you chose; in a card that opens something, the title is read as a link or a button.
- Press a card that opens something away from its title, near a corner: it follows the link.
- Read the card with the colors taken away: every edge and dot still says what it means in words.
- With text at 200% and the page 320 pixels wide, the card stays whole and its text wraps.

### Keyboard

| Key | What it does |
|---|---|
| Tab | Moves focus to the card's link when it is one link, or to each link and button inside it. |
| Enter | Follows the focused link, or presses the focused button. |
| Space | Presses the focused button. |

## Usage rules

### Do

- Keep one main action per card, at the end of its footer.
- Use the eyebrow for a category, not for a date.
- Set the title's heading level from where the card sits, one below the heading above it.
- Say a selection, a warning or a danger in words as well as with the edge.
- Pick one surface for a set of cards; save float for the one that leads.

### Don't

- Nest cards.
- Put a rule or divider in yourself. The footer draws its rule, and the panel layout its divider.
- Make a card both one link and a holder of buttons.