The Tabs element is available across all three builders. The Content Builder, the Header Builder and the Footer Builder. The purpose of the element is to output multiple groupings of content within a traditional "tabbed" style component, which can be toggled to reveal one panel at a time. v2 Tabs are only available in Pro v2.1.0+ and Cornerstone v3.1.0+.
The Tabs element is made up of many sub elements that work towards achieving its desired effect. The breakdown of how this markup works is as follows:
- Tabs (
- Tab List (
- Contains a standard
ul comprised of
li elements with
button children as the toggles for each panel.
- Tab Panels (
- Tab Panel (
What we can see from the representative diagram above is that every Tabs element is made up of one or more (typically at least 2) "tabs." A full "tab" is made up of its panel of content and a corresponding tab up in the
.x-tabs-list element, which can be toggled to reveal different panels. Below we will walk through the various controls available for each section of the Tabs element and how you might use them to achieve certain looks.
In this section we will walk through each control grouping and pay special attention to any unique controls or things of note.
The base level control grouping is labeled Tabs, which styles the containing element that holds all child elements. This is also where you will add your individual tabs, which can be inspected to adjust content as needed.
The first thing you will find in this control grouping is the Add Items control box:
Here you can add as many items as you need to your Tabs element, as well as inspect, duplicate, and delete tabs as you wish. You can quick edit the label for each tab by double-clicking the title on each item, or you can click the "inspect" button (the magnifying glass), to go into that specific item:
In this screen, you can edit the tab label that appears at the top of the Element as well as the content for that tab, which will appear in the "panels" down below.
Going back up to our base level Tabs control grouping, the next box you will see is labeled, Setup:
Here you can perform many of the basic functions you see across other v2 elements such as setting a base font size, background color, and width/max width values. After that, you will find the traditional controls for things such as margin, padding, borders, shadows, et cetera.
The Tab List control grouping is primarily comprised of the traditional controls for things such as margin, padding, borders, shadows, et cetera.
The most important set of controls to note for the Indivudlal Tabs control grouping is the Setup box:
In addition to being able to specify a base and interaction background color across all of your tabs as well as a minimum and maximum width for each individual tab, a couple controls of note are the "Fill Space" control and the "Justify Content" control. "Fill Space" will always force tabs to equally fill all available space. This will only visually appear to make a difference if the number of tabs and their overall width is smaller than that of their container. For example, here is a standard setup for the Tabs Element without this control turned on:
And here is how the tabs appear when "Fill Space" is turned on:
Note how the tabs are now evenly filling out all space available to them. If "Fill Space" is turned on then the "Justify Content" control will be hidden, as it will have no effect. With "Fill Space" turned off, you can adjust the "Justify Content" control to change how the tabs appear within your element. The first image above displays the "Start" configuration. Here is what the "Center" configuration would look like:
Here is what the "End" configuration would look like:
Here is what the "Space Between" configuration would look like:
Here is what the "Space Around" configuration would look like:
Here is what the "Space Evenly" configuration would look like:
Remember that these will visually only appear to alter the layout of the tabs if their overall dimensions are less than that of the container. Also, the way that the tab list works is it follows a similar convention now seen with many large-scale websites such as Google and Medium, and is even being used in modern, popular boilerplate frameworks like Bulma. The tab list container has an
overflow-x: auto; style applied to it, which will only display a scrollbar when the amount of tabs and their dimensions are larger than that of their container. They can then be horizontally scrolled through, which also effectively allows for an "infinite" amount of tabs as this pattern is completely responsive at all screen sizes no matter how much content you throw at it.
One final important note for individual tabs is that when adding side margins, any
margin-left values for the first tab or
margin-right values for the last tab will be set to
0px !important, which comes from the static styles present within the theme. This is so that you can place spacing in between your tabs if desired without any extra spacing on one side or the other of the tab list container. If additional spacing is needed on the sides of the tab list container, you can use side padding values to achieve this.
The most important set of controls to note for the Panels control grouping is the Setup box:
Here you can set the background color for each individual panel, but you can also configure a few additional appearance options as well. By default, the "Equal Height" control is set to off (which will also hide the alignment controls below). If turned on, all panels will be set to the same height as the tallest panel within a grouping of tabs. If enabled, each panel is setup using
display: flex; with a
flex-flow: column nowrap; layout, which is what allows us to introduce the "Vertical Alignment" and "Horizontal Alignment" controls. These can be used to move content around within the tabs in special ways if desired. For instance, if you wanted your panels with less content to be vertically centered, you could select "Center" from the "Vertical Alignment" control, et cetera. Keep in mind that the "Vertical Alignment" control will appear to have no effect on your tallest panel as that is the panel that all other panel heights are based on.
After that, you will find the traditional controls for things such as margin, padding, borders, shadows, et cetera.