Card

The card component is a visual container for wrapping a wide variety of contents.

<div class="dt-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>

Imports

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

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

Initialization

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>.

Details about sections within a card are described below.

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.

Header

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.

<div class="dt-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>

<div class="dt-demo-card">
  <dt-card>
    <dt-card-icon>
      <dt-icon name="incident"></dt-icon>
    </dt-card-icon>
    <dt-card-title>Top 3 JavaScript errors</dt-card-title>
    <dt-card-subtitle>Some subtitle</dt-card-subtitle>
    This card has an icon
  </dt-card>
</div>

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 expandable text component to make the full text expandable.

Card 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.

Header actions

<div class="dt-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>

Footer actions

<div class="dt-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>

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.

Dark background

A card can be placed on dark background.

<div class="dt-demo-card dt-example-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>

Card in use

See the following table for margin and padding values depending on predefined breakpoints.