Tabs
Tabs can be an alternative to using an accordion. How do you decide between an accordion and tabs? Tabs are best used when there are less than four categories. In mobile view, tabs are viewed vertically with all of the titles listed first, and their information below. This can make it hard for a mobile user to find information. We recommend using tabs in a Full row. Below are a few examples of ways to use the Tabs snippet.
Tabs in a Full Row
Note that tab panel title fonts will need to be changed to size 14. Below, the first panel title is in size 14, but the other titles are in the default size and look very small. Make sure there aren't any extra spaces in your title box and within your information panes.
Vertical Option
Nullam blandit magna consequat luctus scelerisque. Integer convallis molestie tincidunt. Integer metus neque, dictum id urna ac, tempus venenatis mauris. In eros erat, posuere eget nunc sit amet, luctus efficitur eros.
- Vestibulum scelerisque venenatis neque quis interdum. Etiam cursus vestibulum nisi et tincidunt. Praesent ac fringilla lacus. Praesent cursus varius aliquet. Suspendisse vel rhoncus turpis, id fermentum eros.
- Phasellus tincidunt, erat id finibus mollis, ligula ligula sagittis nisi, eu convallis risus metus ut odio. Pellentesque ultrices, lorem eget ultricies tempor, ex lectus tincidunt quam, nec ultricies tortor eros sit amet nisl.
- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus ut nisi vestibulum, tincidunt lectus a, tempor enim. Sed non nisi ut felis blandit suscipit. Mauris eget enim quam. Quisque in faucibus nisl.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet ullamcorper lacus, in tincidunt ex. Cras varius turpis ac tempus congue. Quisque fermentum maximus risus id gravida. Integer ante nulla, vestibulum vitae diam nec, dignissim lobortis sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget feugiat sapien. Curabitur lobortis enim vel luctus rhoncus. Maecenas porta pellentesque risus tincidunt condimentum. Quisque ornare pulvinar ipsum eget malesuada.
Nulla venenatis augue non ante semper, vel facilisis neque imperdiet. Sed sem nulla, interdum vel augue ut, ultrices egestas magna.
- Duis efficitur lacinia lacus, et rutrum dolor. Nam pulvinar accumsan imperdiet. Etiam quam quam, dapibus et sapien id, pretium auctor ipsum.
- Pellentesque cursus luctus massa. Aliquam lacus odio, condimentum ut auctor nec, luctus quis justo. Donec fringilla congue orci a aliquam.
- Nulla facilisi. Aliquam laoreet eu leo a egestas. Aenean at hendrerit erat. Nulla efficitur lacinia orci, eget imperdiet justo maximus ut.
Horizontal Option
You can also use horizontal tabs, but note that if there are too many panel titles, they will be dropped down to a second level.
Nullam blandit magna consequat luctus scelerisque. Integer convallis molestie tincidunt. Integer metus neque, dictum id urna ac, tempus venenatis mauris. In eros erat, posuere eget nunc sit amet, luctus efficitur eros.
- Vestibulum scelerisque venenatis neque quis interdum. Etiam cursus vestibulum nisi et tincidunt. Praesent ac fringilla lacus. Praesent cursus varius aliquet. Suspendisse vel rhoncus turpis, id fermentum eros.
- Phasellus tincidunt, erat id finibus mollis, ligula ligula sagittis nisi, eu convallis risus metus ut odio. Pellentesque ultrices, lorem eget ultricies tempor, ex lectus tincidunt quam, nec ultricies tortor eros sit amet nisl.
- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus ut nisi vestibulum, tincidunt lectus a, tempor enim. Sed non nisi ut felis blandit suscipit. Mauris eget enim quam. Quisque in faucibus nisl.
Nulla venenatis augue non ante semper, vel facilisis neque imperdiet. Sed sem nulla, interdum vel augue ut, ultrices egestas magna.
- Duis efficitur lacinia lacus, et rutrum dolor. Nam pulvinar accumsan imperdiet. Etiam quam quam, dapibus et sapien id, pretium auctor ipsum.
- Pellentesque cursus luctus massa. Aliquam lacus odio, condimentum ut auctor nec, luctus quis justo. Donec fringilla congue orci a aliquam.
- Nulla facilisi. Aliquam laoreet eu leo a egestas. Aenean at hendrerit erat. Nulla efficitur lacinia orci, eget imperdiet justo maximus ut.
Tabs in a Heavy Left/Right Row
Tabs in a Heavy Left/Right Row
Obviously using tabs in a heavy left/right row is going to squish the information. This is not the ideal row option to use tabs. Only use the vertical option if you have relatively short information to display, such as a bulleted list of names, etc., and short panel titles.
Vertical Option (Not Ideal)
This is where you will put your content for the first panel.
Horizontal Option (Better use of space)
If you are going to use a heavy left/right row with tabs, the horizontal option might be best. It gives more space to display the information inside each window.