Make the first tab visible on page load and use it for the most important or frequently accessed information. Place less relevant or occasional content in later tabs.
Tabs Component
Tab Two Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Tab Three Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
What is it?
A Tabs Component is a set of layered content panels with tab controls to support navigation between panels. Tabs are often used to provide a collection of related content within a single component, to conserve space and reduce scrolling.
Elements
- Current tab: Determines the default open tab.
- Tab title: Describes the tab label and serves as the control to activate the tab.
- Panel: Contains the tab panel content, which can include formatted text, images, and links as well as other components.
- Canvas Edit Mode: Toggles all tabs into a single column edit mode for easier editing. Don't forget to un-toggle it before publishing content.
How do you use it?
- Use tabs to group related content so users can switch between topics without scrolling or leaving the page.
- Don’t use tabs if users need to view or work with all sections at the same time.
- Each tab should contain all necessary details for its topic. Don’t make users click through multiple tabs for complete information.
- Limit the number of tabs. Avoid using them for broad or complex topics that need many sections.
- Write short, clear tab titles (1–2 words) that describe the tab’s content and work well as navigation labels.
- Make the first tab visible on page load and use it for the most important or frequently accessed information. Place less relevant or occasional content in later tabs.
Example:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat.
- In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor.
- Pulvinar vivamus fringilla lacus nec metus bibendum egestas.
- Iaculis massa nisl malesuada lacinia integer nunc posuere.
- Ut hendrerit semper vel class aptent taciti sociosqu.
- Ad litora torquent per conubia nostra inceptos himenaeos.
Lorem ipsum
- Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor.
- Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
Lorem
ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat.
- Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor.
- Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
Lorem ipsum
Dolor sit amet - Consectetur adipiscing elit. Quisque faucibus ex sapien. Ad litora torquent per conubia nostra inceptos himenaeos.
- Lorem ipsum dolor sit amet consectetur adipiscing elit.
- Quisque faucibus ex sapien vitae pellentesque sem placerat.
- In id cursus mi pretium tellus duis convallis.
- Tempus leo eu aenean sed diam urna tempor.
- Pulvinar vivamus fringilla lacus nec.
Dolor sit amet - Consectetur adipiscing elit. Quisque faucibus ex sapien. Ad litora torquent per conubia nostra inceptos himenaeos.
- Lorem ipsum dolor sit amet consectetur adipiscing elit.
- Quisque faucibus ex sapien vitae pellentesque sem placerat.
- In id cursus mi pretium tellus duis convallis.
- Tempus leo eu aenean sed diam urna tempor.
Lorem Inceptos Himenaeos.
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat.
1. In id cursus
- Tempus leo eu aenean sed diam urna tempor.
- Pulvinar vivamus fringilla lacus nec metus bibendum egestas.
- Laculis massa nisl malesuada lacinia integer nunc posuere.
2. Tellus duis convallis.
- Tempus leo eu aenean sed diam urna tempor.
- Pulvinar vivamus fringilla lacus nec metus bibendum egestas.
- Laculis massa nisl malesuada lacinia integer nunc posuere.
3. Tellus duis convallis.
- Tempus leo eu aenean sed diam urna tempor.
- Pulvinar vivamus fringilla lacus nec metus bibendum egestas.
- Laculis massa nisl malesuada lacinia integer nunc posuere.
Ad litora torquent per conubia nostra inceptos himenaeos.
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor.
