Card · Simbolik

Card options
Choice	Values	Default	What it does
`surfacesmbk-card--surface-<value>`	`slabraisedfloatwelloutline`	`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.
`layoutsmbk-card--layout-<value>`	`stackedsidepanelcompactbehind`	`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.
`selectedsmbk-card--selected`	On or off	Off	The brand edge round the card, for the one chosen among several. Say so in words too.
`bracketssmbk-card--brackets`	On or off	Off	Brand marks at the four corners, a decoration that points at the card.
`warning-edgesmbk-card--warning-edge`	On or off	Off	A warning edge for a card that needs attention. Say why in words too.
`danger-edgesmbk-card--danger-edge`	On or off	Off	A danger edge for a card in trouble. Say why in words too.
`draggedsmbk-card--dragged`	On or 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.

Partssmbk-card__mediasmbk-card__contentsmbk-card__headersmbk-card__topsmbk-card__icon-tilesmbk-card__iconsmbk-card__avatarsmbk-card__lightssmbk-card__header-textsmbk-card__eyebrowsmbk-card__title-rowsmbk-card__titlesmbk-card__linksmbk-card__numbersmbk-card__window-titlesmbk-card__metasmbk-card__trailingsmbk-card__arrowsmbk-card__bodysmbk-card__dividersmbk-card__footersmbk-card__footer-rowsmbk-card__footer-startsmbk-card__footer-end

The slab surface, stacked: a picture, a title with its meta, text, and a quiet and a brand button at the end of the footer.

A shared starting point for better interfaces. Explore the principles, patterns and resources your team needs.

The five surfaces: slab, raised, float, well (the picture raised inside it) and outline.

Floors from the page up: slab, raised and float stand on it, well is cut into it, outline only draws its edge.

Floors from the page up: slab, raised and float stand on it, well is cut into it, outline only draws its edge.

Floors from the page up: slab, raised and float stand on it, well is cut into it, outline only draws its edge.

Floors from the page up: slab, raised and float stand on it, well is cut into it, outline only draws its edge.

Floors from the page up: slab, raised and float stand on it, well is cut into it, outline only draws its edge.

A large header with an eyebrow, and a link as the footer with no rule above it.

A shared starting point for better interfaces. Explore the principles, patterns and resources your team needs.

The side layout: the picture beside the words, stacked on a narrow layout; a meta footer with the author and the reading time.

A shared starting point for better interfaces. Explore the principles, patterns and resources your team needs.

The picture fills the card; the words sit at its foot on a dark band, readable on any photograph.

A shared starting point for better interfaces. Explore the principles, patterns and resources your team needs.

The panel layout: the header on a shaded band, a description list in the slot, a divider edge to edge above the footer.

Owner: Ana Brooks
Status: In review
Version: 0.2 alpha

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.

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 row.
For a choice a reader makes with the keyboard as a radio or checkbox. Use a choice card, which is the control.

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.

Set up a workspace, invite your team and publish in under ten minutes.

Do

Give a card one main action, at the end of its footer, so it is clear where the card leads.

Set up a workspace, invite your team and publish in under ten minutes.

Don't

Several equal buttons in one card split the reader's attention and crowd the footer.

Version 2.4 adds the command palette and a small label type.

Do

Keep cards one level deep, so each one stands on its own.

Adds the command palette and a small label type.

Don't

A card inside a card doubles the edges and shadows and blurs what belongs to what.

No one has looked at it since Monday.

Do

Say a warning in words as well as with the edge.

No one has looked at it since Monday.

Don't

An edge alone is a color some readers cannot see and no screen reader says.

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.

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.

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

Card keys
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.

The files the card is made of. Its folder on GitHub (opens in a new tab) holds them with its wrapper and its document.

Stylesheet

card.css

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638

