Features

  • 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

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
Image
Label

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.


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
Image
Label

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.

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.

Sign up for The Forge newsletter

Stay up to date on future versions of Foundry, as well as important news, updates and more!

This site is built using Foundry for RapidWeaver

© 2006-2016 Elixir Graphics | Contact Us