Page Loading

Tabbed content

The tabs component lets users navigate between related sections of content, displaying one section at a time.

Tabbed content example

Beyond our transport links, Scotland's digital connectivity infrastructure is growing in strength. 

Scotland tops poll for connectivity 

Scotland is ranked Europe's most connected region for investment in the prestigious fDi European Cities and Regions of the Future Awards 2020/21. 

Scotland is also a great place for work-life balance, ranking among the top 10 fDi Awards for economic potential, business friendliness, human capital and lifestyle.

This follows EY's report that Scotland is once again the top UK location for inward investment outside of London.

We recognise the vital importance of a strong international air route network that connects businesses in Scotland to their customers worldwide. Scotland currently has direct international air routes to 37 countries. 

Scotland has enjoyed significant growth in international air routes over the past 10 years. Scheduled services to international destinations have more than trebled since 2001.  

Scotland's five main airports have international flights that connect millions of passengers to around 150 destinations worldwide, and these routes are growing year by year. 

The alt attribute should be removed

Around £2.7 billion is being invested in major road infrastructure, increasing access across the whole of Scotland and the UK. It takes just 45 minutes to get from Glasgow to Edinburgh by train, and more improvements will see the addition of 200 trains and 200,000 seats across the whole of the Scottish network. 

Need to get to the UK capital? Direct rail journeys to London can take as little as 4.5 hours with speedy connections to other UK cities available too. And there's an average of 100 flights to London each day. 

Clean separation between structure and content

A well-crafted design system caters to the content that lives inside it, and well-crafted content is aware of how it’s presented in the context of a UI.

The interface patterns we establish must accurately reflect the nature of the text, images, and other content that live inside them. Similarly, our content should be aware of the manner in which it will be presented. The close relationship between content and design requires us to consider both as we construct our UIs.

How to use tabbed content

Tabs can be a helpful way of letting users quickly switch between related information if:

  • Your content can be usefully separated into clearly labelled sections
  • The first section is more relevant than the others for most users
  • Users will not need to view all the sections at once

Do not use the tabs component if the total amount of content contained in the tabs will make the page slow to load. In other words, don’t try and squeeze four pages worth of content into one page by using tabs.  

Tabs hide content from users and not everyone will notice them or understand how they work. Do not use tabs if your users might need to:

  • Read through all of the content in order, for example, to understand a step-by-step process
  • Compare information in different tabs - having to memorise the information and switch backwards and forwards can be frustrating and difficult

Test your content without tabs first. Consider if it’s better to:

  • Simplify and reduce the amount of content
  • Split the content across multiple pages
  • Keep the content on a single page, separated by headings
  • Use a table of contents to let users navigate quickly to specific sections of content 

We've added examples of how tabbed content should appear on full width pages on different sites at the end of this page. 

Adding tabs in the CMS

Tabbed content should be aligned to the left hand side of the page on Scottish Enterprise and Find Business Support. We do this by adding the tab component into a container. 

Using a template

To add tabbed content to a page, you should add a new panel, and then use the tab template. The template will usually have the correct modifiers and containers applied, although you may need to adjust these to suit your page design. 

On pages that use left hand navigation, you'll need to remove the 8 span from the container. 

From scratch

If you're not using a template, you should:

  1. Add a container to the panel you want to add the tabbed content to.
  2. Add the tabbed content component within the container
  3. Add a 'content section' for each tab
  4. Add the components and content you need within each content section / tab

You'll need to apply a span of 8 to the container, unless the page uses left hand navigation. 

In Umbraco, it should be structured like this:

  • Panel
    • Container
      • Tabbed content component
        • Content section 1 / tab 1
          • Component
          • Component
        • Content section 2 / tab 2 
          • Component
          • Component
        • Content section 3 / tab 3
          • Component
          • Component

Tabbed content should be aligned to the centre of the page on SDI. This happens automatically when you apply the reduced span to the panel.  

Using a template

To add tabbed content to a page, you should add a new panel, and then use the tab template. The template will usually have the correct modifiers and containers applied, although you may need to adjust these to suit your page design. 

From scratch

If you're not using a template, you should:

  1. Add a tabbed content component to a new or existing panel
  2. Add a 'content section' for each tab
  3. Add the components and content you need within each content section / tab

You'll need to apply a span of 8 to the panel.

In Umbraco, it should be structured like this:

  • Panel
    • Tabbed content component
      • Content section 1 / tab 1
        • Component
        • Component
      • Content section 2 / tab 2
        • Component
        • Component
      • Content section 3 / tab 3
        • Component
        • Component

Tabbed content modifier rules

  • Background: default (white) or ‘background’ (grey)
  • Grid span: 8
    • Standard - applied at container level. Span removed on pages with left hand navigation
    • SDI - applied at panel level
  • Padding: default, unless required to improve layout  
  • Alignment: default 

Accessibility

Tabs hide content, so the tab labels need to make it very clear what they link to, otherwise users will not know if they need to click on them. Long titles may not read well on mobile.  

If you struggle to come up with clear labels, it might be because the way you’ve separated the content is not clear.

Here's how tabbed content looks as standard

This applies to the majority of our sites, including Scottish Enterprise and Find Business Support, but not SDI. It's aligned to the left of the page, with a span of 8. We do this by adding it to a container first, then applying the span to the container. 

Here's some text inside tab 1. You might have other content too, like images or videos. 

Here's some text inside tab 2. You might have other content too, like images or videos. 

Here's how tabbed content should look on SDI

It's aligned to the centre of the page, with a span of 8. We do this by applying the span to the whole panel. 

Here's some text inside tab 1. You might have other content too, like images or videos. 

Here's some text inside tab 2. You might have other content too, like images or videos.