Card

Examples

Theme: Site (Card examples preview)

Preview theme

Site

Light

Dark

Variants

Raised

A raised surface with a soft shadow.

Outlined

A strong outline, with no fill or shadow.

Flat

A sunken fill, with no outline or shadow.

Glass

Translucent and blurred, over a varied backdrop.

Parts

Static hosting

S3 and CloudFront, deployed from GitHub Actions.

• S3
• CloudFront

With media

Color tokens

Decorative media, hidden from assistive technology.

Lower Falls

A meaningful image, with alt text.

Linked, with a nested control

Design tokens

Every color, size and motion value, with light and dark themes.

Source on GitHub⁠, opens in new tab

The whole site is public.

Star (example)

Footers line up

• Contact form

  Sends me a message.
  Planned

• View counter

  Counts visits to each page. Its backend comes later.
  Planned

• Component library

  Built on design tokens. Every component is keyboard accessible. Each one has its own section here.
  In progress

Subgrid

• Contact form

  Sends me a message.
  Planned

• View counter, with a count for every page

  Counts visits to each page. Its backend comes later.
  Planned

• Component library

  Built on design tokens. Every component is keyboard accessible. Each one has its own section here.
  In progress

Any heading level

Project notes

Announced as: “Project notes, heading level 4”

Release notes

Announced as: “Release notes, heading level 5”

Heading look

Featured project

A larger heading, with h3's look.

Case study

A kicker-style heading, with the label look.

Customized with component tokens

Accent outline

An accent border and tighter padding, set through Card's component tokens.

CSSCopy code

.accentCard {
  --component-card-raised-border: var(--color-accent-border);
  --component-card-padding: var(--space-inset-md);
}

Props

Any native prop not listed here goes to the root element unchanged.

subgrid works only when the Card is a direct child of a Grid. For several footer items, use a horizontal Stack. Glass needs a varied backdrop behind it. On a link card, aria-current goes to its heading link. Media is shown first but comes after the heading in the DOM.

Component tokens

Accessibility

• An article by default, or section, div or li.
• A link card has one link: its heading, named by the heading text alone (plus “, opens in new tab” with newTab).
• The whole surface is clickable for pointers; nested controls keep their own clicks and focus.
• A link card is never marked aria-current automatically, even on the page it links to. A caller's aria-current goes to its heading link.
• The heading's look comes from headingVariant and is the same at every level (except with inherit or code), so choose headingLevel by the page outline.
• Text inside a link card can't be selected, because the link's overlay covers it.
• The hover look shows only where a click follows the link: not over nested controls, and not on touch screens.
• Media is shown above the heading but read after it, so the heading always comes first.
• Card doesn't hide media: mark decorative media aria-hidden, and make a decorative preview of controls inert too. Give a meaningful image alt text.
• A control in media is shown above the heading but focused after the heading link. Keep it inset from the media's edges by the focus ring's width plus offset, or its ring is clipped.
• Glass turns opaque when reduced transparency is requested, and in custom themes: only the built-in themes' glass is reviewed over the sphere.
• Backdrops, for text contrast: raised and flat work on any surface. Outlined is transparent, so use it only on surface.base, raised or sunken. Glass needs a varied backdrop made only of those surfaces, or the dot sphere behind Home and the 404, where glass panels carry text over the dots.
• A link card's focus ring is drawn on the backdrop around the card, so keep link cards of every variant off action.background: there the ring is the same color in light, and nearly so in dark.