Digital Design

Tabbed Content

Tab One

Tabs can be used to break up content within a section. They help to keep the site’s structure shallow.

Tabs can be added using the Content Blocks content type '02. Tabbed Content'.

The title of each tab is a header 2 and should be title case. It should be short and descriptive. You have a maximum of 75 characters for all tab titles. That means the more tabs you have the fewer characters you have for each. For example if you have four tabs that’s about 18 characters per title. We recommend you have no more than six tabs per page.

On desktop all tabs should fit on a single line.

On mobile the tabs will display as a drop-down menu. Try resizing your browser to see how this works.

Content should not appear above the tabs.

You can include an introduction on each tab as well as images, video, pull quotes etc.

Headings within the content of a tab should start at heading 3 and can be added from the format menu in the WYSIWYG editor.

View our example of a tabbed page.

Tab Two

Tab Three