Containers


Anatomy

accordion anatomy

Usage

  • Accordions work well when the vertical space is limited (e.g: mobile screens).
  • Accordions usually have only one section open at a time. In some cases it is possible to have more than one section open.
  • Content guidelines: titles should be short and clear, and provide a high level overview of the section content.
  • Placement guidelines: accordions can be placed within the main content area, or inside a container such as a side panel.

 

👍  Rule of thumb
Use accordions to organize information that can be read in sections, e.g.: in a complex form.

Sizes

Accordions come in 3 height sizes: small, regular, and large. The width can vary according to the content.

Accordion sizes

Examples & use cases

 

Accordion with a list, placed within a modal.

Accordion example 1

Accordion within a side panel, with custom content and an action bar.

Accordion example 2

Accordion with chevron on the right side.

Accordion example 3

Anatomy

Card layout and size can change to support different types of content. Cards are usually built from 3 main areas: title, body, and actions. Bellow is a common layout of a card.

Card anatomy

Usage

  • Cards let the user browse a collection of items.
  • Upon interaction with a card, more details or actions can be revealed.
  • Cards can contain interactive elements and actions, or they can be actionable by themselves.
  • Cards can be arranged in a grid or in a list.
  • Our cards are usually placed on top of the base layer and use ‘Elevation 1’.

 

👍  Rule of thumb
Cards should be easy to scan for relevant and actionable information, don’t overload them.

States

Card states

Examples & use cases

 

Small cards within a modal (Integration hub)

Card example 1

Product cards in gallery display (UFTS)

Card example 2

Cards in the left panel are dragged and dropped to the main canvas (Octane MBT)

Card example 3

Anatomy

Table anatomy

The header contains column titles and can also include actions such as: sort, select, or opening a dropdown menu. The header columns are visually separated by a vertical divider (optional).

Rows are built from single cells, each cell can contain data such as text, icons or tags, and can also contain actions, such as collapse/expand, opening a link, etc. Rows are visually separated by an horizontal divider.

Cells can also include:

Table cell anatomy

Usage

  • Tables are used to present and analyze data.
  • Tables should only include data that is relevant to the current user’s task.
  • Arrange the columns by their order of importance to the user, or allow the user to customize it.
  • Freezing the header or first column can help users understand the content of each cell.
  • Content guidelines: Keep titles concise and descriptive. Sentence case should be used for all table text.

 

👍  Rule of thumb
If the data is auto-generated, consider adding a column with a ‘human generated’ name to help the user recognize the items. For example: Run ID: 56349, Test name: Test Jira 2.

Sizes

Table comes in 4 different row height

Table sizes

Variants

 

Table variant 1

Table variant 2

 

🔮 Tip box – Figma detach recommendation
Our design system library includes ready-made tables to give you a quick start.
Drag a table component, detach it, and adapt it to your design specific needs (but don’t detach single table cells).

Do’s & Don’ts

Table – Do Table – Don't
Table – Do Table – Don't2

Examples & use cases

 

A table header with a toolbar

Table example 1

A table with a standalone toolbar and active filters

Table example 2

Anatomy

Toolbar anatomy

 

Usage

  • The toolbar actions are logically grouped and are sorted by order of importance to the user.
  • Each action group is separated by a vertical divider.
  • It’s recommended to have up to 4-5 actions in each group.
  • Placement guidelines: The toolbar should be placed near the content it relates to. When the toolbar is placed within another container, it inherits its parent border radius and shadow styling.

 

👍  Rule of thumb
Place 8-10 actions in each toolbar. Consider using a dropdown or an overflow menu if necessary.

Do’s & Don’ts

Toolbar – Do Toolbar – Don't
Toolbar – Do2 Toolbar – Don't2

Examples & use cases

 

Floating toolbar on top of content

Toolbar example 1

 

Floating toolbar on top of content

Toolbar example 1 V2