Tabbed Content

There are three different tabsets available for displaying page content. Examples of each will follow below along with the different style ticks that can be applied to change the  rendering style of the tabs themselves.

Due to the high number of variations that can be applied via style ticks and component rendering options, use one of the examples below for best results. Not all combinations will be supported and the display may not render correctly if an unsupported combination is used.

  • Bootstrap Tabs (basic)
  • Bootstrap Tabs Icons (includes images that display along with the title text)
  • Bootstrap Tabs Fluid (same as Bootstrap Tabs Icons but the tab row extends the full width of the page to allow for a background color to be added)

All three renderings are compatible with each other and use the same datasource content. The tabset itself includes these fields:

  • Heading (tab title)
  • HeadingIcon (optional image that displays on the tab)
  • Content (placeholder to add components, i.e. image, rich text, etc.)

There are two additional style ticks that are available to alter the appearance of the tabs.

  • Tabs Top Blocks
  • Tabs on Bottom
Below is the most basic version of the Bootstrap Tabs component.
The example below uses the same datasource as above but the style "Top Block Tabs" is ticked in the style properties. 
The datasource for the tabset below is the same as the ones above but uses a different rendering to include the image icons. 
The example below shows the Bootstrap Tabs Icons component nested in a Section Container component with a background color applied via the style properties. This component is designed to work as shown below and not all options are supported. All background colors are avaiable and should be applied as in the example below.
Below is an example of the Bootstrap Tabs Fluid component. It includes the style tick "Tabs on Bottom" and a background color applied via the style properties. This component should always include the "Tabs on Bottom" tick as well as a color to display as designed. 

Sample title for component

Some content for the first tab item. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Second tab item content 

Third section for tab item content 


Use of Cookies and Privacy Policy Update

Cookies are used on this site to assist in continually improving the user experience and all the interaction data we store of our visitors is anonymous.

Learn more about your rights on our Privacy Policy page.