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.
Properties
| 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' |
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-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 |
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.
Integration
For integration guidelines, please see Web Components documentation .