Card
Loading playground
Overview
Card is a content container that pairs an image (or any media slot) with text: caption, heading, subline, description, icon, and an optional call-to-action. When you set href, the whole tile becomes a single click target.
Pick a variant by the role the card plays in the layout:
variant | When to use |
|---|---|
'plain' | Borderless layout for editorial grids and mixed-media collections. |
'outline' | Soft border that gains a gradient ring on hover or focus. The standard interactive card. |
'haptic' | Elevated card with a shadow that deepens on hover. Best for hero placements that should feel tappable. |
Pass aspectRatio ('16/9', '4:3', or a numeric ratio) so card grids stay aligned across cards with different image dimensions.
Related content tiles:
LinkTile— category-promoting tile with basic, compact, and big layouts.ProductTileBasic— the product-listing tile with pricing, swatches, and add-to-cart.
Key Business & UX Benefits
- One component covers marketing tiles, feature callouts, and editorial highlights without per-block CSS or bespoke layouts.
- Three visual variants and a single
aspectRatioprop keep card grids aligned and on-brand across breakpoints, even when imagery comes from different sources. - Full-card click target with built-in hover and focus states improves usability on touch, mouse, and keyboard alike.
- Editors compose card blocks in Studio without dev help, so marketing teams ship campaigns faster.
aspectRatio on every card in a grid so columns line up even when the images come from different sources.Usage
Feature List
- Three variants ('plain', 'outline', 'haptic') for editorial grids, standard tiles, and tappable hero placements
- Single aspectRatio prop keeps every card in a grid aligned across mixed-media sources
- Full-card click target with built-in hover and focus states when href is set
- Inline CardCta with its own variant, size, and icon props for tailored call-to-action treatment
- Configurable in Studio (variants, copy, CTA, media) so marketing teams swap content without dev help
- Themed via design tokens and a BEM root class for per-card overrides
API Reference
| Prop | Default | Type |
|---|---|---|
caption | string | |
heading | string | |
subline | string | |
description | string | HtmlFragment { html } | |
variant | outline | "plain" | "outline" | "haptic" |
media | ||
aspectRatio | string | number | |
icon | string | |
iconBackground | "pale" | "solid" | |
size | m | "m" | "l" |
textSize | "s" | "m" | "l"Typography tier for caption/heading/subline/description. When unset, uses component defaults. | |
textAlignment | start | "center" | "start" | "end" |
headingAs | TextGroupHeadingAs ("h1" | "h2" | "h3" | "h4" | "h5" | "h6" | 2 more)HTML element used for the heading. Defaults to TextGroup's own default. | |
sublineAs | TextGroupSublineAs ("h1" | "h2" | "h3" | "h4" | "h5" | "h6" | 3 more)HTML element used for the subline. Defaults to TextGroup's own default. | |
href | string | |
linkText | string | |
cta | CardCta { text, link, size, 3 more } |
Separator
Visually divides content sections, so that a clear visual hierarchy is generated and improves content readability.
Description List
Two-column label/value list built on CSS Grid subgrid. Pairs a `DescriptionList` parent with `DescriptionListItem` rows for opening hours, spec sheets, and key/value summaries.