•   Email
  •   Print
Component Library

Tabbed Content

This component is used to generate  tabbed content. Tabbed content is a popular User Interface (UI) design pattern that allows an author to present multiple pieces of content into a single space. The tabs let site users switch between the different pieces of content. This component only generates the empty containers for each tab. Content for each tab is built with other standard components. Here is an example. 

Example

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis.

Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Vestibulum id ligula porta felis euismod semper. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. 

Author Dialog

The author dialog loads with just the ability to add the title for the first tab. This title is also used as the content for the tab itself. Once multiple titles have been added, there are controls next to each one to change the order or remove a title. Each title has a corresponding paragraph system beneath it for adding content. 

This is sample content.

Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

Once the tabs have been set up, each active tab will have its own paragraph system for adding any other components needed to create the desired content. You switch between tabs by clicking on them.