Active theme set to LightDarkLight high contrastDark high contrast and saved in preferences.
Copied to clipboard.
Error submitting your feedback! Please try again.


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
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
View RTL
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?



Controls the padding of the card component. When set to “none”, the header and footer slots will still have padding.

"m" | "l" | "none""m"


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.

CSS Properties

CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.


Controls how rounded the corners are, using border radius tokens.


Controls the surrounding shadow, using box shadow tokens.


Controls the padding on all sides of the card.


Controls the padding of items slotted within the card. This does not affect the block padding of items slotted into the header.


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.


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


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?

Send feedback

We use this feedback to improve our documentation.