Active theme set to Nord LightNord DarkVet LightVet DarkHealth LightHealth Dark and saved in preferences.
Copied to clipboard.

Card draft

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