The Horizontal Tabs Container and Tab Item for Cards 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 cards that will be placed in a grid-like layout. 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 cards into a compact, easily navigable layout, especially when presenting different types of information in the same space.
Example
This is a Title
This is some Body text
This is a Title
This is some Body text
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 for cards
The Tab Item for Cards component has one field:
- Tab title: This is the text that will appear for users to click on.
- Number of card columns: This sets the number of cards that will appear per row.
- Grid spacing: This controls how much space there is between cards.
- Center items: This toggle controls whether or not the cards are centered inside the tab.
Number of card columns
This is a Title
This is some Body text
This is a Title
This is some Body text
This is a Title
This is some Body text
This is a Title
This is some Body text
This is a Title
This is some Body text
This is a Title
This is some Body text
This is a Title
This is some Body text
This is a Title
This is some Body text
This is a Title
This is some Body text
This is a Title
This is some Body text
Grid spacing
This is a Title
This is some Body text
This is a Title
This is some Body text
This is a Title
This is some Body text
This is a Title
This is some Body text
This is a Title
This is some Body text
This is a Title
This is some Body text
This is a Title
This is some Body text
This is a Title
This is some Body text
This is a Title
This is some Body text
This is a Title
This is some Body text
This is a Title
This is some Body text
This is a Title
This is some Body text
Center items
This is a Title
This is some Body text
This is a Title
This is some Body text
This is a Title
This is some Body text
This is a Title
This is some Body text
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 for cards
The Tab Item component has no layout and style options.
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 for Cards 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 cards, as this can make navigation confusing.
- Do not use vague or overly generic titles like “Tab 1” or “More Info.”
- Refrain from placing unrelated cards into tabs just to fill space.
- Avoid adding so many cards that it 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.
- 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.
Accessibility
- Use your best judgement when picking colors for the Gloss Container, Horizontal Tabs Container & Tab Item for Cards components. Choose colors that don't clash and allow the text to be readable.