Tab

A component with tabs along the top. Different content is displayed when each tab is selected.

Overview

Category: Tabs and lists

Here is a working example of Tab. Its appearance will change in response to the size of your screen.

Body text goes here...
Different body text goes here...

Usage guidelines

  • Use to display a lot of content, under related sub-headings, without having to make the user scroll.
  • Clicking the title of the tab displays its content underneath.
  • You need to supply a heading and body for each tab you require. Other components you can have inside a tab include: Media Gallery, Image Gallery, Video, Link, Image (Landscape), Content List, and Dividing Line.

Placement

  • Place in the Body Content.

Editing and customisation

  • You can edit the title and the body (these are mandatory).
  • You can also have Media Gallery, Image Gallery, Video, Link, Image (Landscape), Content List and/or Dividing Line within a tab.

The following components can be added inside Tab:

Live examples

Related components

Timeline
Example of "Timeline".
Timeline
More details
Content List
Example of "Content list".
Content List
More details
Title
Example of "Title".
Title
More details
Credit
Example of "Credit".
Credit
More details
Back to top