Tabs Full Page
The Tabs Full Page component allows users to move between tabs of important information. You can place different components inside each tab item.
When to use
It is very common for users to not scroll down to the bottom of long pages. As an alternative to one very long page, you can use this component to:
- give visibility to different topics at the top of the page
- help users discover the content that is best suited to their interests and needs.
You should consider the overall hierarchy of the content:
- Are there different topics of information?
- Would this tab layout help your users have a better chance of fulfilling their journey needs?
How to use
Within each Tab Item, you can add components. The following components can be used inside Tab items:
- Text
- Feature Banner
- Card Grid
- Parallax Feature Image
- Text + Image Overlap
- CTA Button
- Half-Half Color Block
- Quick Links
- Quote Block (coming soon)
This list will be extended to include additional components in the future.
Additional considerations
- Recommended number of tabs on a page: 2 - 5 tabs
- Recommended tab item title length: 10 - 20 characters (max. 30)
Example
See this component in use:
Brands page
