Schematic header anatomy

Anatomy - example header

1. Avatar (optional): An image, icon, or initials.

2. Title: Describes what the card is about.

3. Subtitle (optional): You can use the subtitle to qualify the title, offer an explanation, or show a status. The use of the subtitle can differ, depending on the card type.

4. Counter (optional): Displays how many items are on the card in relation to the total number of relevant items.

   • Format: [Items on Card] of [Total Items]
   • Example: 5 of 40

5. Interactive element (optional): For example, an icon button. Typically, the button in the card header is used for actions provided by the host environment, such as Refresh, Favorite, or Bookmark.

Example of main header components

The extended header is a flexible slot for custom combinations of UI components.

Components are placed in columns, preferably in a one-column or two-column layout.

If space is limited, the components can wrap to the next line. We recommend a maximum of 3 lines.

Extended header - example with 3 lines and a two-column layout

You can also combine content within one line, such as a rating followed by a label.

When multiple components are shown in one row, you can separate them with a visual divider.

Extended header - visual divider between components

The alignment within the slots is flexible. Content can be aligned to the left, right, top, or bottom.

We assume that most cards will use one of 3 typical layouts:

1. One-column layout, components left-aligned

2. One-column layout, components right-aligned

3. Two-column layout, left column is left aligned, right column right-aligned

Extended header - layout and alignment options

If a main header with a thumbnail (avatar component) is shown above the extended header, you can indent the UI components in the extended header. This allows you to vertically align the texts.

1. Extended header aligns with the avatar of the main header.
2. Extended header aligns with the texts of the main header.

The extended header can be aligned with the avatar or text of the main header

1. KPI / numeric value: This value can use semantic colors.
2. Label (optional): Additional qualifying information to provide a better description of the key value. This text truncates after one line.
3. Side indicators (optional): If required, you can also display up to two additional indicators that relate to the main KPI.
4. Micro Chart (Optional): You can add a micro chart to present your data graphically. The recommended sizes for micro charts are XS, S, or M, depending on the available space.

The height of the numeric header block can be set to either “hug contents” or “fill the container.” If the numeric header block is the last block in the card and the components are bottom-aligned, the numeric header block can also fill the container.

Examples of numeric header components

1. Main Header

• The avatar, title, and subtitle stay left aligned.
• The button and counter stay right aligned.
• If the card width is decreased, the text of title and subtitle wrap to two or a maximum of three lines (recommended). After that, the text truncates with the ellipsis (…).
• The counter never truncates.

2. Extended Header

• The components in the left column stay left-aligned. If the width is insufficient, the components displayed in one line (N) wrap to two lines (similar to text wrapping behavior).

• The components in right column stay right-aligned until the card is no longer wide enough to display two columns. Depending on the importance of your content, you then have two options:

  • Pop-in: The content from the right column moves (or “pops in”) below the left column components and changes from right-aligned to left-aligned.
  • Hide: The content from the right column in no longer shown.

3. Numeric Header

• The numeric value and label stay left aligned.
• The numeric value never truncates.
• Label gets truncated after one line.
• When the card’s width is increased, the first side indicator stays maximum 3 rem distance (M) from the numeric value.
• When the numeric header has space for a micro chart, the micro chart can be displayed after KPI and side indicators and stays right-aligned.
• When the card’s width is decreased, the minimum distance between KPI, side indicator and the micro chart is 1 rem.
• When the width is not enough to display all elements(numeric value, side indicators and micro chart), the micro chart is hidden first, then the side indicators.

Components

• Web Card System
• Media in the Web Card System
• Badge in the Web Card System
• Avatar
• Button

Specifications

• Web Card System
  (visual design)
• Card Header in Web Card System
  (interaction design)