Helsinki Design System
Helsinki Design System
Getting started
Tutorials
Guidelines
Visual assets
Design tokens
Components
OverviewAccordionButtonCardPrinciplesAccessibilityUsage & variationsDemos & APICheckboxDate inputDialogDropdownFieldsetFooterIconKorosLoading spinnerLogoNavigationNotificationNumber inputPassword inputPhone inputRadio buttonSearch inputSelection groupStatus labelTabsTagText fieldsTime inputToggle buttonTooltip
Patterns
About
Contributing
Resources

Card

StableAccessible

Cards can be used to divide and organise interface content for better understandability and readability. When used correctly, Cards can help your users to scan through vast amounts of information quicker.

Principles

  • Use Cards sparingly. While they can drastically improve service's understandability and readibility, overusing them may result in confusing and complex user interfaces.
  • Cards work very well for listing heterogenous content such as news items, blog posts, or upcoming events.
  • Cards can also be used to emphasize important content such as site CTA (Call To Action).
  • Default Cards must not be used as interactive elements themselves. This means that the whole Card should not be clickable. Elements inside the Card can still be interactable.
  • Currently HDS offers base Cards which you can use to build custom Cards for your project's needs. For inspiration and guidelines, you can find custom card examples in HDS Example Custom Components - Abstract collection.

Accessibility

  • Card must have either a visual heading or aria-label as a title. This describes the Card's content for assistive technologies.
  • The colour contrast between the Card and its background must comply with WCAG AA Level contrast ratios. If needed, you may use a Card border to increase the Card contrast to its background.

Usage & variations

Empty

Currently, HDS offers empty base Cards. These and other HDS components can be used to create custom Cards for your project. By default, HDS recommends Cards without border style.

Core code example:

<div class="hds-card"></div>
<div class="hds-card hds-card--border"></div>

React code example:

<Card />
<Card border />

With heading and body text

Additionally, HDS offers styling for basic heading and body text inside the Card component. These can be used instead of custom elements.

Card
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Card
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Core code example:

<div class="hds-card">
<div class="hds-card__body">
<div class="hds-card__heading" role="heading" aria-level="2">Card</div>
<div class="hds-card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
<div class="hds-card hds-card--border">
<div class="hds-card__body">
<div class="hds-card__heading" role="heading" aria-level="2">Card</div>
<div class="hds-card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>

React code example:

<Card
heading="Card"
text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
/>
<Card
border
heading="Card"
text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
/>

Using with other HDS components

Custom Cards can be easily built by using other HDS components and typography inside the Card.

Card
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Card
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Core code example:

<div class="hds-card">
<div class="hds-card__body">
<div class="hds-card__heading" role="heading" aria-level="2">Card</div>
<div class="hds-card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<button type="button" class="hds-button hds-button--secondary hds-button--theme-black">
<span class="hds-button__label">Button</span>
</button>
</div>
<div class="hds-card hds-card--border">
<div class="hds-card__body">
<div class="hds-card__heading" role="heading" aria-level="2">Card</div>
<div class="hds-card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<button type="button" class="hds-button hds-button--secondary hds-button--theme-black">
<span class="hds-button__label">Button</span>
</button>
</div>

React code example:

<Card
heading="Card"
text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
>
<Button variant="secondary" theme="black">Button</Button>
</Card>
<Card
border
heading="Card"
text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
>
<Button variant="secondary" theme="black">Button</Button>
</Card>

Demos & API

Core

Cards in hds-core

React

Cards in hds-react

Cards API