Tabs are multiple content sections (panels), accessible one at a time using control labels.

Copy: View demo


All components are built upon the CodyHouse Framework.

How to

Tabbed content is a useful component that groups related content, and organizes it using control labels so that only one content type is visible.

The class .tabs__control--selected is used to target the selected control, while the class .tabs__panel--selected is used to target the selected content panel.

⚠️ Important: make sure the value of the href attribute of the control label matches the id of the associated panel so that if Javascript is disabled, each label links to the appropriate panel.

Bug Report & Feedback

Get in touch: suggest a component or report a bug.

💌 Join our newsletter

Be the first to know when we ship something cool!