Skip to main content

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 top level heading. This can help with readability and provide structure to screen reader users. This component also allows you to customize it’s padding and includes an expand and collapse functionality.

Examples

Open in new window
<duet-card heading="Analytics">
Card with a heading
</duet-card>
<duet-card heading="Info">
Another card with a heading
</duet-card>
Open in new window
<duet-card>
Card without a heading
</duet-card>
<duet-card>
Another card without a heading
</duet-card>
Open in new window
<duet-grid style="max-width:1200px" breakpoint="medium" direction="horizontal" responsive>
<duet-grid-item fill>
<duet-card margin="none" image="https://www.duetds.com/assets/img/illustrations/placeholder-dark.svg">
<duet-heading level="h3">Card heading</duet-heading>
<duet-paragraph margin="none">
Card content lorem ipsum dolor sit amet consectetuer adipiscing elit no nummy laoreet lorem ipsum.
</duet-paragraph>
<duet-spacer></duet-spacer>
<duet-button fixed url="#" padding="none" variation="plain" icon="navigation-arrow-right" icon-right>
Read more
</duet-button>
</duet-card>
</duet-grid-item>
<duet-grid-item fill>
<duet-card margin="none" image="https://www.duetds.com/assets/img/illustrations/placeholder-dark.svg">
<duet-heading level="h3">Card heading</duet-heading>
<duet-paragraph margin="none">
Card content lorem ipsum dolor sit amet consectetuer adipiscing elit no nummy laoreet lorem ipsum.
</duet-paragraph>
<duet-spacer></duet-spacer>
<duet-button fixed url="#" padding="none" variation="plain" icon="navigation-arrow-right" icon-right>
Read more
</duet-button>
</duet-card>
</duet-grid-item>
<duet-grid-item fill>
<duet-card margin="none" image="https://www.duetds.com/assets/img/illustrations/placeholder-dark.svg">
<duet-heading level="h3">Card heading</duet-heading>
<duet-paragraph margin="none">
Card content lorem ipsum dolor sit amet consectetuer adipiscing elit no nummy laoreet lorem ipsum.
</duet-paragraph>
<duet-spacer></duet-spacer>
<duet-button fixed url="#" padding="none" variation="plain" icon="navigation-arrow-right" icon-right>
Read more
</duet-button>
</duet-card>
</duet-grid-item>
</duet-grid>
Open in new window
<duet-card heading="Analytics" collapsible>
Collapsible card
</duet-card>
<duet-card heading="About" collapsible>
Collapsible card
</duet-card>
<duet-card heading="Info" collapsible open="false">
Initially collapsed card
</duet-card>

<script>
// Select a card component
var card = document.querySelector("duet-card")

