Tabs
Tabs are used to organize and navigate between sections of content. They feature a horizontal or a vertical list of section text labels with a content panel below or to the right of the component.
Sample component
Open tabs
Tab heading 1
Mi ut adipiscing nec porttitor a dis tempor mauris maecenas ullamcorper nisi vulputate mus massa augue et parturient felis luctus adipiscing.Vivamus suspendisse fringilla a dictum justo diam vestibulum et mollis magna mus natoque a potenti nam.
Tab heading 2
Fugiat ullamco qui occaecat Lorem qui pariatur quis cillum. Duis commodo dolor ad anim cillum. Incididunt elit ullamco in laborum in. Dolor ipsum laborum nisi exercitation do aute velit. Elit veniam velit qui ex ullamco.
Tab heading 3
Erat malesuada a nisl ornare nam per urna in nam conubia vulputate ullamcorper felis vestibulum leo massa massa tincidunt adipiscing porttitor cubilia mattis semper ultrices felis habitasse a semper a.Condimentum ridiculus nisl ullamcorper adipiscing natoque adipiscing quam litora a suspendisse a torquent tincidunt diam ornare at.
Box tabs
Tab heading 1
Mi ut adipiscing nec porttitor a dis tempor mauris maecenas ullamcorper nisi vulputate mus massa augue et parturient felis luctus adipiscing.Vivamus suspendisse fringilla a dictum justo diam vestibulum et mollis magna mus natoque a potenti nam.
Tab heading 2
Fugiat ullamco qui occaecat Lorem qui pariatur quis cillum. Duis commodo dolor ad anim cillum. Incididunt elit ullamco in laborum in. Dolor ipsum laborum nisi exercitation do aute velit. Elit veniam velit qui ex ullamco.
Tab heading 3
Erat malesuada a nisl ornare nam per urna in nam conubia vulputate ullamcorper felis vestibulum leo massa massa tincidunt adipiscing porttitor cubilia mattis semper ultrices felis habitasse a semper a.Condimentum ridiculus nisl ullamcorper adipiscing natoque adipiscing quam litora a suspendisse a torquent tincidunt diam ornare at.
Component status
| Not coded yet | RHDS repo | Studio repo | PFE repo | Drupal/FTS repo | Adobe Target repo | Other repo | Row last updated | Notes/pattern/usage | Component doc | |
|---|---|---|---|---|---|---|---|---|---|---|
| Tabs - horizontal, open | x | x | x | 6/10/20 | ||||||
| Tabs - horizontal, boxed | x | x | x | 6/10/20 | ||||||
| Tabs - vertical, open | x | x | x | 6/10/20 | ||||||
| Tabs - vertical, boxed | x | x | x | 6/10/20 |
Demos
View a live version of this component and see how it can be customized.
Feedback
To give feedback about anything on this page, contact us.
Foundations
To learn how to use our other components in your designs, visit the Elements section.
Red Hat legal and privacy links
- About Red Hat
- Jobs
- Events
- Locations
- Contact Red Hat
- Red Hat Blog
- Diversity, equity, and inclusion
- Cool Stuff Store
- Red Hat Summit
Red Hat legal and privacy links
