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
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 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.

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

Integration 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?

YesNoSend feedback

We use this feedback to improve our documentation.