Card

Surface container for grouped content. Default is bordered with 24px padding; variants layer on top — --elevated (shadow), --interactive (hover lift + brand border + focus ring), --stat (dashboard metric tile). Three sizes: --sm / default / --lg. Media in three positions: top (default), left (horizontal layout), background (full-bleed overlay). Composable slots: __header, __body, __section (divided subsection), __footer, __media.

a11y (built in): for clickable cards, render the whole card as a <a> or <button class="lb-card lb-card--interactive"> so the full surface is one click target — don't nest a button inside a clickable div. Selected grid tiles use aria-pressed (button) or aria-current (navigation). The CSS supplies the rest: --interactive carries its own :focus-visible outline, and under prefers-reduced-motion: reduce the hover lift is dropped while the border and shadow feedback stay.

Usage: Pure CSS — no controller, no data-lb-* hook, no events; compose the slot classes and ship. Selection in picker grids is consumer-wired: toggle .lb-card--selected and mirror it into aria-pressed yourself, exactly as this page's plan-picker demo does in a page-local script — lb.js never touches cards. The only live parts are data-lb-icon slots (nav chevron, header icon buttons), hydrated by the LB.init() sweep on DOMContentLoaded — load js/lb.js when using those and call LB.initIcons(root) for cards injected after boot.

Default + variants

Default card has a visible border and no shadow. Variants add elevation, interactivity, or swap to the Stat tile style.

Sizes

Three padding tiers — --sm (16px), default (24px), --lg (32px). One CSS custom property --_card-pad drives header, body, footer, and section paddings together.

Anatomy — header + body + footer

Optional header with title + trailing actions. Divided from body by a thin line. Footer pins actions at the bottom with its own divider.

Media — top / left / background

Media slot supports three positions. Left (lb-card--media-left) pairs with horizontal layout — media takes a 14rem-max column. Background (lb-card--media-bg) overlays content on a full-bleed image with a dark-to-transparent scrim for legibility.

Media aspect ratios

Top-stacked media carries a fixed ratio so the box never collapses — lb-card__media--top defaults to 16:9. Override with a ratio preset (mirrors the Figma card/media variants): --16x9, --4x3, --1x1, --3x4. Left- and background-media derive their size from layout, so ratios don't apply there.

Section dividers

Use __section to split a card into logical groups separated by a thin line. Common for Settings cards.

Stat tiles — dashboard metrics

Specialised layout for KPIs. Label (uppercase caption) + big tabular-nums value + optional delta with up/down tone (success / danger).

Selected state — picker grid

Combine --interactive + --selected for picker patterns (plan picker, theme picker, avatar picker). Use aria-pressed on buttons or aria-current on links.

Navigation card — trailing chevron

Add .lb-card__nav-icon to signal "this card navigates somewhere". Chevron sits at the right edge, muted by default, slides 2px right and goes full-color on hover. Pair with .lb-card--interactive + a real <a> or <button>.

Disabled

Reduced opacity, pointer events disabled. For options that exist but aren't available (out of stock, locked behind a plan). When the card is rendered as a real <button> use the native disabled attribute; otherwise add aria-disabled="true" + tabindex="-1" so assistive tech announces the unavailable state.

Loading state

Use Skeleton primitives inside card slots to mirror the final layout while data loads.