Active theme set to Nord LightNord Dark and saved in preferences.
Copied to clipboard.
Error submitting your feedback! Please try again.

Card Ready

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
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 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.
footerOptional slot that holds footer content for the card.

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.

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.