The tabs block supports these block variants:
- Tabs
- Pills
- Accordion
- Column (experimental)
Changing block variant
- Hover the Tabs block
- Click on Menu icon
- Select "Render as..."
- Select the block variant you want to use when displaying your tabs
Available block variants
Tabs
Compelling, rich documentation sells design systems inside organizations, but requires a lot of effort to get off the ground. Supernova makes creation and ongoing maintenance dead easy so you can focus on improving your design system.
Supernova manages the entire design system lifecycle in one place, without making your team change tools or maintain self-built workflows and integrations. Automate everything to fit the way you work already.
An image in a tab block
Pills
Compelling, rich documentation sells design systems inside organizations, but requires a lot of effort to get off the ground. Supernova makes creation and ongoing maintenance dead easy so you can focus on improving your design system.
Supernova manages the entire design system lifecycle in one place, without making your team change tools or maintain self-built workflows and integrations. Automate everything to fit the way you work already.
An image in a tab block
Accordion
Example FAQ are from Nord design system, one of our favorite design systems.
The goal of Nord Design System is to improve UI consistency and quality, while making our software design and development processes more efficient. Nord also helps to establish a common vocabulary between everyone in our organization and ease collaboration between different teams and disciplines.
Nord is Nordhealth’s design system for products, digital experiences and brand. It’s a collection of reusable components and tools, guided by clear standards, that can be assembled together to build digital products and experiences.
Public documentation makes sharing and collaboration between different teams and third party vendors much easier as it increases the system’s visibility and accountability. This also makes us push towards higher quality content and enables us to be more transparent. Finally, this also serves as an amazing tool that we can leverage in recruiting.
The short answer is yes, you should use it. Nord improves UI consistency and quality, while making our software design and development processes more efficient.
Columns
Example guidelines from Polaris and Orbit.
Content guidelines (using tab columns block variant)
- We’ve made some changes to improve your store’s security
- These products aren’t getting a lot of views, but visitors are adding them to their carts
- Your SSL certificates were activated
- These are your less popular products with the highest add-to-cart conversion
Component guidelines (using tab columns block variant)
Provide context for your messages.
Don’t include only details with no context.
Two columns of text (using tab columns block variant)
Popover
Popovers help reduce clutter in your designs by keeping small bits of information hidden behind an interaction. They work well for units of slightly complex options (if it gets to be very complicated, consider a modal to structure it all).
The example below shows a button displaying the current number of selected passengers. When it’s clicked, additional options for adding or removing passengers can be seen. This is an action that wouldn’t happen repeatedly during a flow, so it’s best to hide it when it’s not being used.
Collapse
Collapse components hide long information so that it’s not cluttering up the screen. They’re great for hiding things like options that have reasonable defaults that most people wouldn’t change, but some people might want to. This is especially true where there are multiple groups of such options.
The example below could be used to hide options for filtering a search where most people would want to get to their destination in any way possible, but some people only want certain options.