Component
Card
Groups related content into one surface on the layer above.
Plain-text source, for agents and clipboard use: /components/source/card.txt
When to use it
Use to separate one coherent object — a booking, a departure, a summary — from its neighbours. A card sits on the next layer up from its container, which is what makes nesting legible without hand-picked greys.
Not this
Do not wrap a whole page in a card, and do not use one to add decoration to a paragraph. If everything on the screen is a card, nothing is grouped.
Examples
Default
September departures
Twenty-four departures are published for September, with three awaiting supplier confirmation.
html
<div class="flux-card">
<h3 class="flux-card__title">September departures</h3>
<p class="flux-card__body">Twenty-four departures are published for September, with three awaiting supplier confirmation.</p>
</div>With actions
Deposit schedule
A 20% deposit is taken at booking, with the balance due 60 days before departure.
html
<div class="flux-card">
<h3 class="flux-card__title">Deposit schedule</h3>
<p class="flux-card__body">A 20% deposit is taken at booking, with the balance due 60 days before departure.</p>
<div class="flux-card__footer">
<button class="flux-button flux-button--sm">Edit schedule</button>
<button class="flux-button flux-button--ghost flux-button--sm">View history</button>
</div>
</div>Interactive
When the whole card is a link, the border warms on hover and elevation caps at shadow-md.
html
<a class="flux-card flux-card--interactive" href="#">
<h3 class="flux-card__title">Orvis — Iceland 2026</h3>
<p class="flux-card__body">Eight itineraries, two brands, live since March.</p>
</a>Anatomy
| Part | Description |
|---|---|
| Container | layer-01 fill, hairline border-subtle, 4px radius, 20px padding. |
| Title | Bold, base size. Optional. |
| Body | Small, secondary text. |
| Footer | Optional divided row for actions. |
API
| Name | Kind | Description |
|---|---|---|
flux-card | class | The container. |
flux-card--interactive | class | Adds hover affordance. Use on an anchor or button element. |
flux-card__title | class | Optional heading. Use a real heading level for document order. |
flux-card__body | class | Secondary body copy. |
flux-card__footer | class | Divided action row. |
States
| State | Treatment |
|---|---|
| Default | card-bg on layer-01, hairline border. |
| Hover (interactive only) | border-interactive plus shadow-md. Nothing moves. |
| Focus (interactive only) | Global teal focus outline on the anchor. |
Keyboard
| Keys | Action |
|---|---|
Tab | Reaches an interactive card once, not once per element inside it. |
Enter | Follows the card link. |
Accessibility
- An interactive card must be a single anchor or button. Nesting several links inside a clickable div creates a keyboard trap and an unreadable accessible name.
- Use a real heading element for the title so the page outline is navigable; the class only styles it.
- A card is not a landmark. Do not give it role="region" unless it genuinely needs its own labelled section.
Tokens
The tier-3 and tier-2 tokens this component binds to. Change the token, not the component.
- --flux-card-radius
- --flux-card-padding
- --flux-card-bg
- --flux-card-border
- --flux-card-border-hover
- --flux-card-shadow-hover
Do and don’t
Do
- Let the card take its fill from the layer tokens so it works on every ground.
- Keep one padding value across a grid of cards.
- Keep the footer aligned to the card inset and let its actions wrap when they no longer fit.
Don’t
- Do not remove the card padding or position nested notes and actions against its outer edge.
- Do not put bordered boxes inside a card to group its content. Use a heading, spacing or a hairline divider; the card is the only box.
- Do not add a coloured bar along one edge as decoration.
- Do not put a coloured dot beside the title.
- Do not stack a border, an inner glow and a heavy shadow on the same container.