Get help Color blind mode Low vision mode

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://cdn.duetds.com/api/assets/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="action-arrow-right-small" icon-size="small" icon-right>
        Read more
      </duet-button>
    </duet-card>
  </duet-grid-item>
  <duet-grid-item fill>
    <duet-card margin="none" image="https://cdn.duetds.com/api/assets/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="action-arrow-right-small" icon-size="small" icon-right>
        Read more
      </duet-button>
    </duet-card>
  </duet-grid-item>
  <duet-grid-item fill>
    <duet-card margin="none" image="https://cdn.duetds.com/api/assets/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="action-arrow-right-small" icon-size="small" icon-right>
        Read more
      </duet-button>
    </duet-card>
  </duet-grid-item>
</duet-grid>
Open in new window 
<div style="
  display: grid;
  grid-template-columns: repeat(auto-fill, 320px);
  gap: 40px;
">
  <duet-card
    variation="plain"
    image="https://www.duetds.com/assets/img/example-banner1.jpg"
    background="primary-lighter"
  >
    <div style="height: 100%; display: flex; flex-direction: column;">
      <p style="font-size: 12px; margin: 0 0 0.5rem;">
        <span style="display: inline-flex; align-items: center; justify-content: center;">
          Etunimi Sukunimi
          <span
          style="display: inline-block; width: 3px; height: 3px; border-radius: 100%; background: #0077B3; margin: 0 0.25rem;"
          ></span>
          Teema
          <span
          style="display: inline-block; width: 3px; height: 3px; border-radius: 100%; background: #0077B3; margin: 0 0.25rem;"
          ></span>
          21.3.2023
        </span>
      </p>
      <duet-heading level="h3">
        Ovatko seuraavan kriisin ainekset jo käsissä
      </duet-heading>
      <duet-paragraph>
        Card content lorem ipsum dolor sit amet consectetuer adipiscing elit no nummy laoreet lorem ipsum.
      </duet-paragraph>
      <div style="flex-grow: 1; display: flex; align-items: end;">
        <duet-button
          margin="none"
          variation="primary"
          icon="navigation-arrow-right"
          icon-right
        >
          Read more
        </duet-button>
      </div>
    </div>
  </duet-card>
  <duet-card
  variation="plain"
    image="https://www.duetds.com/assets/img/example-banner1.jpg"
    background="primary-lighter"
  >
  <div style="height: 100%; display: flex; flex-direction: column;">
    <p style="font-size: 12px; margin: 0 0 0.5rem;">
      <span style="display: inline-flex; align-items: center; justify-content: center;">
        Etunimi Sukunimi
          <span
          style="display: inline-block; width: 3px; height: 3px; border-radius: 100%; background: #0077B3; margin: 0 0.25rem;"
          ></span>
          Teema
          <span
          style="display: inline-block; width: 3px; height: 3px; border-radius: 100%; background: #0077B3; margin: 0 0.25rem;"
          ></span>
          21.3.2023
        </span>
      </p>
      <duet-heading level="h3">
        Itse viritetyt savustimet aiheuttivat jälleen paloja
      </duet-heading>
      <duet-paragraph>
        Card content lorem ipsum dolor sit amet consectetuer adipiscing elit no nummy laoreet lorem ipsum.
      </duet-paragraph>
      <div style="flex-grow: 1; display: flex; align-items: end;">
        <duet-button
          margin="none"
          variation="primary"
          icon="navigation-arrow-right"
          icon-right
        >
          Read more
        </duet-button>
      </div>
    </div>
  </duet-card>
  <duet-card
    variation="plain"
    image="https://www.duetds.com/assets/img/example-banner1.jpg"
    background="primary-lighter"
  >
  <div style="height: 100%; display: flex; flex-direction: column;">
    <p style="font-size: 12px; margin: 0 0 0.5rem;">
      <span style="display: inline-flex; align-items: center; justify-content: center;">
        Etunimi Sukunimi
        <span
        style="display: inline-block; width: 3px; height: 3px; border-radius: 100%; background: #0077B3; margin: 0 0.25rem;"
        ></span>
        Teema
          <span
          style="display: inline-block; width: 3px; height: 3px; border-radius: 100%; background: #0077B3; margin: 0 0.25rem;"
          ></span>
          21.3.2023
        </span>
      </p>
      <duet-heading level="h3">
        Card heading lorem ipsum dolor sit amet - Consectetuer adipiscing elit no nummy laoreet
      </duet-heading>
      <duet-paragraph>
        Card content lorem ipsum dolor sit amet consectetuer adipiscing elit no nummy laoreet lorem ipsum.
      </duet-paragraph>
      <div style="flex-grow: 1; display: flex; align-items: end;">
        <duet-button
          margin="none"
          variation="primary"
          icon="navigation-arrow-right"
          icon-right
        >
          Read more
        </duet-button>
      </div>
    </div>
  </duet-card>
