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

Date Range
Example of "Date range".
Date Range
More details
Side Content Date Range
Example of "Side date range".
Side Content Date Range
More details
Summary
Example of "Summary".
Summary
More details
Accordion
Example of "Accordion".
Accordion
More details
Back to top