Features

  • Build vertically oriented tabbular sections of content.
  • Opt to scroll upwards when a tab is clicked.
  • Style your tabbed content and tabs to match your site.
  • Add drop shadows, borders and more.

Example

Image

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.

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.

Image

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

Image

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.

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 Vertical Tabs

General

Remove Base Margin
Allows you to disable the preset standard spacing that is applied to the bottom of the stack.

Rounded Corners
Set the roundness of the Vertical Tabs stack container.

Drop Shadow
Allows you to add a customizable drop shadow to the Display stack. You can adjust the shadow size, vertical and horizontal offset as well as its color.

Border Color
Allows you to set the border color that surrounds the stack and the tab button dividers.

Tabs

Color Pickers
The Vertical Tabs stack allows you to greatly customize the color of its tabs, setting a background, icon and text color for the Normal, Active and Hover states. You can also set a background color for the filler space below the tabs as well.

Active Pointer
When enabled this feature adds an arrow pointer to the active tab.

Label Alignment
Aligns the text labels within the tabs.

Content

Padding
Use this control to set the padding around the content within each Section of content. You can set it uniformly or adjust the padding on each side individually.

Scroll Upwards

Scroll Upwards on Click
When enabled the stack will scroll the page upwards when a tab is clicked until the top of the Vertical Tabs stack is at the top of the page.


Section (child stack)

General

Background Type
Choose your background style for each section of content. You may choose from a solid color, gradient or use an image.


Tab (child stack)

General

Label
Choose to include a text label on your Tab.

Icon
Choose to include an icon on your Tab.

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-2018 Elixir Graphics | Contact Us