Tabs

Tabs are used for content related to the page content. Tabs let you give users additional content to explore, so don't use them for vital content. Tabs can contain text, images, tables and accordions.

Tabs example

Maecenas non imperdiet ipsum. Suspendisse nec placerat purus. Curabitur sollicitudin egestas nulla, vel scelerisque libero interdum at. Aliquam erat volutpat. Nam aliquet lacus odio, in laoreet est condimentum vel. Sed vitae tortor ac quam interdum ultrices. Proin consectetur ultrices turpis ut semper. Quisque vulputate ultricies aliquet. Etiam in laoreet turpis, quis malesuada turpis. Integer sagittis mauris sit amet eleifend pharetra.

Proin rutrum odio ante, congue ultrices lorem consectetur ac. Sed sagittis adipiscing sollicitudin. Aliquam erat volutpat. Pellentesque sit amet quam dolor. Duis vitae pharetra velit. Nunc consequat tempus aliquam. Donec pretium pellentesque eros, vel ultrices velit suscipit ac. In pretium cursus nibh, eu bibendum odio aliquet nec. Sed tincidunt, velit in auctor tempus, justo dolor porttitor metus, imperdiet accumsan nibh turpis auctor massa. Integer a metus aliquam, sollicitudin erat sed, lobortis metus. Morbi at augue sollicitudin sem egestas bibendum at a justo. Nam nec aliquet velit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu eros et tellus imperdiet posuere. Nullam in mi quis felis sagittis aliquet. Proin et faucibus massa, a tincidunt nulla. Sed a lacus eros. Fusce tempor non diam et consequat. Etiam sit amet ipsum nec sem pellentesque lacinia. Vestibulum luctus aliquam vestibulum.

Accordion title 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent placerat nec mauris eget cursus. Donec a sodales velit, id iaculis lacus. Curabitur faucibus velit nec enim laoreet ultrices. Proin ac orci nec lacus condimentum pharetra. Morbi tristique, nibh vitae euismod accumsan, lorem tellus auctor enim, in sodales orci nibh eu dolor. Proin in orci in lectus venenatis tincidunt eget vitae odio. Donec felis tortor, dignissim a tellus at, suscipit consequat augue. Nullam auctor tortor vitae odio fringilla, in suscipit dui sodales. Vivamus id tristique nibh. Morbi at luctus diam. Duis non ipsum non urna imperdiet gravida posuere a nulla.

Donec augue massa, gravida eget rhoncus imperdiet, consequat id purus. Aliquam lacinia enim quis nulla pretium dictum. Etiam blandit interdum augue quis dignissim. Vestibulum feugiat faucibus tincidunt. Donec convallis sem in nulla interdum semper. Donec dignissim porttitor lectus ac dignissim. Nunc sed nibh sit amet risus volutpat mollis. Nam id ante leo. Nam id erat id dui pretium tincidunt et vel magna. Sed orci neque, pretium at bibendum eu, ultrices ut odio. Proin sagittis diam non dui sollicitudin, id ornare tellus suscipit. Donec viverra magna et nisi malesuada laoreet. Vestibulum cursus magna eu nisl consectetur, in eleifend nisl blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam tristique nec turpis sit amet tristique. Vivamus viverra lobortis augue, et imperdiet justo pretium non.

Accordion title 2

Donec augue massa, gravida eget rhoncus imperdiet, consequat id purus. Aliquam lacinia enim quis nulla pretium dictum. Etiam blandit interdum augue quis dignissim. Vestibulum feugiat faucibus tincidunt. Donec convallis sem in nulla interdum semper. Donec dignissim porttitor lectus ac dignissim. Nunc sed nibh sit amet risus volutpat mollis. Nam id ante leo. Nam id erat id dui pretium tincidunt et vel magna. Sed orci neque, pretium at bibendum eu, ultrices ut odio. Proin sagittis diam non dui sollicitudin, id ornare tellus suscipit. Donec viverra magna et nisi malesuada laoreet. Vestibulum cursus magna eu nisl consectetur, in eleifend nisl blandit. Vestibulum ante ipsum primis in faucibus orci lu

