Tabs Bravo
overview
A modern tab layout with inverted curves, descriptive image tabs, & coordinated active tab colors.
Overview
Display a wide range of content – services, features, profiles, products, and more – in a modern tab-based layout with Tabs Bravo.
This tab frame features:
- Accessible navigation
- Query loop compatibility
- Inverted, mathematically concentric border radiuses
- Coordinated active tab/container colors using data attributes
- Native support for two to five tabs
- Converts to accordion on mobile
- Fully customizable content container layout
Note: You must activate the Frames tabs component to use this frame.
How to use coordinated colors
This frame doesn’t require coordinated tab colors, but it’s an option for users who want to associate a color with specific tab content.
The data attribute data-tab-name is used to associate colors with specific tabs. Each corresponding tab and content container has a data attribute:
The values are numbers by default, but can be anything you’d like. For example, to associate a color with a specific feature or service, you can use the name of the feature or service.
Data attributes create a targetable selector that can then be styled with CSS.
In the CSS panel of Tabs Bravo, you’ll find a section dedicated to styling these data attributes:
Just make sure the values in the CSS correspond with the data attribute values on the tabs and content containers.
Note: Every tab and content container uses the variable --tab-active-background to define the background color. All you have to do is redefine the value of this variable on each specific data attribute.
Using this method, you can still use color coordination even when using query loops and dynamic data.
Variables
Related Frames
No related frames.
Related Components
FAQs
How do I use this frame with query loops?
This frame is query loop compatible. To generate the tabs dynamically, you must use two query loops. One query loop will query the tabs, and the second will query the content containers. Both query loops should be set to query the same data, the same number of results, and the same ordering/filtering.
I changed the background color of my section and now the curves are the wrong color!
The curves in this frame are created with pseudo-elements. The color of these pseudo elements are mapped to the local variable
--container-background. You need to make sure the value of--container-backgroundmatches the background color of whatever container the tabs are in. Unfortunately, this frame is not compatible with gradient backgrounds or background images unless you remove the curves.
Use the related frames section above to check FAQs for other frames related to this frame if you don't see your question here.