Card

A card structures and groups content and other components. Typically, a view consists of multiple cards.

´ Loading interactive demo...
<div class="demo-card"> <dt-card> <dt-card-title>Top 3 JavaScript errors</dt-card-title> <dt-card-subtitle>Some subtitle</dt-card-subtitle> <dt-card-actions><button dt-button variant="secondary">Some Action</button></dt-card-actions> The card is not an interactive element, therefore, there are no hover, active and disabled card. </dt-card></div> export class DefaultCardExampleComponent { }
Top 3 JavaScript errors Some subtitle The card is not an interactive element, therefore, there are no hover, active and disabled card.
export class DefaultCardExampleComponent { }

Card content structure

A card consists of multiple sections. To ensure a consistent look follow these simple patterns about how the content of a card should be structured.

The header of a card consists of the following elements:

  • a title (required),
  • a subtitle,
  • an icon and
  • actions.

Actions are secondary buttons placed in the card's top right corner. Multiple actions can be shown to the user. If space is limited, move less important actions to a context actions menu. The decision which button is shown and which ones are grouped in a context actions menu depends on the use case.

Description

The optional description section contains information about the content of the card (only if an explanation is necessary). If the text is longer than one sentence, use the context help to make the full text expandable.

Content

This is the main section of the card and can contain all kinds of components that present data to the user. How content within a card rearranges on different screen sizes depends strongly on the content and the use case and should always be discussed with a UX designer.

Actions

Actions can be put above and/or below the content section. Buttons that navigate to another page or drill down to more details should be placed after the content section, whereas buttons that modify content within a card should be placed above the content to be updated. When placing buttons in a card, follow the button alignment pattern.

Pagination

The optional pagination section contains a pagination or a show more component to extend the card content. This section must always be the last one within a card.

Card states

The card is not an interactive element, therefore, there are no hover, active or disabled states for cards.

Variants

Cards on dark background

´ Loading interactive demo...
<div class="demo-card dark" dtTheme=":dark"> <dt-card> <dt-card-icon> <dt-icon name="application"></dt-icon> </dt-card-icon> <dt-card-title>Top 3 JavaScript errors</dt-card-title> <dt-card-subtitle>Some subtitle</dt-card-subtitle> <dt-card-title-actions><button dt-button variant="secondary">Some Action</button></dt-card-title-actions> The card is not an interactive element, therefore, there are no hover, active and disabled card. </dt-card></div> export class DarkThemeCardExampleComponent { }
Top 3 JavaScript errors Some subtitle The card is not an interactive element, therefore, there are no hover, active and disabled card.
export class DarkThemeCardExampleComponent { }

Behavior

See the layout pattern for rules how to rearrange cards on a view depending on the container size.

Cards in use

Also margins and paddings will change depending on the container size. Therefore we defined the following breakpoints.

container min-width margin padding
default 8px 8px
460px 8px 12px
992px 16px 16px
1200px 20px 16px
´ Loading interactive demo...
<div class="demo-card"> <dt-card> <dt-card-title>Top 3 JavaScript errors</dt-card-title> <dt-card-subtitle>Some subtitle</dt-card-subtitle> <dt-card-actions><button dt-button variant="secondary">Some Action</button></dt-card-actions> The card is not an interactive element, therefore, there are no hover, active and disabled card. </dt-card></div> export class DefaultCardExampleComponent { }
Top 3 JavaScript errors Some subtitle The card is not an interactive element, therefore, there are no hover, active and disabled card.
export class DefaultCardExampleComponent { }

<dt-card> is a visual container for wrapping a wide variety of contents. In addition to the custom content, the card can also hold some special sections:

  • <dt-card-title> - The title of this card, needs to be defined to show the card's header
  • <dt-card-subtitle> - Right below the title, a subtitle can be placed.
  • <dt-card-icon> - An icon in the top left corner of the card. **not ready yet:**Use <dt-icon> for it as soon as it is ready
  • <dt-card-title-actions> - Your place to add action buttons. Will be displayed in the top right corner. Use the buttons secondary variant.
  • <dt-card-footer-actions> - Action buttons, displayed below the text. For the regular cases there should only be one primary cta styled dt-button.

Examples

Title

´ Loading interactive demo...
<div class="demo-card"> <dt-card> <dt-card-title>Top 3 JavaScript errors</dt-card-title> This is some generic content <dt-card-footer-actions> <button dt-button variant="secondary">Analyse response time</button> <button dt-button variant="primary">Details</button> </dt-card-footer-actions> </dt-card></div> export class TitleCardExampleComponent { }
Top 3 JavaScript errors This is some generic content
export class TitleCardExampleComponent { }

Title & Subtitle

´ Loading interactive demo...
<div class="demo-card"> <dt-card> <dt-card-title>Top 3 JavaScript errors</dt-card-title> <dt-card-subtitle>Some subtitle</dt-card-subtitle> This is some generic content </dt-card></div> export class SubtitleCardExampleComponent { }
Top 3 JavaScript errors Some subtitle This is some generic content
export class SubtitleCardExampleComponent { }

Actions

´ Loading interactive demo...
<div class="demo-card"> <dt-card> <dt-card-title>Top 3 JavaScript errors</dt-card-title> <dt-card-subtitle>Some subtitle</dt-card-subtitle> <dt-card-title-actions> <button dt-button variant="secondary">Add to dashboard</button> <button dt-button variant="secondary">Edit</button> </dt-card-title-actions> The card is not an interactive element, therefore, there are no hover, active and disabled card. </dt-card></div> export class ActionButtonsCardExampleComponent { }
Top 3 JavaScript errors Some subtitle The card is not an interactive element, therefore, there are no hover, active and disabled card.
export class ActionButtonsCardExampleComponent { }
´ Loading interactive demo...
<div class="demo-card"> <dt-card> <dt-card-title>Top 3 JavaScript errors</dt-card-title> This is some generic content <dt-card-footer-actions> <button dt-button variant="secondary">Analyse response time</button> <button dt-button variant="primary">Details</button> </dt-card-footer-actions> </dt-card></div> export class TitleCardExampleComponent { }
Top 3 JavaScript errors This is some generic content
export class TitleCardExampleComponent { }

Icon

Note: icons are not yet implemented. This is merely a placeholder to show card capabilities.

´ Loading interactive demo...
<div class="demo-card"> <dt-card> <dt-card-icon> <dt-icon name="application"></dt-icon> </dt-card-icon> <dt-card-title>Top 3 JavaScript errors</dt-card-title> <dt-card-subtitle>Some subtitle</dt-card-subtitle> Icons are not yet implemented - this is an example to showcase the icon placeholder </dt-card></div> export class IconCardExampleComponent { }
Top 3 JavaScript errors Some subtitle Icons are not yet implemented - this is an example to showcase the icon placeholder
export class IconCardExampleComponent { }

Darktheme

´ Loading interactive demo...
<div class="demo-card dark" dtTheme=":dark"> <dt-card> <dt-card-icon> <dt-icon name="application"></dt-icon> </dt-card-icon> <dt-card-title>Top 3 JavaScript errors</dt-card-title> <dt-card-subtitle>Some subtitle</dt-card-subtitle> <dt-card-title-actions><button dt-button variant="secondary">Some Action</button></dt-card-title-actions> The card is not an interactive element, therefore, there are no hover, active and disabled card. </dt-card></div> export class DarkThemeCardExampleComponent { }
Top 3 JavaScript errors Some subtitle The card is not an interactive element, therefore, there are no hover, active and disabled card.
export class DarkThemeCardExampleComponent { }