In hac habitasse platea dictumst. Sed consequat mauris sit amet eros commodo, ut commodo dolor mollis. Pellentesque condimentum sollicitudin purus, quis blandit libero dignissim in. Integer ornare odio vel neque aliquet, non scelerisque justo ultricies. Donec vitae lorem eros. Pellentesque elit orci, molestie in nibh et, varius viverra nulla. Phasellus magna velit, blandit a neque et, scelerisque lobortis urna. Aenean mollis diam id ante molestie, ut ornare massa tempor. 

Accordion title 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent placerat nec mauris eget cursus. Donec a sodales velit, id iaculis lacus. Curabitur faucibus velit nec enim laoreet ultrices. Proin ac orci nec lacus condimentum pharetra. Morbi tristique, nibh vitae euismod accumsan, lorem tellus auctor enim, in sodales orci nibh eu dolor. Proin in orci in lectus venenatis tincidunt eget vitae odio. Donec felis tortor, dignissim a tellus at, suscipit consequat augue. Nullam auctor tortor vitae odio fringilla, in suscipit dui sodales. Vivamus id tristique nibh. Morbi at luctus diam. Duis non ipsum non urna imperdiet gravida posuere a nulla.

Donec augue massa, gravida eget rhoncus imperdiet, consequat id purus. Aliquam lacinia enim quis nulla pretium dictum. Etiam blandit interdum augue quis dignissim. Vestibulum feugiat faucibus tincidunt. Donec convallis sem in nulla interdum semper. Donec dignissim porttitor lectus ac dignissim. Nunc sed nibh sit amet risus volutpat mollis. Nam id ante leo. Nam id erat id dui pretium tincidunt et vel magna. Sed orci neque, pretium at bibendum eu, ultrices ut odio. Proin sagittis diam non dui sollicitudin, id ornare tellus suscipit. Donec viverra magna et nisi malesuada laoreet. Vestibulum cursus magna eu nisl consectetur, in eleifend nisl blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam tristique nec turpis sit amet tristique. Vivamus viverra lobortis augue, et imperdiet justo pretium non.

Accordion title 4

Maecenas id diam ipsum. Sed elementum diam placerat tempus faucibus. Suspendisse a massa fringilla, lacinia est ut, aliquam augue. Mauris nibh turpis, imperdiet id aliquam sit amet, euismod in massa. Integer facilisis diam at tristique varius. Integer facilisis arcu sem, quis dignissim eros consectetur eu. Sed tincidunt pharetra metus ac sollicitudin. Suspendisse at porttitor orci, non tincidunt purus. Donec aliquam id leo in aliquet. Duis posuere euismod arcu quis condimentum. Suspendisse a dolor turpis. Nunc et accumsan elit, in accumsan ligula. Aenean volutpat dui eget urna accumsan, ut sodales massa placerat. Donec vestibulum fermentum sem at euismod. In imperdiet porta augue.

In hac habitasse platea dictumst. Sed consequat mauris sit amet eros commodo, ut commodo dolor mollis. Pellentesque condimentum sollicitudin purus, quis blandit libero dignissim in. Integer ornare odio vel neque aliquet, non scelerisque justo ultricies. Donec vitae lorem eros. Pellentesque elit orci, molestie in nibh et, varius viverra nulla. Phasellus magna velit, blandit a neque et, scelerisque lobortis urna. Aenean mollis diam id ante molestie, ut ornare massa tempor. 

Proin rutrum odio ante, congue ultrices lorem consectetur ac. Sed sagittis adipiscing sollicitudin. Aliquam erat volutpat. Pellentesque sit amet quam dolor. Duis vitae pharetra velit. Nunc consequat tempus aliquam. Donec pretium pellentesque eros, vel ultrices velit suscipit ac. In pretium cursus nibh, eu bibendum odio aliquet nec. Sed tincidunt, velit in auctor tempus, justo dolor porttitor metus, imperdiet accumsan nibh turpis auctor massa. Integer a metus aliquam, sollicitudin erat sed, lobortis metus. Morbi at augue sollicitudin sem egestas bibendum at a justo. Nam nec aliquet velit.