// Listen for toggle events
card.addEventListener("duetToggle", function(e) {
console.log("open", e.target.open)
})
</script>
Open in new window
<duet-card heading="Analytics" secondary-heading="20.4.2020" collapsible>
Collapsible card
</duet-card>
<duet-card heading="About" secondary-heading="3.2.2023">
Normal card
</duet-card>
Open in new window
<duet-card variation="info">
Card using info variation
</duet-card>
<duet-card variation="info">
<duet-input label="Duet input inside info card" placeholder="Type something…" margin="none" expand></duet-input>
</duet-card>
Open in new window
<duet-card background="primary-lighter">
Card using color token as background
</duet-card>
<duet-card background="gray-lighter">
Card using color token as background
</duet-card>
<duet-card variation="plain" background="primary-lighter">
Card using color token as background
</duet-card>
<duet-card variation="plain" background="gray-lighter">
Card using color token as background
</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>
Open in new window
<duet-card padding="x-small">
Card with x-small padding
</duet-card>
<duet-card padding="x-small">
Another card with x-small padding
</duet-card>
Open in new window
<duet-card padding="large">
<duet-grid responsive distribution="space-between" alignment="top" mobile="center">
<duet-spacer breakpoint="x-small" direction="vertical" size="large"></duet-spacer>
<duet-icon name="action-buy-insurance" theme="default" size="xx-large"></duet-icon>
<duet-spacer breakpoint="small" size="large" direction="horizontal"></duet-spacer>
<duet-grid responsive breakpoint="medium" mobile="center">
<duet-grid-item margin="none" fill>
<duet-heading level="h2" visual-level="h3">Vakuutuksesi tiedot</duet-heading>
<duet-paragraph>
Näet uuden vakuutuksen tiedot täällä verkkopalvelussamme heti ja lasku on
verkossa huomenna. Ensimmäisen laskun eräpäivään on aikaa noin kuukausi.
Saat myös kaikki asiakirjat kotiisi postitse.
</duet-paragraph>
</duet-grid-item>
</duet-grid>
</duet-grid>
</duet-card>
Open in new window
<duet-card padding="large">
<duet-grid responsive distribution="space-between" alignment="top" mobile="center">
<duet-spacer breakpoint="x-small" direction="vertical" size="large"></duet-spacer>
<duet-icon name="category-pet" theme="default" size="xx-large"></duet-icon>
<duet-spacer breakpoint="small" size="large" direction="horizontal"></duet-spacer>
<duet-grid responsive breakpoint="medium" mobile="center">
<duet-grid-item margin="none" fill>
<duet-heading level="h2" visual-level="h3">Lemmikkihelppi</duet-heading>
<duet-paragraph>
Eläinlääkäriin yhden tassun kosketuksella 24/7. Tutustu palveluun ja
lataa LemmikkiHelppi puhelimeesi App Storesta tai Google&nbsp;Playsta.
</duet-paragraph>
</duet-grid-item>
<duet-grid-item margin="none">
<duet-grid mobile="center">
<duet-spacer breakpoint="medium" direction="horizontal" size="xxxx-large"></duet-spacer>
<duet-button fixed wrapping="none" margin="none" variation="primary">
Tutustu palveluun
</duet-button>
</duet-grid>
<duet-spacer breakpoint="x-small" direction="vertical" size="large"></duet-spacer>
</duet-grid-item>
</duet-grid>
</duet-grid>
</duet-card>
Open in new window
<duet-card padding="large">
<duet-grid responsive distribution="space-between" alignment="top" mobile="center">
<duet-spacer breakpoint="x-small" direction="vertical" size="large"></duet-spacer>
<duet-icon name="category-pet" theme="default" size="xx-large"></duet-icon>
<duet-spacer breakpoint="small" size="large" direction="horizontal"></duet-spacer>
<duet-grid responsive breakpoint="medium" mobile="center">
<duet-grid-item margin="none" fill>
<duet-heading level="h2" visual-level="h3">Lemmikkihelppi</duet-heading>
<duet-paragraph>
Eläinlääkäriin yhden tassun kosketuksella 24/7. Tutustu palveluun ja
lataa LemmikkiHelppi puhelimeesi App Storesta tai Google&nbsp;Playsta.
</duet-paragraph>
</duet-grid-item>
<duet-grid-item min-width="38%" margin="none"></duet-grid-item>
</duet-grid>
</duet-card>
Open in new window
<duet-card padding="medium">
<duet-grid responsive distribution="space-between" alignment="top">
<duet-spacer breakpoint="x-small" direction="vertical" size="medium"></duet-spacer>
<duet-grid distribution="left">
<duet-icon name="category-car" background="color-category-vehicle" size="x-large"></duet-icon>
<duet-spacer breakpoint="x-small" size="medium" direction="horizontal"></duet-spacer>
<duet-spacer breakpoint="small" size="large" direction="horizontal"></duet-spacer>
<duet-grid direction="vertical">
<duet-badge>Tarjous</duet-badge>
<duet-spacer size="x-small"></duet-spacer>
<duet-heading level="h2" visual-level="h3">Autovakuutus</duet-heading>
<duet-label size="small" margin="none">Viimeinen voimassaolopäivä</duet-label>
<duet-spacer direction="vertical" size="xx-small"></duet-spacer>
<duet-heading level="h4" margin="none">21.3.2019</duet-heading>
</duet-grid>
</duet-grid>
<duet-grid-item min-width="33.333%" max-width="333px" margin="none">
<duet-spacer breakpoint="x-small" direction="vertical" size="large"></duet-spacer>
<duet-button expand wrapping="none" margin="none" variation="primary">
Tutustu tarjoukseen
</duet-button>
<duet-spacer breakpoint="x-small" direction="vertical" size="medium"></duet-spacer>
</duet-grid-item>
</duet-grid>
<div slot="footer">
<span style="font-weight:600;">Vakuutuksen tarjoaja:</span> LähiTapiola&nbsp;Kainuu-Koillismaa
</div>
</duet-card>
Open in new window
<duet-card accessible-label="Pariturva-henkivakuutus, Laura-Karoliina Mäkinen" url="#" padding="large">
<duet-grid responsive distribution="space-between" alignment="top">
<duet-grid alignment="center" responsive breakpoint="medium">
<duet-grid-item fill>
<duet-heading level="h2" visual-level="h3">Pariturva-henkivakuutus</duet-heading>
<duet-spacer size="xx-small"></duet-spacer>
<duet-list padding="none" margin="none">
<duet-list-item>
<span slot="label">Hakemuksen luoja</span>
<span slot="value">Laura-Karoliina Mäkinen</span>
</duet-list-item>
<duet-list-item>
<span slot="label">Vakuutusmäärä</span>
<span slot="value">55&nbsp;000,00&nbsp;</span>
</duet-list-item>
<duet-list-item>
<span slot="label">Hinta</span>
<span slot="value">480,77&nbsp;€ / vuosi</span>
</duet-list-item>
<duet-list-item>
<span slot="label">Hakemus luotu</span>
<span slot="value">20.2.2020</span>
</duet-list-item>
</duet-list>
</duet-grid-item>
<duet-grid-item margin="none">
<duet-grid mobile="center">
<duet-spacer breakpoint="medium" direction="horizontal" size="xxxx-large">
</duet-spacer>
<duet-button tabindex="-1" wrapping="none" margin="none" variation="primary">
Valitse
</duet-button>
</duet-grid>
<duet-spacer breakpoint="x-small" direction="vertical" size="large"></duet-spacer>
</duet-grid-item>
</duet-grid>
</duet-grid>
</duet-card>

