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.

Examples

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

Properties #

PropertyAttributeDescriptionTypeDefault
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

Integration

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.