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-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 or disabled states. </dt-card> </div> export class CardDefaultExample {} <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">Some Action</button> </dt-card-title-actions> The card is not an interactive element, therefore there are no hover, active or disabled states. </dt-card> </div> export class CardDefaultExample {}

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 or disabled states. </dt-card> </div> export class CardDarkExample {} <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 or disabled states. </dt-card> </div> export class CardDarkExample {}

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

<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 (directives):

  • <dt-card-title> - The title of this card, needs to be defined to show the card's headline. This should be text only.
  • <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. Use the <dt-icon> component for this.
  • <dt-card-title-actions> - The place to add action buttons. Will be displayed in the top right corner. For multiple <dt-button> elements, use the secondary variant.
  • <dt-card-footer-actions> - Action buttons, displayed below the text. There should only be one primary <dt-button>.
´ 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">Some Action</button> </dt-card-title-actions> The card is not an interactive element, therefore there are no hover, active or disabled states. </dt-card> </div> export class CardDefaultExample {} <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">Some Action</button> </dt-card-title-actions> The card is not an interactive element, therefore there are no hover, active or disabled states. </dt-card> </div> export class CardDefaultExample {}

Imports

You have to import the DtCardModule when you want to use the dt-card:

@NgModule({
  imports: [DtCardModule],
})
class MyModule {}

Examples

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

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 or disabled states. </dt-card> </div> export class CardActionButtonsExample {} <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 or disabled states. </dt-card> </div> export class CardActionButtonsExample {}
´ 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 CardFooterActionsExample {} <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 CardFooterActionsExample {}

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

Dark theme

´ 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 or disabled states. </dt-card> </div> export class CardDarkExample {} <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 or disabled states. </dt-card> </div> export class CardDarkExample {}