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>
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 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 min-width="33%" margin="none">
<duet-grid distribution="right" 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" margin="none">
<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-apartment" background="color-category-home" 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="h2" visual-level="h3">Kotivakuutus</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>

Properties #

Property Attribute Description Type Default
accessibleLabel accessible-label Accessible label that is shown for screen reader users in the collapse toggle. Not visible for normal users. string "Suurenna tai pienennä sisältö"
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. Can be one of: "h1", "h2", "h3", "h4", "h5", "h6". string "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. Can be one of: "auto", "none". string "auto"
padding padding The padding for the card. Can be one of: "x-large" (72px), "large" (48px), "medium" (36px), "small" (28px), "x-small" (20px), "none" (0px). 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. string "small"
theme theme Theme of the card. Can be one of: "default", "turva". string ""
url url A destination to link to, rendered in the href attribute of a link. string undefined
variation variation Style variation of the card. Can be one of: "default", "info", "plain". string "default"

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

Building Layouts

Tutorials

Using CLI Tools

Tutorials

Server Side Rendering


Troubleshooting

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