Tabs
About this component
Like expandable sections, tabs are a great way to display large amounts of information in a way that doesn’t overwhelm users. They are best for displaying sequential content, or for comparing content for related subjects (such as campuses).
Tabs can include sub-headings, paragraphs, lists, buttons, expandable sections, images, icons, videos, tables, etc. Don’t use more tabs or callouts inside of tabs.
You can link to the page with any individual tab open – just open the tab you want and copy the URL (it will look like pcc.edu/site/page/#tab-name).
Styling
The number of tabs is limited by their length – they shouldn’t wrap to a second line except on small screens. The tabs are turquoise and look like folder tabs. The current tab is slightly darker and taller than the inactive tabs.
Responsive behavior for Tabs
Each tab will be on its own line, with a “plus” icon to indicate you can open/expand the information. By default, the first tab is open when the page loads on phones. The tabs then behave like an accordion, where each tab’s content opens below the corresponding heading. Only one tab can be open at a time, so if another is opened the previous tab will close.
Try to avoid tabs that switch to this small-screen layout all large and on most medium screens.
How to use for Tabs
Use the tabs shortcode.
Development info for Tabs
Stylesheet location:
/_source/styles/components/_tabs.scss
Javascript adds all the extra functionality, styles, and accessibility to make the tabs. You only need to include the headings and corresponding content.
<div class="tabs"> <h4>Heading 1</h4> <!-- or whatever heading level is needed --> <p>Content</p> <!-- or whatever content is needed --> <h4>Heading 2</h4> <!-- same level as above --> <p>Content</p> ... </div>
Example of Tabs
Cascade
705 N. Killingsworth St. Portland, OR 97217 | 971-722-6111
- campus map for Cascade
- directions for Cascade
- TriMet for Cascade
- map of accessible building features for Cascade
Rock Creek
17705 NW Springville Rd. Portland, OR 97229 | 971-722-6111
- campus map for Rock Creek
- directions for Rock Creek
- TriMet for Rock Creek
- map of accessible building features for Rock Creek
Southeast
2305 SE 82nd and Division, Portland, OR 97216 | 971-722-6111
- campus map for Southeast
- directions for Southeast
- TriMet for Southeast
- map of accessible building features for Southeast
Sylvania
12000 SW 49th Ave. Portland, OR 97219 | 971-722-6111