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 states

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

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 can constist 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. All actions can be shown to the user. If space is limited, move less important actions to a context actions menu. The decision which buttons are 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. One card groups content and components that are thematically related.

On small screens components within a card are placed below each other. On larger screens some components can also be placed next to each other, this depends on the component itself. 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.

Responsive behavior

See the layout pattern for rules how to rearrange cards on a view depending on the container size. Also margins and paddings will change depending on the container size. Therefore we defined the following breakpoints.

Default

margin: 8px
padding: 8px

Container min-width: 460px

margin: 8px
padding: 12px

Container min-width: 992px

margin: 16px
padding: 16px

Container min-width: 1200px

margin: 20px
padding: 16px

Card 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-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 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 { }

Card

´ 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-action> - Your place to add action buttons. Will be displayed in the top right corner. Use the buttons secondary variant.

Examples

Content only

´ Loading interactive demo...
<div class="demo-card"> <dt-card> This is some generic content </dt-card></div> export class ContentOnlyCardExampleComponent { }
This is some generic content
export class ContentOnlyCardExampleComponent { }

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></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-actions> <button dt-button variant="secondary">Add to dashboard</button> <button dt-button variant="secondary">Edit</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 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 { }

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-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 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 { }