Properties #

Property Attribute Description Type Default
accessibleLabel accessible-label Adds accessible label for the card that is only shown for screen readers. Typically, this label text is used when the whole card is made clickable to create a label text for users who use assistive technology. string undefined
background background Custom color to be used for the card background, as a design token entered in camelCase or kebab-case. Example: "primary". string "gray-lightest"
collapsible collapsible Makes the card expand and collapse when the collapse/expand arrow in the heading is clicked or tapped. This option only works together with the heading option, meaning that you also need to set the heading for this functionality to show up. boolean false
heading heading The content for the card heading. If empty, both heading and collapse functionality will be hidden. string ""
headingLevel heading-level The actual heading level used for the heading in html markup. This setting exists for accessibility reasons. It doesn’t change the style visually. "h1" | "h2" | "h3" | "h4" | "h5" | "h6" "h2"
icon icon Icon to display on the left side of heading. Example: "form-location" string undefined
image image Image to display in the card. The image aspect ratio can be anything as images are resized to fit 100% width of the card. Example: "https://www.duetds.com/assets/img/illustrations/placeholder-image.jpg" string undefined
margin margin Controls the margin of the component. "auto" | "none" "auto"
open open If the card is collapsible, this property controls whether the card is open or closed. boolean true
padding padding The padding for the card. Please note that the card padding values don’t directly translate to similar space token names, but instead the card uses it’s own derived defaults. "large" | "medium" | "none" | "small" | "x-large" | "x-small" "small"
secondaryHeading secondary-heading Additional content for the card heading. If empty, both heading and collapse functionality will be hidden. string ""
theme theme Theme of the card. "" | "default" | "turva" ""
url url A destination to link to, rendered in the href attribute of a link. string undefined
variation variation Style variation of the card. "default" | "info" | "plain" "default"

Events #

Event Description Type
duetToggle Event emitted when opened/closed CustomEvent<{ component: "duet-card"; originalEvent: MouseEvent | KeyboardEvent; }>

Methods #

setFocus() => Promise<void> #

Sets focus on the specified duet-card. Use this method instead of the global
card.focus().

Returns #

Type: Promise<void>

Slots #

Slot Description
"footer" Footer content.
"unnamed default slot" The component’s primary content. All child nodes that do not have a slot attribute defined are inserted into this primary slot.

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.

When to use #

  • When you want to wrap your application’s main column into a container.
  • To display content and actions on a single topic inside a container.
  • To visually separate specific parts of content in a view using a padded background color.
  • When you want to display promotional items or banners in a view.
  • When you want to show insurance offers to a user.

When not to use #

  • When you need to capture user’s attention in a prominent way. Use Alert component instead.
  • To informs user about important changes or conditions in the interface. Use Alert component instead.
  • When you need to have multiple primary action buttons. A card should only ever contain a single primary action.

Variations #

This section describes the different component variations, their purpose, and when to use each variation.

Name Purpose
default Default style is the most common card variation. Only switch to another variation if you need to adjust the visual weight of the element.
info Info variation highlights specific parts of content using a padded gray background. This variation is most often used inside default cards to provide additional content information that needs to be highlighted from the rest.
plain Plain variations makes it possible to use card as a content container without any styles (except for padding) being added. When needed, this variation can be combined with the background color.

Accessibility #

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines. You can find additional information regarding accessibility of this component below.

Additional considerations #


Integration

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



Tutorials

Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:

Tutorials

Abstract

Tutorials

Building Layouts

Tutorials

Using CLI Tools

Tutorials

Creating Custom Patterns

Tutorials

Server Side Rendering

Tutorials

Sharing Prototypes

Tutorials

Usage With Markdown

Tutorials

VS Code

Tutorials

Zeplin


Troubleshooting

If you experience any issues while using a component, please head over to the Support page for more guidelines and help.