Tabs
Build beautiful tabbed interfaces to clean up and organize your pages. Tabs is easy to use and super simple to customize.
- Select Tab or Pill shaped tabs
- Style your tabs, and tab content to match the rest of your page
- Set the alignment for your tabs
- Add a border to your tabbed content area
- Please Note: Features on this page marked with the purple moon icon are compatible with Foundry's Dark Mode.
Example
Header
Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa ante quis quis dolor aliquet. Lorem nibh ante quis ipsum dolor sit amet sapien.
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Header
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
- Bulleted List Item
- Bulleted List Item
- Bulleted List Item
- Bulleted List Item
- Bulleted List Item
- Bulleted List Item
Header
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Using Tabs
Tab Styling
Type
You can choose between a tabbed or pill style layout for your Tabs stack. We show an example of both above.
Style
Choose between the Primary style or a Custom style for your tabs. The Primary style, set in the Control Center stack, is used for the Pill tab type. If using the Tabs type the tabs will default to a nice white with grey border. If you choose Custom though you can modify the Active tabs background and text as well as the unselected tabs’ text colors.
Alignment
Allows you to set the justification of the tabs. You can set the alignment to Left, Center or Right. This affects all tabs within the Tabs stack.
Beginning with Foundry v2 you can set the alignment differently at each of the three individual breakpoints. v2
Tab Content
Padding
Adjust the padding within the content section of the Tabs stack. You can adjust it on all sides at once, or do so to each side individually.
Style
Customize the background of the Tabs stack’s content area.
Content border
Add a border around the perimeter of the content section of the Tabs stack and choose the color you wish the border to be.
Advanced
Collapse Tab Contents
Allows you to clean up your Edit Mode workspace a little by collapsing the content of your individual tabs. Enable this feature when you're not actively working on your Tabs stack to save yourself some space in Edit Mode.