Tabs with no highlight panels for duplicating

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:

How do I create a new set of tabs?

Set up a page with the Page Structure v1 template.
Create the first tab using 'Tabs container'. This is required to initiate the tabs, but also contains the content of the first tab.
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.

What extra options do I have when using tabs?

Tabs can be used on standard pages with right column, or full width page.
You can use the 'Highlight content panel' inside a tab if you set this option and specify the tab ID (see other tabs for examples).
You can create links to a specific tag using the tab ID e.g. www.exeter.ac.uk/my-page/#tab2.
It is possible to embed an image from the media library into a tab. If the width of the image is more than the space allowed, it will automatically be resized (shrunk).

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

You can only use one set of tabs per page.
You can only use one Highlight content panel per tab.
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.
When using the Highlight content panel, as well as checking the box to display in a tab, you must choose to display before or after current content (or it won't appear at all).
Do not embed fixed width YouTube videos directly into tabs, these don't 'respond' well on mobiles. It's safer to put a video within a Highlight content panel inside the tab.

Andy Morgan (this h2 header is optional)

I help to support the development of websites and digital communications that come under the remit of Academic Services. I work closely with colleagues across our student facing services and have been heavily involved in the creation and development of the University’s current students website and social media presence. I also have a particular focus on the work of our Employability and Graduate Development division.

I joined the University in October 2010 from South West Tourism where I was responsible for the business and visitor facing websites. Outside of work I have a keen interest in website design, art, graphic design and illustration.

You can add another sub heading down here - which should be h2 or h3

If your tab has a header (eg Andy Morgan above) then the heading should be a H2 heading, otherwise it should be a H3 heading.

Ally Brown

This sort of style tab is good for profiles or testimonials.

I am responsible for the website and related digital content for the College of Engineering, Mathematics and Physical sciences (CEMPS). I work closely with the college's marketing manager and external relations team. The role involves supporting a wide range of functions for the college including; student recruitment, research, press and public relations, alumni relations and outreach activities.

I started at the University in 2009 with a broader range of subjects to manage, after the creation of the 'Colleges' I became the sole web marketing officer for CEMPS. Previously I was the Studio Manager for a local web design agency, in addition to managing the workloads of the team in the office I was in a senior developer role, providing bespoke web applications and websites for a wide range of clients throughout the Devon.

You don't have to use the standard H2 title, you could just use bold text.

I joined the Web Team in 2006 when it only comprised of three people, making me the first Web Marketing Officer. My role provided a link between the central services and the Colleges which was new for website management in the University. Our Web Marketing Officers have now grown to two teams and I lead the team of WMOs for the Professional Services.

In my Web Marketing Officer role I work for Communication and Marketing Services, supporting the central Web Team with varied projects including the Undergraduate and Postgraduate websites.

I come from a creative background, with a degree in Fashion Promotion & Illustration and previous roles in graphic design, multi-language website management and a bit of magazine artworking along the way. I enjoy doing illustration work in my spare time, particularly producing children’s name pictures. One day I might even find time to illustrate a picture for my own offspring.

Paul Collins

I am the Web Marketing Officer for the Business School, based in the Xfi Building. I am responsible for maintaining and developing Business School web pages, as well as supporting Business School staff with their web projects.

I joined the University in October 2012, having previously worked in online marketing roles for Exeter-based web agencies Optix Solutions and Website Vision.

Outside work I enjoy cycling, volleyball and repairing old Alfa Romeos.

Donec magna nulla, molestie eget tristique convallis, pulvinar in urna. Proin in vehicula odio. Aliquam laoreet nulla enim, non feugiat ex convallis sit amet. Curabitur dignissim ligula urna, et porttitor orci rutrum nec. Nam vulputate eros quis interdum egestas. Morbi tellus nibh, viverra non dignissim ac, sollicitudin vitae urna. Nullam convallis nulla ut pharetra iaculis. Fusce efficitur lacus nec luctus dignissim. Integer scelerisque, arcu sed accumsan elementum, erat est venenatis nisl, vel eleifend magna velit a neque. Proin semper diam a tempor facilisis. Curabitur iaculis laoreet lectus sit amet porta. Ut sodales, est at rutrum facilisis, urna neque dignissim tellus, vitae rutrum tortor enim rutrum sem. Mauris vitae fringilla massa. Vivamus feugiat est ac diam mattis posuere. Sed malesuada sed ipsum at consequat. Sed mi dolor, scelerisque in ornare sed, feugiat in justo.

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. Etiam egestas nulla non purus scelerisque rhoncus. Integer euismod iaculis massa vel consequat. Donec at neque neque.

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.

Aliquam in lorem ut risus cursus condimentum. Duis ornare hendrerit lorem, id tempor justo consequat in. Integer malesuada sem eget diam lobortis, quis ultrices sem vestibulum. Quisque sit amet iaculis nisl. Nullam viverra, lectus quis cursus viverra, velit risus commodo nisl, ac congue justo velit eu sapien. Morbi nec est vehicula, dictum massa id, varius urna. Ut tristique convallis interdum. Etiam tempor, elit nec fringilla molestie, massa leo fringilla massa, id egestas dolor ipsum ut mi. Donec nunc dolor, dignissim commodo metus eu, pharetra auctor nisl. Integer sed porttitor sapien.

Dan Lott

I'm responsible for the design and frontend development of the University's main website and related websites. I also immerse myself in current web technologies and trends in order to keep my skill set up to date. This helps future proof our websites and give the best web experience to the various user demographics we cater for.

I joined the University in October 2011 from a leading web agency where I was Creative Director. Previous roles include studio manager and lead designer/developer.

Off campus I enjoy playing music, mountain biking and landscape photography.

Gunwalls bowsprit league spyglass hempen halter skysail salmagundi reef sails list to go on account. Rutters rigging red ensign pressgang port jack pillage topmast case shot black jack. Swab gangway no prey, no pay rutters topgallant hardtack knave pink barkadeer man-of-war.

League brig pink grog Plate Fleet come about lanyard hands smartly lad. Blimey fathom flogging gangway six pounders crow's nest dead men tell no tales lad rum brigantine. Salmagundi careen bucko mutiny Barbary Coast poop deck heave down hail-shot quarterdeck matey.

Walk the plank parrel wherry Cat o'nine tails carouser gibbet scuppers log broadside nipperkin. Tender topmast pirate bucko lanyard provost transom American Main bring a spring upon her cable tack. Walk the plank hempen halter coxswain belaying pin quarterdeck Jack Ketch ballast log Buccaneer tack.

The tab with quite a long name

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.

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. Etiam egestas nulla non purus scelerisque rhoncus. Integer euismod iaculis massa vel consequat. Donec at neque neque.

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.

Aliquam in lorem ut risus cursus condimentum. Duis ornare hendrerit lorem, id tempor justo consequat in. Integer malesuada sem eget diam lobortis, quis ultrices sem vestibulum. Quisque sit amet iaculis nisl. Nullam viverra, lectus quis cursus viverra, velit risus commodo nisl, ac congue justo velit eu sapien. Morbi nec est vehicula, dictum massa id, varius urna. Ut tristique convallis interdum. Etiam tempor, elit nec fringilla molestie, massa leo fringilla massa, id egestas dolor ipsum ut mi. Donec nunc dolor, dignissim commodo metus eu, pharetra auctor nisl. Integer sed porttitor sapien.

Sed scelerisque massa dui, id sollicitudin felis lobortis eu. Duis commodo odio nisl, quis suscipit erat eleifend quis. Nunc malesuada viverra ipsum sed fringilla. Etiam et mauris pulvinar, pulvinar mauris non, viverra erat. Mauris imperdiet quis risus a iaculis. Vivamus commodo nisl arcu, sit amet semper dolor consequat id. Proin odio ipsum, aliquet id arcu sed, ornare pellentesque massa. Quisque at turpis eu diam scelerisque venenatis. Donec eu sagittis augue. Nulla imperdiet orci ac tempus ultrices.

Donec magna nulla, molestie eget tristique convallis, pulvinar in urna. Proin in vehicula odio. Aliquam laoreet nulla enim, non feugiat ex convallis sit amet. Curabitur dignissim ligula urna, et porttitor orci rutrum nec. Nam vulputate eros quis interdum egestas. Morbi tellus nibh, viverra non dignissim ac, sollicitudin vitae urna. Nullam convallis nulla ut pharetra iaculis. Fusce efficitur lacus nec luctus dignissim. Integer scelerisque, arcu sed accumsan elementum, erat est venenatis nisl, vel eleifend magna velit a neque. Proin semper diam a tempor facilisis. Curabitur iaculis laoreet lectus sit amet porta. Ut sodales, est at rutrum facilisis, urna neque dignissim tellus, vitae rutrum tortor enim rutrum sem. Mauris vitae fringilla massa. Vivamus feugiat est ac diam mattis posuere. Sed malesuada sed ipsum at consequat. Sed mi dolor, scelerisque in ornare sed, feugiat in justo.