Usage
Card is a bordered, elevated surface for discrete, self-contained items — a single profile, notification, metric, or a product in a grid: things you could reorder or remove independently. Cards are not the default layout tool; most content groups read clearly from spacing and headings alone. Reach for a card only when items need clear interaction boundaries or visual comparison.
Assemble a card from its parts — nord-card-header, nord-card-body and nord-card-footer — usually as direct children of nord-card. You own the structure and can reorder, omit or repeat parts.
import "@nordhealth/components/lib/Card"
import "@nordhealth/components/lib/CardHeader"
import "@nordhealth/components/lib/CardBody"
import "@nordhealth/components/lib/CardFooter"
Composition New since Jul 24, 2026
A card is composed of up to three parts, normally placed as direct children of nord-card. The parts render in the light DOM — your CSS and n: utilities reach them directly — while the nord-card root keeps a shadow-DOM surface for the border, radius and elevation.
nord-card
├── nord-card-header heading + optional actions row; draws the header divider
├── nord-card-body main content; applies the card padding and grows to fill
└── nord-card-footer footer content; set `divider` for a separating top border
<nord-card>
<nord-card-header>
<h2>Title</h2>
<nord-button>Edit</nord-button>
</nord-card-header>
<nord-card-body>Body content</nord-card-body>
<nord-card-footer divider>Footer</nord-card-footer>
</nord-card>
All three parts are optional and can be reordered, omitted or repeated. They can also be wrapped when a custom layout requires it; in that case, the wrapper owns layout behavior such as body growth. A direct h1–h6 child of nord-card-header automatically receives the same typography as the legacy Card header. The card's padding attribute flows through to nord-card-body, and content placed directly in the card without a nord-card-body (such as a table) meets the card edges.
Examples
Basic
A card with only body content uses a single nord-card-body.
Padding
The padding attribute accepts m (default), l or none, and applies to nord-card-body.
Footer divider
Set divider on nord-card-footer to draw a border between the body and footer.
Padding sizes
Compare the available padding values side by side.
Discrete items New since Jul 24, 2026
Use cards for self-contained items such as a metric or a profile, and keep padding consistent across siblings so they align in a grid or list. Don't wrap whole page sections ("Settings", form groups) in cards — those are page regions; use a heading and a Stack instead.
Accent colours New since Jul 24, 2026
Use the --n-card-background-color CSS custom property to distinguish cards by category, and set --n-card-box-shadow to none when the colour should provide the visual separation. Don't use colour to signal status (success, error or warning); use Banner or Badge instead.
Sections
Divide a card's body into sections with internal dividers.
With a form
Use a card as the surface for a form, with the submit action inside the body.
Aligned footers
Keep footer actions aligned across a row of cards of differing content heights.
Scrollable content
Constrain the card height and let the content scroll while the header stays fixed.
With a table
Drop a table in alongside a nord-card-header; with no nord-card-body wrapper the table meets the card edges.
Scrollable table
Combine a table with a fixed header so the rows scroll within the card.
Responsive layout
Lay out multiple cards in a responsive grid that reflows as the viewport narrows.
RTL
Cards follow the document or container direction. Toggle the direction to see the layout mirror.
Accessibility
- Card is a presentational surface and applies no implicit ARIA role. Give the region semantics yourself when needed (for example a heading element in
nord-card-header, or a labelled landmark wrapping the card). - Use a real heading element (
<h2>,<h3>) innord-card-headerso the card's topic is exposed to assistive technology and reflected in the page outline. - Interactive content such as buttons in the header or footer remains in the normal tab order; ensure the focus order still reads logically from header to body to footer.
Templates
See this component composed into complete application views:
API reference
Card
Cards are shadowed surfaces that display content and actions on a single topic. They should be easy to scan for relevant and actionable information.
<nord-card></nord-card>Props
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
padding | padding | Controls the padding of the card component. When set to “none”, the header and footer slots will still have padding. | 'm' | 'l' | 'none' | 'm' |
footerDivider | footer-divider | When set, adds a divider border above the footer slot. | boolean | false |
Slots
| Slot name | Description |
|---|---|
Default slot | The card content. |
header | Optional slot that holds a header for the card. |
header-end | Optional slot that positions content at the end of the header. Useful for actions or additional info. |
footer | Optional slot that holds footer content for the card. |
CSS Properties
CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.
| Property | Description | Default |
|---|---|---|
--n-card-background-color | Controls the background color of the card. | var(--n-color-surface) |
--n-card-border-radius | Controls how rounded the corners are, using border radius tokens. | var(--n-border-radius) |
--n-card-box-shadow | Controls the surrounding shadow, using box shadow tokens. | var(--n-box-shadow-popout) |
--n-card-padding | Controls the padding on all sides of the card. | var(--n-space-m) |
--n-card-slot-padding | Controls the padding of items slotted within the card. This does not affect the block padding of items slotted into the header. | var(--n-space-m) |
--n-card-header-background | Controls the background color of the card header. | transparent |
--n-card-border-color | Controls the border color of the card header and footer divider. | var(--n-color-border) |
--n-card-header-padding-block | Controls the block (top and bottom) padding of the card header. | var(--n-space-m) |
--n-card-header-padding-inline | Controls the inline (left and right) padding of the card header. | var(--n-card-slot-padding) |
--n-card-header-slot-flex-grow | Controls the flex-grow value of the header slot. | 0 |
--n-card-header-end-margin-block-start | Block-start margin of content slotted into header-end. The negative default lets buttons and similar controls sit within the header without inflating its height. Override (e.g. 0) when slotting tall content that should occupy the full header height. | calc(var(--n-space-xs) * -1) |
--n-card-header-end-margin-block-end | Block-end margin of content slotted into header-end. The negative default lets buttons and similar controls sit within the header without inflating its height. Override (e.g. 0) when slotting tall content that should occupy the full header height. | calc(var(--n-space-xs) * -1) |
Parts
This component is made up of the following parts.
Card Body
The main content region of a composed Card. Applies the
card's body padding and grows to fill the available space between the
Card Header and Card Footer.
Place it as a direct child of nord-card.
<nord-card-body></nord-card-body>Slots
| Slot name | Description |
|---|---|
Default slot | The card body content. |
Card Footer
The footer region of a composed Card. Typically holds
actions or supplementary information.
Place it as a direct child of nord-card, after
Card Body. Set divider to draw a separating
border above the footer.
<nord-card-footer></nord-card-footer>Props
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
divider | divider | When set, draws a divider border above the footer. | boolean | false |
Slots
| Slot name | Description |
|---|---|
Default slot | The card footer content. |
Card Header
The header region of a composed Card. Lays a heading and
optional actions out in a row (heading at the start, actions at the end) and
draws the divider beneath the header.
Place it as a direct child of nord-card, before
Card Body. Direct child heading elements use the
same typography as the legacy Card header slot.
<nord-card-header></nord-card-header>Slots
| Slot name | Description |
|---|---|
Default slot | Header content: a heading plus optional actions or controls. |
Design guidelinesFor designers
Usage
This section includes guidelines for designers and developers about the usage of this component in different contexts.
Do
- Use to display content and actions on a single topic inside a container.
- Use to visually separate specific parts of content in an application view.
- Use to wrap a form into a container, for example a login form.
- Include a header when placing a Table component inside the card.
Don’t
- Don’t place cards within cards. Consider using the divider component to break up sections instead.
- Don’t use when you need to capture user’s attention in a prominent way.
- Don’t use to inform user about important changes or conditions in the interface.
- Don’t use multiple primary buttons inside a card. A card should only contain a single primary action.