Duis egestas turpis neque, commodo ultricies felis auctor ut. Nullam vestibulum lacinia imperdiet. Phasellus vel pretium sem. Etiam porttitor eget nisl faucibus tempus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam id leo vitae leo varius feugiat ut non metus. In nec ornare diam. Integer leo ante, porta et auctor sit amet, adipiscing in erat. Quisque eget lectus tellus. Morbi eu viverra tellus. Aenean justo lorem, varius feugiat mattis vel, sodales sagittis sem. Maecenas volutpat dolor vel velit consectetur sodales. Morbi in dolor imperdiet, commodo diam sed, gravida mauris. Maecenas eget mi tempor, ornare lacus non, condimentum sapien. Nunc vel luctus urna. Quisque ac odio risus. 

Proin rutrum odio ante, congue ultrices lorem consectetur ac. Sed sagittis adipiscing sollicitudin. Aliquam erat volutpat. Pellentesque sit amet quam dolor. Duis vitae pharetra velit. Nunc consequat tempus aliquam. Donec pretium pellentesque eros, vel ultrices velit suscipit ac. In pretium cursus nibh, eu bibendum odio aliquet nec. Sed tincidunt, velit in auctor tempus, justo dolor porttitor metus, imperdiet accumsan nibh turpis auctor massa. Integer a metus aliquam, sollicitudin erat sed, lobortis metus. Morbi at augue sollicitudin sem egestas bibendum at a justo. Nam nec aliquet velit.

Maecenas non imperdiet ipsum. Suspendisse nec placerat purus. Curabitur sollicitudin egestas nulla, vel scelerisque libero interdum at. Aliquam erat volutpat. Nam aliquet lacus odio, in laoreet est condimentum vel. Sed vitae tortor ac quam interdum ultrices. Proin consectetur ultrices turpis ut semper. Quisque vulputate ultricies aliquet. Etiam in laoreet turpis, quis malesuada turpis. Integer sagittis mauris sit amet eleifend pharetra.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu eros et tellus imperdiet posuere. Nullam in mi quis felis sagittis aliquet. Proin et faucibus massa, a tincidunt nulla. Sed a lacus eros. Fusce tempor non diam et consequat. Etiam sit amet ipsum nec sem pellentesque lacinia. Vestibulum luctus aliquam vestibulum.

Proin rutrum odio ante, congue ultrices lorem consectetur ac. Sed sagittis adipiscing sollicitudin. Aliquam erat volutpat. Pellentesque sit amet quam dolor. Duis vitae pharetra velit. Nunc consequat tempus aliquam. Donec pretium pellentesque eros, vel ultrices velit suscipit ac. In pretium cursus nibh, eu bibendum odio aliquet nec. Sed tincidunt, velit in auctor tempus, justo dolor porttitor metus, imperdiet accumsan nibh turpis auctor massa. Integer a metus aliquam, sollicitudin erat sed, lobortis metus. Morbi at augue sollicitudin sem egestas bibendum at a justo. Nam nec aliquet velit.

When to use tabs

Some content that might make sense in tabs:

  • Links to similar content elsewhere.
  • Relevant contact information.
  • Links to partners or external resources, etc.

Guidelines for using tabs

  • Content should be under 3000 characters or less than the height of an average browser window. If you have more content than that, consider moving it to a separate page.
  • Tab blocks shouldn't contain more than six panels or the tab titles will go over the width of the block. If you have more content, consider moving the content to a separate page.
  • You can use accordion blocks inside tab panels. Add with a brief paragraph or two for context and try to stick to the height restriction above.
  • Two levels of accordions inside a tab panel are not allowed. If the content is that complex, it should be moved to a separate page.
  • Tabs are always placed at the bottom of the page.

How-to

(These tutorials are on University Systems website.)