Skip to main content
LocalTapiola Turva

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.

The optional heading property gives the Card a level 2 heading. This can help with readability and provide structure to screen reader users.


Open in new window
<duet-card heading="Analytics">
  Card with a title
Open in new window
  Card without a title
Open in new window
<duet-card padding="large" heading="Finance" icon="category-finance">
  Card with large padding and icon
Open in new window
<duet-card heading="Finance" heading-level="h1" padding="large">
  Card with h1 level heading

Properties #

headingheadingThe content for the card heading. If empty, heading will be hidden.string""
headingLevelheading-levelThe actual heading level used for the heading in html markup. This setting exists for accessibility reasons. It doesn’t change the style visually. Can be one of: "h1", "h2", "h3", "h4", "h5", "h6".string"h2"
iconiconIcon to display on the left side of heading. Example: "form-location"stringundefined
marginmarginControls the margin of the component. Can be one of: "auto", "none".string"auto"
paddingpaddingThe padding for the card. Can be one of: "large", "medium", "small", "none".string"small"
themethemeTheme of the card. Can be one of: "default", "turva".string""
urlurlA destination to link to, rendered in the href attribute of a link.stringundefined


For integration, events and theming guidelines, please see Using Components. That page explains how to implement and use Duet’s components across different technologies like Angular, React or Vanilla JavaScript.