C9 Horizontal Tabs

 Overview

The horizontal tabs use the Bootstrap Navs to make a horizontal stack of buttons to cycle through corresponding tab content. Tab colors and content alignments may be customized with toolbar buttons and inspector settings.

Horizontal Tabs

Horizontal Tab Settings

Horizontal tabs are a great way to stack content in a tight space for information that has a clear hierarchy and necessity for that design pattern. Tabs are designed with minimal CSS so they can be customized with a custom theme or child theme.

Tabs Align

Align the tab button text to the left right or center. This can also be changed on the toolbar when clicking on the horizontal tabs block in the blocks editor. Having no tab alignment selected makes the tabs fill the available space horizontally using the Bootstrap flex utilities.

Block Color Settings

Background Color

Background color for the entire tabs block.

Tab Color Settings

Background Color

Background color for the vertical tab buttons

Text Color

Color for the text within the vertical tab buttons

Tab Content Color Settings

Background Color

Background color for the tab content area next to the tab buttons

Advanced

Additional CSS Class

Add a custom CSS class for additional styling or customization.