Usage
Card is a shadowed surface for grouping content and actions about a single topic. The default slot holds the body, and optional header, header-end and footer slots add framing around it.
import "@nordhealth/components/lib/Card"
Examples
Basic
A card with only body content uses the default slot.
Padding
The padding attribute accepts m (default), l or none. When set to none, the header and footer slots keep their own padding.
Custom header
Slot a heading into header and actions or status into header-end.
Footer divider
Set footer-divider to draw a border between the body and footer.
Padding sizes
Compare the available padding values side by side.
Sections
Divide a card's body into labelled sections with internal dividers.
Header actions
Place buttons or other controls in the header-end slot for actions tied to the card.
With a form
Use a card as the surface for a form, with the submit actions in the footer.
Aligned footers
Keep footer actions aligned across a row of cards of differing content heights.
Scrollable content
Constrain the card height and let the body scroll while the header and footer stay fixed.
With a table
Drop a table into a card body, removing padding so the table meets the card edges.
Scrollable table
Combine a table with a fixed header and footer 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 the
headerslot, or a labelled landmark wrapping the card). - Use a real heading element (
<h2>,<h3>) in theheaderslot so the card's topic is exposed to assistive technology and reflected in the page outline. - Interactive content such as buttons in
header-endorfooterremains in the normal tab order; ensure the focus order still reads logically from header to body to footer.
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) |
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.