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

Logo List
More details
Accordion
More details
Quote
More details
Date
More details
Back to top