Skip to main content

Tabs

Tabs help users quickly find information within a page. Tabbed content makes the page compact and easy to scan.

Tabs are familiar and intuitive for most users. But only use tabs only when users don't need to see and compare content at the same time.

Content should be organized into logical and parallel tabs with short labels so users can see what they'll find in each tab. One- or two-word labels work best. Present tabs across a single row. If longer labels or many tabs are needed, consider using an accordion.

Overview

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et elit arcu. Vestibulum rutrum turpis ipsum, sed posuere augue eleifend vel. Ut rhoncus tellus et orci consectetur, et tempus arcu interdum. Morbi luctus diam enim, ut vulputate enim semper eget. Curabitur egestas ac odio et pharetra. Aliquam eget lorem viverra, pulvinar ligula in, pharetra ipsum. Mauris sed ornare urna, a tincidunt justo. Aliquam nec cursus metus. Morbi scelerisque ornare ex, quis feugiat justo porttitor at. Vivamus fermentum rhoncus ipsum nec vulputate. Ut vel vulputate nibh.

Materials

Quisque urna urna, vestibulum vitae leo in, volutpat accumsan lorem. Proin mattis velit ut mauris iaculis, vitae consectetur dolor rhoncus. Morbi ullamcorper nulla id dui accumsan congue. Praesent auctor id quam quis tristique. Nulla eleifend vehicula nisl eu vehicula. Integer massa lacus, maximus at luctus eu, viverra consequat neque. Nunc at tempor ipsum. Duis vel est et nunc consequat hendrerit. Praesent id nisl at nunc ornare condimentum.

Methods

Nam nulla est, accumsan ut rhoncus sit amet, facilisis eu nisl. Sed sagittis nibh mollis risus vulputate, sit amet feugiat odio vestibulum. Duis eget elementum justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam lorem mi, semper non ligula ut, viverra dapibus dolor. Aliquam ultricies odio elementum ante suscipit rhoncus. Mauris sollicitudin velit vel justo volutpat, at pulvinar felis varius. In eu dolor est. Integer eget condimentum dolor. Fusce hendrerit nisl neque, ac laoreet velit interdum a. Phasellus auctor tincidunt ipsum, quis consectetur orci ultricies quis. Morbi imperdiet, nulla sit amet dapibus eleifend, enim eros dapibus enim, eget maximus lectus velit eget nunc. Donec eu tortor hendrerit, gravida ipsum vel, lobortis risus. Morbi eget varius turpis.


Share