Content

Card

Flexible content card with mixed media and text for marketing tiles, editorial highlights, and feature callouts.

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.

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 aspectRatio prop 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.

Pro-Tip from Larry: Set aspectRatio on every card in a grid so columns line up even when the images come from different sources.

Usage

LCard

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`
`variant`	`outline`	`"plain" \| "outline" \| "haptic"`
`media`		`Media`
`aspectRatio`		`string \| number`
`icon`		`string`
`iconBackground`		`"pale" \| "solid"`
`size`	`m`	`"m" \| "l"`
`captionSize`	`s`	`TextSize ("s" \| "m" \| "xs" \| "l" \| "sm" \| "xl" \| 4 more)` Typography size for the caption. Default mirrors the previous `textSize='m'` mapping (`'s'`).
`headingSize`	`ml`	`TextSize ("s" \| "m" \| "xs" \| "l" \| "sm" \| "xl" \| 4 more)` Typography size for the heading. Default mirrors the previous `textSize='m'` mapping (`'ml'`).
`sublineSize`	`m`	`TextSize ("s" \| "m" \| "xs" \| "l" \| "sm" \| "xl" \| 4 more)` Typography size for the subline. Default mirrors the previous `textSize='m'` mapping (`'m'`).
`bodySize`	`s`	`TextSize ("s" \| "m" \| "xs" \| "l" \| "sm" \| "xl" \| 4 more)` Typography size for the body / description block. Default `'s'` mirrors the previous hardcoded body size.
`captionColor`		`string` Optional CSS colour override for the caption (inherits from theme when unset).
`headingColor`		`string` Optional CSS colour override for the heading.
`sublineColor`		`string` Optional CSS colour override for the subline.
`bodyColor`		`string` Optional CSS colour override for the body / description.
`textAlignment`	`start`	`"center" \| "start" \| "end"`
`headingAs`		`HeadingTag ("h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "div")` HTML element used for the heading. Defaults to TextGroup's own default.
`sublineAs`		`SublineTag ("h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| 2 more)` HTML element used for the subline. Defaults to TextGroup's own default.
`href`		`string`
`linkText`		`string`
`cta`		`CardCta { text, link, size, 3 more }`

Edit this pageorReport an issue

Separator

Visually divides content sections, so that a clear visual hierarchy is generated and improves content readability.

Basic Table

Two-column label/value table built on CSS Grid subgrid, rendered as a semantic description list (`<dl>`). Pairs a `BasicTable` parent with `BasicTableRow` rows for opening hours, spec sheets, and key/value summaries.