The Horizontal Tabs Container and Tab Item components work together to create a simple tabbed layout for displaying content. Authors can use the container to group tabs, while the tab items define each individual tab and its title. Inside each tab item, authors can add any type of content, such as text, images, or videos. To maintain consistency, it’s recommended to keep the background color the same as the section containing the tabs. These components are ideal for organizing related content into a compact, easily navigable layout, especially when presenting different types of information in the same space.
Example
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.
Content Options
Horizontal tab container
The Horizontal Tabs Container component has no content options. It is designed to have Tab Item components dropped inside of it.
Tab item
The Tab Item component has one field:
- Tab title: This is the text that will appear for users to click on.
Layout and Styling Options
Background Color
It’s recommended to keep the background color the same as the section containing the tabs. We may remove the background color option in the future.
Default (white)
Muted (grey)
Primary (brand red)
Secondary (teal/blue)
Tertiary (dark grey)
Gradient
Tab item
The Tab Item component has no layout and style options.
Bottom Margin
None
X-Small
Small
Medium
Large
X-Large
the end
Top Margin
None
X-Small
Small
Medium
Large
X-Large
the end
Usage
Do
- Use the Horizontal Tabs Container to group related content into distinct sections for easy navigation.
- Keep tab titles short and descriptive so users understand what each tab contains.
- Ensure the order of the tabs makes sense and follows a logical flow.
- Add engaging and relevant content inside each Tab Item that aligns with the tab title.
- Use consistent formatting and style across all tabs for a polished appearance.
- Leave enough space around the tabs to prevent them from feeling crowded.
- Place this component in areas where users would benefit from switching between multiple pieces of information quickly.
- Combine the component with clear headings or context to help users understand its purpose on the page.
Don't
- Avoid overloading the tabs with too many items, as this can make navigation confusing.
- Do not use vague or overly generic titles like “Tab 1” or “More Info.”
- Refrain from placing unrelated content into tabs just to fill space.
- Avoid adding content that requires excessive scrolling inside a single tab.
- Do not rely on the tabs as the sole way to access critical information; provide alternatives if necessary.
- Refrain from using conflicting or inconsistent styles between tabs and the rest of the page.
- Avoid placing interactive elements (like buttons or forms) inside a tab if they could cause confusion when switching tabs.
- Do not change the background color of the container if it creates contrast issues or clashes with the overall design.
- Refrain from embedding tabs within other tabs, as it can confuse users and make navigation cumbersome.