</div>
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>

<duet-card heading="Extraordinarily nice and dandy" secondary-heading="Super offer for you ends on 20.4.2020" collapsible>
  Collapsible 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>


<duet-card heading="Color token as heading background" background="primary-lighter" heading-background="primary-lightest"> Card using color token as background </duet-card>
<duet-card heading="Color token as heading background" background="gray-lighter" heading-background="primary-lightest"> Card using color token as background </duet-card>
<duet-card heading="Color token as heading background" variation="plain" background="primary-lighter" heading-background="primary-lightest"> Card using color token as background </duet-card>
<duet-card heading="Color token as heading background" variation="plain" background="gray-lighter" heading-background="primary-lightest"> Card using color token as background </duet-card>


<duet-card
  image="https://cdn.duetds.com/api/assets/illustrations/placeholder-dark.svg"
  heading="Heading using color token as background"
  heading-background="gray-light"
  style="width:300px"
>
  <duet-paragraph margin="none">
    Card content lorem ipsum dolor sit amet consectetuer adipiscing elit no nummy laoreet lorem ipsum.
  </duet-paragraph>
</duet-card>
Open in new window 
<duet-card>
  Regular card content goes here.
  <div slot="footer">
    <span class="duet-font-weight-semi-bold">Footer:</span> Put here content or components you want to show up in the
    card footer.
  </div>
</duet-card>
<duet-card>
  Regular card content goes here.
  <div slot="footer">
    <span class="duet-font-weight-semi-bold">Footer:</span> Put here content or components you want to show up in the
    card footer.
  </div>
</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"> Card with h1 level heading </duet-card>
<duet-card heading="Finance" heading-level="h3"> Card with h3 level heading </duet-card>

<duet-card heading="Finance" heading-level="div"> Card with no heading level </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="none"> Card without padding </duet-card>

<duet-card heading="Finance" padding="none"> Another card without padding </duet-card>

<duet-card
  padding="none"
  image="https://cdn.duetds.com/api/assets/illustrations/placeholder-dark.svg"
  heading="Yet another card without padding"
  style="width: 300px"
>
  <duet-paragraph margin="none">
    Card content lorem ipsum dolor sit amet consectetuer adipiscing elit no nummy laoreet lorem ipsum.
  </duet-paragraph>
</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-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" hyphenate="true">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 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-heading level="h6" margin="none"> Secondary heading <duet-badge>Tarjous</duet-badge></duet-heading>
        <duet-spacer size="x-small"></duet-spacer>
        <duet-heading level="h2" visual-level="h3" hyphenate="true">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 ""
headingBackground heading-background Custom color to be used for the card's heading background, as a design token entered in camelCase or kebab-case. Example: "primary". string undefined
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. This setting is only used if the heading property is set. If you provide your own heading(s) in the slot, you should set this to neutral "div" in order to avoid nested headings. "div" | "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://cdn.duetds.com/api/assets/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" | "xx-small" "small"
secondaryHeading secondary-heading Additional content for the card heading. If empty, both heading and collapse functionality will be hidden. string ""
shadowBreakpoint shadow-breakpoint Breakpoint used to remove shadow around card. These match to similar media query tokens: $media-query-small and $media-query-medium. "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "xxx-small" undefined
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: KeyboardEvent | MouseEvent; }>

Methods #

setFocus(options?: FocusOptions) => Promise<void> #

Sets focus on underlying a element.
Available only when url attribute is used.
Use this method instead of the native focus().

Parameters #

Name Type Description
options FocusOptions

Returns #

Type: Promise<void>

Slots #

Slot Description
"below-heading" Below heading content.
"footer" Footer content.
"heading" This is a slot for heading content inside the card component.
"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.

Integration guidelines

Tutorials

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

Tutorials

Building Layouts

 Tutorials

Using CLI Tools

 Tutorials

Creating Custom Patterns

 Tutorials

Server Side Rendering

 Tutorials

Sharing Prototypes

 Tutorials

Usage With Markdown

Troubleshooting

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