Containers
height: 210px;
border-radius: 4px;
COLOR STYLESElevations/Elevation 2, Neutrals | Gray/05
STROKEGeneral styles/Border, Neutrals | Gray/25
BACKGROUND STYLESElevations/Elevation 2, Neutrals | Gray/05
height: 210px;
border-radius: 4px;
TEXT STYLESBody/Default medium
COLOR STYLESElevations/Elevation 2, Typography color/Body, Neutrals | Gray/30
STROKEGeneral styles/Border
BACKGROUND STYLESElevations/Elevation 2, Neutrals | Gray/30
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.
States
height: 128px;
border-radius: 4px;
TEXT STYLESBody/Default medium
COLOR STYLESElevations/Elevation 2, Typography/Body
STROKEGeneral styles/Border
BACKGROUND STYLESElevations/Elevation 2
height: 128px;
border-radius: 4px;
TEXT STYLESBody/Default medium
COLOR STYLESElevations/Elevation 2, Typography/Body
STROKEGeneral styles/Border
BACKGROUND STYLESElevations/Elevation 2
height: 128px;
border-radius: 4px;
TEXT STYLESBody/Default medium, Body/Default
COLOR STYLESElevations/Elevation 2, Typography/Body, Typography/Body
STROKEGeneral styles/Border
BACKGROUND STYLESElevations/Elevation 2
height: 128px;
border-radius: 4px;
TEXT STYLESBody/Default medium
COLOR STYLESElevations/Elevation 2, Typography color/Body
STROKEGeneral styles/Border
BACKGROUND STYLESElevations/Elevation 2
height: 128px;
border-radius: 4px;
TEXT STYLESBody/Default medium
COLOR STYLESElevations/Elevation 2, Typography color/Body, General styles/Hover
STROKEGeneral styles/Border
BACKGROUND STYLESElevations/Elevation 2, General styles/Hover
height: 128px;
border-radius: 4px;
TEXT STYLESBody/Default medium, Body/Default
COLOR STYLESElevations/Elevation 2, Typography color/Body, Typography color/Body, Neutrals | Gray/30
STROKEGeneral styles/Border
BACKGROUND STYLESElevations/Elevation 2, Neutrals | Gray/30
Sizes
Accordions come in 3 height sizes: small, regular, and large. The width can vary according to the content.
Examples & use cases
Accordion with a list, placed within a modal.
Accordion within a side panel, with custom content and an action bar.
Accordion with chevron on the right side.
height: 216px;
border-radius: 4px;
TEXT STYLESTitle/Large, Body/Small, Body/Default, Buttons/Regular Flat Primary
COLOR STYLESElevations/Elevation 1, Typography color/Emphasis, Typography color/Tertiary, Typography color/Body, Buttons/Primary/Flat text
STROKEGeneral styles/Border
SHADOW STYLESShadows/Elevation 1
BACKGROUND STYLESElevations/Elevation 1
height: 216px;
border-radius: 4px;
TEXT STYLESTitle/Large, Body/Small, Body/Default, Buttons/Regular Flat Primary
COLOR STYLESElevations/Elevation 1, Typography color/Emphasis, Typography color/Tertiary, Typography color/Body, Buttons/Primary/Flat text
STROKEGeneral styles/Border
SHADOW STYLESShadows/Elevation 1
BACKGROUND STYLESElevations/Elevation 1
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.
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
Examples & use cases
Small cards within a modal (Integration hub)
Product cards in gallery display (UFTS)
Cards in the left panel are dragged and dropped to the main canvas (Octane MBT)
height: 168px;
border-radius: 4px;
TEXT STYLESTitle/Extra small, Body/Default
COLOR STYLESElevations/Elevation 1, Typography color/Secondary, Typography color/Body
STROKEGeneral styles/Border
SHADOW STYLESShadows/Elevation 1
BACKGROUND STYLESElevations/Elevation 1
height: 168px;
border-radius: 4px;
TEXT STYLESTitle/Extra small, Body/Default
COLOR STYLESElevations/Elevation 1, Typography color/Secondary, Typography color/Body
STROKEGeneral styles/Border
SHADOW STYLESShadows/Elevation 1
BACKGROUND STYLESElevations/Elevation 1
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:
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.
States
Checkbox display: By default, checkboxes are hidden. when the user hovers over a row, a single checkbox appears. When the user selects a row, all checkboxes are shown. It is also possible to display checkboxes as a default.
COLOR STYLESTypography color/Body, Elevations/Elevation 1
BACKGROUND STYLESElevations/Elevation 1
COLOR STYLESTypography color/Body, General styles/Hover
BACKGROUND STYLESGeneral styles/Hover
COLOR STYLESTypography color/Emphasis, General styles/Selected
BACKGROUND STYLESGeneral styles/Selected
COLOR STYLESTypography color/Body, Elevations/Elevation 1
BACKGROUND STYLESElevations/Elevation 1
COLOR STYLESTypography color/Body, General styles/Hover
BACKGROUND STYLESGeneral styles/Hover
COLOR STYLESTypography color/Emphasis, General styles/Selected
BACKGROUND STYLESGeneral styles/Selected
Sizes
Table comes in 4 different row height
Variants
🔮 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
Examples & use cases
A table header with a toolbar
A table with a standalone toolbar and active filters
height: 40px;
border-radius: 4px;
TEXT STYLESButtons/Regular
COLOR STYLESElevations/Elevation 1, Neutrals | Gray/30, Buttons/Secondary/Flat text
STROKEGeneral styles/Border
SHADOW STYLESShadows/Elevation 1
BACKGROUND STYLESElevations/Elevation 1
height: 40px;
border-radius: 4px;
TEXT STYLESButtons/Regular
COLOR STYLESElevations/Elevation 1, Neutrals | Gray/30, Buttons/Secondary/Flat text
STROKEGeneral styles/Border
SHADOW STYLESShadows/Elevation 1
BACKGROUND STYLESElevations/Elevation 1
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
Examples & use cases
Floating toolbar on top of content
Floating toolbar on top of content