Tabs

Create file-folder like interfaces for organizing your page's content in an easy to navigate package for your visitors.

Examples

File Folder Tabs

This example shows the standard, default mode for the Tabs tool. We've opted for the full-width tabs option here as well as the decorative flared bottoms. Inserted in each tab is some mocked up content including columns, text, images and more.

Header

Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.

Header

Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.

Header

Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.

Header

Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.

Header

Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.

Header

Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.

28_shark

You’re gonna need a bigger boat.

Tabbed content allows you to optimize the space on your page without sacrificing the amount of information presented to your visitors. Tabs are a bit like an accordion in a way, but with different organizational principles.

Tabs also put your visitor in control of the content they want to view and that they feel applies to, or interests them.

Settings

Parent Tool

Edit Mode

Edit Mode Title

Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.

General

Mode

The Tabs tool has two different modes to choose from, which modifies how the tabs are presented and styled. You can choose from the traditional tabs mode, which creates file folder like buttons, or the pills mode, which styles the tabs in a more button-like way.

Fill Width with Tabs

This feature expands the tabs to make sure they, as a group, take up the whole width of the parent container. They will responsively resize to fit the parent container as it changes.

Flared Tab Bottom

Adds a subtle, rounded bottom to the tabs. This is stylistic only. It is not applied to the Pills Mode, only Tabs Mode.

Tab Styling

Normal Text

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the text of the tabs when not active or hovered over. You're also provided an option to choose a custom one-off color as well.

Hover / Active Text

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the text of the tabs when they are the active or hovered over tab. You're also provided an option to choose a custom one-off color as well.

Hover Background

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the background of the tabs when hovered over by the visitor. You're also provided an option to choose a custom one-off color as well.

Active Background

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the background of the tabs when the active tab item. You're also provided an option to choose a custom one-off color as well.

Borders

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the border of the tabs. You're also provided an option to choose a custom one-off color as well.

Pill Styling

Normal Text

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the text of the pill button tabs when not active or hovered over. You're also provided an option to choose a custom one-off color as well.

Hover Text

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the text of the pill button tabs when hovered over. You're also provided an option to choose a custom one-off color as well.

Active Text

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the text of the pill button tabs when it is the active item. You're also provided an option to choose a custom one-off color as well.

Normal Background

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the background of the pill button tabs when not active or hovered over. You're also provided an option to choose a custom one-off color as well.

Hover Background

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the background of the pill button tabs when hovered over. You're also provided an option to choose a custom one-off color as well.

Active Background

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the background of the pill button tabs when it is the active item. You're also provided an option to choose a custom one-off color as well.

Rounded Corners

Foundry provides 5 different presets for rounded corners. These can be found throughout Foundry's various tools. You're also able to remove the roundness of the corners by setting this to none, or provide your own custom value for the border radius, or rounded corners. When using Custom mode you can set a different value on each of the four corners.

Content Styling

Padding

We've included several preset padding options here for the main content section of the Tabs tool. You can choose from presets that affect all sides of the content area, or opt for presets that affect just the top and bottom of the content container.

If you need something a bit more detailed, or wish to adjust the padding on a tab-by-tab basis, you can choose the None option and instead supply your padding by adding a Spacing tool to each tab's content section manually, giving you far more granular control.

Borders

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the border main content area of the Tabs tool. You're also provided an option to choose a custom one-off color as well.

This deaults to none, disabling the content area's border.

Background

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the background main content area of the Tabs tool. You're also provided an option to choose a custom one-off color as well.

HTML Comment

HTML Comment

Enabling this feature adds an HTML comment to the exported code to indicate the name of the tool being used here. This is helpful to both yourself and others when troubleshooting, or inspecting the code. This is enabled by default.

Custom

This field allows you to replace the default HTML Comment with your own text.

CSS

Classes

Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.

Child Item - Tab

General

Tab Label

Here you'll provide the label that will appear on the tab or pill button. These are the items that the visitor clicks to transition from one tabbed content area to the next.

CSS

Classes

Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.