Card Layout Vertical
When to use it
Section titled “When to use it”From the Lumo.Web.Component.V1.0.Complete library — theCard layout. Stacks header, body and footer down the card — the default arrangement used across Lumo screens.
card/layout/vertical description, read 2026-10-19.Where it goes
Section titled “Where it goes”- inside Card, filling its Layout slot
When not to use it
Section titled “When not to use it”- Don’t use it when the card leads with an image or chart; use card/layout/horizontal.
- Use instead:
card/layout/horizontal— not implemented in this library yet.
- Use instead:
What each variant is for
Section titled “What each variant is for”| Property | Value | What it is for |
|---|---|---|
header |
true |
not stated in the source |
header |
false |
not stated in the source |
footer |
true |
not stated in the source |
footer |
false |
not stated in the source |
Accessibility
Section titled “Accessibility”- a layout frame only: it adds no role of its own, so the card around it decides whether the surface is operable
src/components/card/cardLayoutVertical.jsx:30
Composition
Section titled “Composition”- Used with
Card
What this version promises
Section titled “What this version promises”See Versioning. At 0.1.0 the public surface is the named exports of src/index.ts; this component is one of them.
Every story that is not a variant-matrix row, embedded live from the deployed Storybook in both themes. The matrix itself is on the Design tab.
Default Padding None
Section titled “Default Padding None”Hovered Padding None
Section titled “Hovered Padding None”Focused Padding None
Section titled “Focused Padding None”Disabled Padding None
Section titled “Disabled Padding None”Default Padding Md
Section titled “Default Padding Md”Hovered Padding Md
Section titled “Hovered Padding Md”Focused Padding Md
Section titled “Focused Padding Md”Disabled Padding Md
Section titled “Disabled Padding Md”Default Padding Lg
Section titled “Default Padding Lg”Hovered Padding Lg
Section titled “Hovered Padding Lg”Focused Padding Lg
Section titled “Focused Padding Lg”Disabled Padding Lg
Section titled “Disabled Padding Lg”Default Padding Xl
Section titled “Default Padding Xl”Hovered Padding Xl
Section titled “Hovered Padding Xl”Focused Padding Xl
Section titled “Focused Padding Xl”Disabled Padding Xl
Section titled “Disabled Padding Xl”Header — with action
Section titled “Header — with action”Header — no subtitle
Section titled “Header — no subtitle”Header — action, no subtitle
Section titled “Header — action, no subtitle”Layout — with footer
Section titled “Layout — with footer”Layout — no header
Section titled “Layout — no header”Layout — footer, no header
Section titled “Layout — footer, no header”Interactive
Section titled “Interactive”Interactive — disabled
Section titled “Interactive — disabled”Long Title
Section titled “Long Title”Import
Section titled “Import”import { CardLayoutVertical } from '@ds-house/lumo-design-system';| Prop | Type | Default | Notes |
|---|---|---|---|
header |
boolean |
true |
Figma header. Shows the header row. |
headerProps |
object |
{} |
Props forwarded to CardHeader. |
body |
React.ReactNode |
null |
Figma ↳Body. The card’s main content. |
footer |
boolean |
false |
Figma footer. Shows the footer row. |
footerContent |
React.ReactNode |
null |
Fills the footer action row. |
className |
string |
'' |
Tokens it needs
Section titled “Tokens it needs”| Token | Light | Dark |
|---|---|---|
--body-body3 |
not in the build | — |
--border-radius-card |
not in the build | — |
--border-width-default |
not in the build | — |
--border-width-focused |
not in the build | — |
--color-bg-base |
not in the build | — |
--color-bg-disabled |
not in the build | — |
--color-border-primary-default |
not in the build | — |
--color-border-primary-disabled |
not in the build | — |
--color-border-primary-focused |
not in the build | — |
--color-border-primary-hovered |
not in the build | — |
--color-text-primary |
not in the build | — |
--color-text-secondary |
not in the build | — |
--heading-h5 |
not in the build | — |
--motion-duration-fast |
not in the build | — |
--spacing-gap-horizontal-md |
not in the build | — |
--spacing-gap-horizontal-sm |
not in the build | — |
--spacing-gap-md |
not in the build | — |
--spacing-gap-sm |
not in the build | — |
--spacing-gap-xs |
not in the build | — |
--spacing-padding-lg |
not in the build | — |
--spacing-padding-md |
not in the build | — |
--spacing-padding-sm |
not in the build | — |
--spacing-padding-xl |
not in the build | — |
A dash under Dark means the token does not change between themes.
Storybook’s own props table
Section titled “Storybook’s own props table”The Figma node
Section titled “The Figma node”The variant matrix
Section titled “The variant matrix”Each row as the set draws it, in both themes.
All Variants
Section titled “All Variants”What Figma never bound, and the gaps recorded against it
Section titled “What Figma never bound, and the gaps recorded against it”Where Figma and this repo disagree across the system, see the disagreements record.
Every commit touching this component and its subcomponents — a change to a subcomponent changes the component, and a log that reads only the parent file misses it.
| Commit | Date | Shipped in | Subject |
|---|---|---|---|
2b94809 |
2026-10-19 | unknown | Write the ten component intent files |
c8bc699 |
2026-10-18 | unknown | Add the test suite, and retire the deliberate stop |
9525e0f |
2026-10-17 | unknown | Make the repo a publishable npm package |
5c7687c |
2026-10-10 | unknown | Close the two uncovered boolean pairs on Card’s subcomponents |
cd47fe6 |
2026-10-03 | unknown | Add Card component, built from Figma node 64:113 |
7ccfbbb53757.