Recruitment templates

Tabs

Tabs can be a convenient and useful way to display a large amount of information on a page.

With tabs you can:

  • Make a page more succinct and reduce the amount of scrolling required.
  • Display similar or related information 'side by side'.
  • Make information easier to find.
  • Make a page more visually appealing/interesting.

An example of 'tabbed' content is shown below:

Setting up Tabs

How do I create a new set of tabs?

  1. Set up a page with the Page Structure v2 template.
  2. Create the first tab using 'Tabs container'. This is required to initiate the tabs, but also contains the content of the first tab.
  3. Create subsequent tabs using the 'Tab' content item. Make sure each one has a unique ID. It's easiest to name them 2,3,4 etc and include the tab number in the name.

Extra options

Northcote House Reception area

What extra options do I have when using tabs?

  • You can add one image to a tab (dimensions: 930x500 pixels)
  • You can create links to a specific tag using the tab ID e.g. www.exeter.ac.uk/my-page/#tab2.

Potential issues

What potential issues should I be aware of when using tabs?

  • You can only use one set of tabs per page.
  • Tab labels will not display by default on mobile (only when 'more' clicked).
  • Each tab must have its own unique ID, the first tab has ID '0' by default. Two tabs sharing the same ID will mean that the first one will open if either are clicked.
  • Do not embed fixed width YouTube videos directly into tabs, these don't 'respond' well on mobiles.  

Example tab

Head and shoulders icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan odio sed ante ullamcorper sollicitudin. Integer in consequat augue, eget ultricies justo. Nam ullamcorper pellentesque ante vel euismod. Curabitur nec aliquet orci. Ut in dolor sit amet urna pellentesque convallis. Pellentesque at quam mi. Sed egestas auctor massa, in semper nulla. 

Sub-heading

Duis vel cursus felis. Vivamus ut dictum ligula. Nunc pellentesque molestie elit, vel consectetur orci tempus sit amet. Curabitur pellentesque sem convallis purus lobortis aliquet. Nulla semper quis enim in varius. Ut convallis, risus ac laoreet pulvinar, augue libero volutpat risus, et imperdiet lectus nisl aliquet justo. Mauris nec posuere justo, vel venenatis urna. Donec interdum quam non odio tincidunt fringilla. Sed quis mauris diam. Curabitur vel urna eget dui vestibulum vestibulum dignissim quis nibh. Aenean in orci ante. Quisque convallis sagittis velit. Etiam at neque congue, ultrices odio a, iaculis lorem. Mauris pulvinar massa ac vulputate placerat.

The tab with quite a long name and doesn't fit on the row

On a large screen, this tab will appear on the right hand side under 'More' as there is no room for it in the row of tabs. That's why it is preferable to have short names for tabs.