Tabs Bravo


A modern tab layout with inverted curves, descriptive image tabs, & coordinated active tab colors.

Tabs Bravo
Available for:
Buy Frames
Back to library


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:

Tab Data Attributes

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:

Styling Tab 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.

Query Loop Compatible


This frame uses the following locally scoped variables to make it easier for you to edit the style or behavior of this frame. Variables can be viewed or edited from the CSS tab.

Related Frames

No related frames.

Related Components


  • 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-background matches 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.

    locally scoped variables

Use the related frames section above to check FAQs for other frames related to this frame if you don't see your question here.