Components

Card

Overview

Overview

When to use

• Use content cards to group related information in flexible containers and offer a short entry point that is linked to more detailed content. Content cards work well for news items, blog posts, upcoming events, etc.
• Use link cards to create lists of related links with an optional short description for each link.

When not to use

• Don’t use cards when the content doesn't link to a destination or it doesn't contain any actionable elements.
• Don’t use cards to inform user about important changes or conditions in the interface. Use Notification component instead.
• Don’t use content cards for the sole purpose of styling a single block of content or to contain unrelated information within a single card.
• Don’t use link cards to display news items, blog posts, upcoming events, etc.

Content cards

Content card is a flexible container for placing a concise amount of related information and actions together in one object. The default design for a content card includes a heading and a short summary text. By adding and removing optional content, such as an image, badges, actions etc, the card offers a wide range of design possibilities.

Variants

Transparent card has a transparent background and no internal padding.

Outlined card has a border, white background and internal padding.

Usage examples

Link cards

Link cards are used to create lists of related navigation links with an optional short description for each link. The use of a title above the list is recommended.

Keep the link titles and descriptions short and clear, preferably 1-3 words for link titles and 1 short sentence for descriptions.

Description text may be omitted if the link titles are clear enough or a compact layout is required.

Usage examples

Usage

Usage guidelines

Titles and descriptions

Keep the link titles and descriptions short and clear.

Do

Don't

Do

Don't

Link card content

Don’t use images and other components in link cards

Do

Don't

Accessibility

Keyboard

Cards are not focusable themselves; their link is. Tab moves to the link in each card and Enter follows it.

• Link card: the title is the link.
• Transparent content card: the whole card is one link.
• Outlined content card: only the "Action" link is focusable.

Screen readers

Titles of content cards are real headings (h3 by default, set with headingLevel), so users can jump between cards by heading. The arrow icon of the link card is aria-hidden="true". In the transparent card the link contains the image, heading and description, so its accessible name is all three read together, starting with the image alt. The transparent card is wrapped in an article.

Using the example

• Set headingLevel to fit the page outline: one level below the heading of the section the cards are in.
• In the transparent card, give the image alt="" when it only decorates the card. The example's "Tallinn Old Town" otherwise becomes the first words of every link name.
• Replace the generic "Action" link text with text that says where the link goes ("Loe lähemalt parkimisest"), or add visually hidden context. A page of identical "Action" links is unusable from a links list (WCAG 2.4.4).
• Do not put another link or button inside a card that is already one big link. Nested interactive elements are invalid and unreachable.
• The "New" badge is read before the heading. If that order sounds wrong, move the badge after the title in your copy.