Active theme set to LightDarkLight high contrastDark high contrast and saved in preferences.
Copied to clipboard.
Error submitting your feedback! Please try again.
We’re hiring frontend developers! View open positions.

CardReady

Cards are shadowed surfaces that display content and actions on a single topic. They should be easy to scan for relevant and actionable information.

Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
View RTL
<nord-card>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla provident aliquid corporis tempora eius quam, quae vel
molestias esse maxime aperiam totam suscipit. Nobis consectetur optio reprehenderit animi? Suscipit, quibusdam?
</nord-card>

Properties

PropertyAttributeDescriptionTypeDefault
paddingpadding

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 nameDescription
Default slotThe card content.
headerOptional slot that holds a header for the card.
header-endOptional slot that positions content at the end of the header. Useful for actions or additional info.
footerOptional 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.

PropertyDescriptionDefault
--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)

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 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. This documentation explains how to implement and use Nord Web Components across different technologies such as Vue.js, React, or Vanilla JavaScript.

Integration Guidelines

Localization

Nord provides a lightweight solution for localizing its components. Not all components need localizing, as for the most part snippets of text are set per instance. For full localization guidelines, please see Localization documentation.

Localization Guidelines

Troubleshooting

If you experience any issues while using Nord Web Components, please head over to the Support page for more guidelines and ways to contact us.


Was this page helpful?

YesNo
Send feedback

We use this feedback to improve our documentation.