Card

CONTENT TYPES

Description, pills, or input

The content area under the title switches between a supporting description, a wrapped row of Pills, or a read-only text area with a character counter.

IMAGE

Top, bottom, left, or none

Image position is independent of content — Left switches the card to a horizontal layout.

FOOTER

Optional slot placeholders

The footer holds one or two generic "Slot" placeholders, meant to be swapped for real actions (buttons, links) per use case. This is how Slot behaves: it's an optional placeholder component — replace it with any component, or hide it if not needed.

STATES

Default, hover, and select

TOKENS & TYPOGRAPHY

Implementation bindings

COMPONENT STRUCTURE

CARD EXPANDER

A variation of Card — expandable, with its own attributes

An expandable card that pairs a checkbox-led question with a collapsible answer area — a wrapped row of pills, or a free-text input. It is implemented as its own component (CardExpander), not a prop on the master Card: it takes size, content, and chevron attributes of its own, rather than Card's image and footerSlots.

CARD EXPANDER · SIZE

Large, medium, or mobile

Size changes the thumbnail (67 px on Large, 44 px on Medium and Mobile) and the title typography (18 px Bold on Large, 16 px Bold on Medium and Mobile) — Mobile also caps the card's width at 314 px.

CARD EXPANDER · CONTENT

Pills, or a free-text input

The expanded area holds either a wrapped row of Pills, or a read-only text area with a character counter — the same two content types the master Card supports.

CARD EXPANDER · STATES

Default, hover, and select

CARD EXPANDER · TOKENS & TYPOGRAPHY

Implementation bindings

CARD EXPANDER · COMPONENT STRUCTURE

CARD SELECTOR

A variation of Card — a selectable list row, with its own attributes

A selectable list row that pairs an optional image with a title and description, and a trailing button to add or select it. It is implemented as its own component (CardSelector): its type attribute (lg, md, md-1line, item) has no equivalent on the master Card, and it has no content-type or footer-slot attributes at all.

CARD SELECTOR · TYPE

Large, medium, single-line medium, or item

Type changes the thumbnail (80 px on Large, 56 px on Medium), the title typography, and whether a description line and thumbnail render at all — Item drops both for a single compact text row.

CARD SELECTOR · STATES

Default, hover, and select

CARD SELECTOR · TOKENS & TYPOGRAPHY

Implementation bindings

CARD SELECTOR · COMPONENT STRUCTURE