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.
<duet-card heading="Analytics"> Card with a title </duet-card>
<duet-card> Card without a title </duet-card>
<duet-card heading="Finance" heading-level="h1" padding="large"> Card with h1 level heading </duet-card>
|The content for the card heading. If empty, heading will be hidden.|
|The 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".|
|Icon to display on the left side of heading. Example: "form-location"|
|Controls the margin of the component. Can be one of: "auto", "none".|
|The padding for the card. Can be one of: "large", "medium", "small", "none".|
|Theme of the card. Can be one of: "default", "turva".|
|A destination to link to, rendered in the href attribute of a link.|