Morningstar Design

Anatomy

Section title sets the topic for the section.
Tab title sets the topic for the tab.
Active tab communicates which tab is active and which content is currently being displayed. The red bar has a 2px weight.
Inactive tab communicates which tab is inactive and which content is currently not being displayed. The neutral bar has a 1px weight.
Bullet uses a number or brand icon (size XL: 22×22px) to highlight the order of the tabs or to add visual context for the content topic. When using brand icons, each tab should have a unique icon. The bullet usage is optional.
Pin CTA is a tertiary button that helps pin or unpin the content. It is optional.

When to Use

Use tabs to organize related content. Use when a large amount of content is grouped in sections to allow users to quickly and easily switch between them.

When Not to Use

Don’t use tabs when there is a small amount of information to be categorized or when content sections aren’t closely related. Use cards or a card container instead.


Variation	Purpose	Title	Bullet Brand Icon	Bullet Number	Pin
Numbered	Use to highlight the suggested order of the content.	With title, no title	No brand icon	With bullet number	With CTA pin, no CTA pin
Brand icon	Use to give visual context for each tab topic.	With title, no title	With brand icon	No bullet number	With CTA pin, no CTA pin
Single	Use to organize the content into groups.	With title, no title	No brand icon	No bullet number	With CTA pin, no CTA pin

Numbered

Brand Icon

Single

Tab numbered type: each tab is simple listed

Spacing

Ensure that proper space is given between each item in the container.

Brand icon

Tab container spacing for the single tab type. — Single

Spacing for the individual tab — Individual tab

Hierarchy

A proper hierarchy must be ensured for the elements that compose the tab container. The CTA pin of the container should be a tertiary button (with label only) at the bottom of the container. Icons or numbers should be placed between the vertical bar and the tab title to support or give more context and order to the textual content. The title, with the highest level of importance, needs to give a clear and short idea of the topic of the section. The tab titles, at a second order of importance, need to give a clear and short idea of the topic of that tab.

Alignment

All elements of the tab should be left-aligned. Icons and numbers should be top right aligned with the tab title they belong to. The tab container should be at the left of the content slot.

Tab alignment 2: Example of the tab container as part of a section with content at the right

Tab alignment do — Do top-align the numbers and icons with the tab titles.

Tab alignment don't example — **Don’t** center-or bottom-align the numbers and icons with the tab titles.

Tab alignment do example — Do place the tab container at the left of the section with the content slot at the right.

At the MD and SM breakpoints, the tab container changes to a compact horizontal style, and only the active tab will be displayed. For this scenario, bullets (icons and numbers) won’t be displayed, nor will the CTA pin.

Tab design for compact viewports with the other thab options are displayed on a dropdown

The tab container will adjust to the viewport sizes. For XL and LG viewports, the container will always take four columns of the page grid. When reaching the MD and SM breakpoints, the tab container will switch to a compact version.

Tab size at XL breakpoint — XL breakpoint

Tab size at LG breakpoint — LG breakpoint

At these breakpoints, the tabs collapse into a selector, and the active option will be displayed. The active red line will take the width of the title with a 50-character limit.

Tab size at MD and SM breakpoint — MD and SM breakpoint

There is a simple transition animation between one tab and another. The section containing the tabs will have a specific transition behavior between tabbed content, called scrolljack.