/* 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

Card tokens
Token and CSS	Value	Preview	Foundation
space.inset.md--smbk-space-inset-md	comfortable: 8pxcompact: 6pxchanges with density		Spacing
border-width.hairline--smbk-border-width-hairline	1px		Border width
color.border.rim--smbk-color-border-rim	light: #ffffffe6dark: #ffffff0dchanges with theme		Color
radius.container.lg--smbk-radius-container-lg	16px		Radius
color.surface.default--smbk-color-surface-default	light: #f3f5f8dark: #181a1cchanges with theme		Color
color.text.default--smbk-color-text-default	light: #232527dark: #e7ebf0changes with theme		Color
elevation.raised--smbk-elevation-raised	light: 0px 2px 8px 1px #373d431a, 0px 1px 2px 0px #373d431adark: 0px 2px 8px 1px #00000026, 0px 1px 2px 0px #00000026		Elevation
color.surface.raised--smbk-color-surface-raised	light: #f9fafbdark: #232527changes with theme		Color
elevation.raised-strong--smbk-elevation-raised-strong	light: 0px 4px 16px 1px #373d431a, 0px 2px 4px 0px #373d431adark: 0px 4px 16px 1px #00000026, 0px 2px 4px 0px #00000026		Elevation
elevation.overlay--smbk-elevation-overlay	light: 0px 12px 16px 2px #373d431a, 0px 2px 8px 0px #373d4326dark: 0px 12px 16px 2px #00000026, 0px 2px 8px 0px #00000033		Elevation
color.surface.sunken--smbk-color-surface-sunken	light: #373d430ddark: #00000066changes with theme		Color
elevation.inset-strong--smbk-elevation-inset-strong	light: inset -1px 2px 2px 0px #373d4333dark: inset -1px 2px 2px 0px #0000004d		Elevation
color.border.subtle--smbk-color-border-subtle	light: #c4cdd8dark: #2d3237changes with theme		Color
radius.container.md--smbk-radius-container-md	12px		Radius
radius.container.sm--smbk-radius-container-sm	8px		Radius
color.surface.disabled--smbk-color-surface-disabled	light: #e7ebf0dark: #373d43changes with theme		Color
space.stack.lg--smbk-space-stack-lg	comfortable: 16pxcompact: 12pxchanges with density		Spacing
space.inset.xl--smbk-space-inset-xl	comfortable: 16pxcompact: 12pxchanges with density		Spacing
size.width.240--smbk-size-width-240	240px		Size
space.inset.lg--smbk-space-inset-lg	comfortable: 12pxcompact: 8pxchanges with density		Spacing
space.stack.md--smbk-space-stack-md	comfortable: 12pxcompact: 8pxchanges with density		Spacing
size.content.sm--smbk-size-content-sm	480px		Size
color.text.on-media--smbk-color-text-on-media	#f9fafb		Color
color.surface.scrim--smbk-color-surface-scrim	#111213cc		Color
border-width.emphasis--smbk-border-width-emphasis	2px		Border width
color.border.brand--smbk-color-border-brand	#cc0d0d		Color
size.16--smbk-size-16	16px		Size
color.feedback.warning.border--smbk-color-feedback-warning-border	#da601a		Color
color.feedback.danger.border--smbk-color-feedback-danger-border	#f34336		Color
color.border.strong--smbk-color-border-strong	light: #9ba5b1dark: #373d43changes with theme		Color
focus.ring.width--smbk-focus-ring-width	2px		Focus
color.border.focus--smbk-color-border-focus	light: #cc0d0ddark: #f34336changes with theme		Color
focus.ring.offset--smbk-focus-ring-offset	2px		Focus
size.target.comfortable--smbk-size-target-comfortable	44px		Size
space.stack.xs--smbk-space-stack-xs	4px		Spacing
space.inline.md--smbk-space-inline-md	comfortable: 8pxcompact: 6pxchanges with density		Spacing
size.control.lg--smbk-size-control-lg	comfortable: 48pxcompact: 40pxchanges with density		Size
radius.control.lg--smbk-radius-control-lg	8px		Radius
color.icon.brand--smbk-color-icon-brand	light: #cc0d0ddark: #fe7d6dchanges with theme		Color
size.icon.xl--smbk-size-icon-xl	32px		Size
size.icon.lg--smbk-size-icon-lg	24px		Size
space.inline.xs--smbk-space-inline-xs	4px		Spacing
color.text.brand--smbk-color-text-brand	light: #cc0d0ddark: #f34336changes with theme		Color
typography.label-sm--smbk-typography-label-sm-font-family--smbk-typography-label-sm-font-size--smbk-typography-label-sm-font-weight--smbk-typography-label-sm-line-height--smbk-typography-label-sm-letter-spacing--smbk-typography-label-sm-text-transform	fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 12pxfontWeight: 500lineHeight: 1.4letterSpacing: 0px	The quick brown fox	Typography
space.inline.sm--smbk-space-inline-sm	comfortable: 6pxcompact: 4pxchanges with density		Spacing
typography.label-lg--smbk-typography-label-lg-font-family--smbk-typography-label-lg-font-size--smbk-typography-label-lg-font-weight--smbk-typography-label-lg-line-height--smbk-typography-label-lg-letter-spacing--smbk-typography-label-lg-text-transform	fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 16pxfontWeight: 500lineHeight: 1.4letterSpacing: 0px	The quick brown fox	Typography
typography.heading-2xs--smbk-typography-heading-2xs-font-family--smbk-typography-heading-2xs-font-size--smbk-typography-heading-2xs-font-weight--smbk-typography-heading-2xs-line-height--smbk-typography-heading-2xs-letter-spacing--smbk-typography-heading-2xs-text-transform	fontFamily: Funnel Display, Funnel Display Fallback, system-ui, sans-seriffontSize: min: 18px · max: 24pxfontWeight: 400lineHeight: 1.2letterSpacing: 0px	The quick brown fox	Typography
typography.label-md--smbk-typography-label-md-font-family--smbk-typography-label-md-font-size--smbk-typography-label-md-font-weight--smbk-typography-label-md-line-height--smbk-typography-label-md-letter-spacing--smbk-typography-label-md-text-transform	fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 14pxfontWeight: 500lineHeight: 1.4letterSpacing: 0px	The quick brown fox	Typography
color.text.subtlest--smbk-color-text-subtlest	light: #606a75dark: #7c8692changes with theme		Color
color.text.subtle--smbk-color-text-subtle	light: #4e555edark: #9ba5b1changes with theme		Color
typography.code-sm--smbk-typography-code-sm-font-family--smbk-typography-code-sm-font-size--smbk-typography-code-sm-font-weight--smbk-typography-code-sm-line-height--smbk-typography-code-sm-letter-spacing--smbk-typography-code-sm-text-transform	fontFamily: Geist Mono, Geist Mono Fallback, ui-monospace, monospacefontSize: 12pxfontWeight: 400lineHeight: 1.5letterSpacing: 0px	The quick brown fox	Typography
typography.body-sm--smbk-typography-body-sm-font-family--smbk-typography-body-sm-font-size--smbk-typography-body-sm-font-weight--smbk-typography-body-sm-line-height--smbk-typography-body-sm-letter-spacing--smbk-typography-body-sm-text-transform	fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 14pxfontWeight: 400lineHeight: 1.5letterSpacing: 0px	The quick brown fox	Typography
typography.body-md--smbk-typography-body-md-font-family--smbk-typography-body-md-font-size--smbk-typography-body-md-font-weight--smbk-typography-body-md-line-height--smbk-typography-body-md-letter-spacing--smbk-typography-body-md-text-transform	fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 16pxfontWeight: 400lineHeight: 1.5letterSpacing: 0px	The quick brown fox	Typography
size.icon.md--smbk-size-icon-md	20px		Size

Manifest

card.manifest.json

{
  "name": "card",
  "block": "smbk-card",
  "summary": "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.",
  "adapt": "css",
  "axes": {
    "surface": {
      "values": [
        "slab",
        "raised",
        "float",
        "well",
        "outline"
      ],
      "default": "slab",
      "description": "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": {
      "values": [
        "stacked",
        "side",
        "panel",
        "compact",
        "behind"
      ],
      "default": "stacked",
      "description": "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."
    }
  },
  "flags": {
    "selected": {
      "description": "The brand edge round the card, for the one chosen among several. Say so in words too."
    },
    "brackets": {
      "description": "Brand marks at the four corners, a decoration that points at the card."
    },
    "warning-edge": {
      "description": "A warning edge for a card that needs attention. Say why in words too."
    },
    "danger-edge": {
      "description": "A danger edge for a card in trouble. Say why in words too."
    },
    "dragged": {
      "description": "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": [
    "media",
    "content",
    "header",
    "top",
    "icon-tile",
    "icon",
    "avatar",
    "lights",
    "header-text",
    "eyebrow",
    "title-row",
    "title",
    "link",
    "number",
    "window-title",
    "meta",
    "trailing",
    "arrow",
    "body",
    "divider",
    "footer",
    "footer-row",
    "footer-start",
    "footer-end"
  ],
  "figmaNodeId": "7363:823"
}