Tabs

Tab containers are ways to show and hide content one at a time that can be grouped together.

How to Use
  • Tabs make it easy to explore and switch between a lot of content in a limited space.
  • If more than six tabs are needed, use Expandable Content instead.
  • Tab Content can include rich content such as photo, video, buttons, and links.
  • Tab labels should be very clear and succinct, usually no more than two to three words.
How to Build

Make sure you are using the “backend editor” to build out the component.

  1. Click the Add New Element plus icon to add a component to the page.
  2. An Add Element window will appear, choose the Tab option.
  3. The settings dialog box will appear. Fill in the tab name.
  4. Click Save changes.
  5. Click the plus sign inside the tab to add content. You can use the Row component to add columns inside the tab. Do not use advanced components such as  additional tabs, billboards, callout rows, etc. inside tabs.
  6. Repeat steps to create a set of tabs. tabs directly following one another in the same row will be grouped automatically into a set of tabs.

(Refer content guidelines tab to understand how to write for this component)

Content Guidelines

Tabs make it easy to explore and switch between a lot of content in a limited space. If more than five or six tabs are needed, use Expandable Content instead.

Tabs are a clear and concise way to organize information that would otherwise be overwhelming and create an unnecessarily long page.

Tab Title

  • The Tab Title should be no more than 4 words.

Tab Content

  • Content within tabs can vary. It is most common to simply include body text.
  • Always follow Content Best Practices when writing copy within horizontal tabs.
Tab One

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Tab Two

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.