Vertical Tabs

Thunder Pack addon stack

Generate gorgeously styled, vertically oriented tabbed sections to organize and tidy up your pages. The tabs even collapse down into buttons at the mobile breakpoint.

  • 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

Meetings Photography Exploring
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.

Child Stack

Section

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

Child Stack

Tab

Label
Choose to include a text label on your Tab.

Icon
Choose to include an icon on your Tab.