Theme: Light | Lightest | Dark | Darkest Scale: Medium | Large

Tab View

Usage notes


Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit.

Default

Coral Tab 1 Coral Tab 2 Coral Tab 3 Disabled Invalid
Aenean faucibus ornare laoreet. Cras luctus purus. Lorem ipsum dolor sit amet. Sed eget eros sit amet nulla ultricies. Fusce nec ante non nibh mollis mollis mollis vitae dui. Aenean faucibus ornare laoreet. Cras luctus purus.
Toggle markup

Vertical orientation

Text only Icon and text Disabled Invalid
Aenean faucibus ornare laoreet. Cras luctus purus. Lorem ipsum dolor sit amet. Sed eget eros sit amet nulla ultricies. Fusce nec ante non nibh mollis mollis mollis vitae dui. Aenean faucibus ornare laoreet. Cras luctus purus.
Toggle markup

Nested Example

Coral Tab 1 Coral Tab 2
Coral Tab 1 Coral Tab 2
Aenean faucibus ornare laoreet. Cras luctus purus. Lorem ipsum dolor sit amet.
Aenean faucibus ornare laoreet. Cras luctus purus. Lorem ipsum dolor sit amet.
Toggle markup