Foundation Tab Layout Section

Foundation Tab Layout Section

Last updated 07.23.24

Sections are the page building frameworks that hold widgets. This Foundation Tab Layout section automatically creates a visual information navigation interface based on file folder tabs. This allows for a great deal of information to be presented in a compact space. 

  • Holds widgets inside a tabbed interface 
  • Provides one or two columns of tabs 
  • Key properties are the number of tabs (maximum 10), background color, margins and padding 

Related Links & Videos

How to add a Foundation Tab Layout Section

1. Select where on the page you would like add a section 
2. Click on the gray plus add section icon. Hover over and click to select Foundation Tab Layout 
3. A preliminary Foundation Tab Layout appears on the page. Use the gear-shaped properties icon to adjust the 
    settings. 

Foundation Tab Layout Section Properties

5. In the Foundation Tab Layout Section properties pop up adjust the number of columns, their width, margins and padding.
6. Click Apply button to update the widget with selected properties. The properties pop up will automatically close.
 

How to add content to a Tab

1. Open pane where you want the widget to appear 
2. Click on the blue plus add widget icon  
3. Select the widget from the widget pop up and adjust its properties as usual 
4. Click Apply button 

How to delete the Foundation Tab Layout Section

Hover over the Foundation Tab Layout Section until it displays the properties and trash icons and click on the trash icon to delete. 

How to reposition the Foundation Tab Layout Section

Hover over the Foundation Tab Layout Section until it displays the grab icon on the left. Simply drag and drop in a new location. 
 

How to change section types

Hover over the Foundation Tab Layout Section until it displays the change section type icon. Click to select.

Foundation Tab Layout Section Properties


PROPERTYDESCRIPTION
SELECT TAB DESIGN 
Number of Columns
Select from 1or 2 columns
Cell 1 Width (Large)
Cell 1 Width (Medium)
Cell 1 Width (Small)
Select from sizes :
  • 1 (8%)
  • 2 (16%)
  • 3 (25%)
  • 4 (33%)
  • 5 (42%)
  • 6 (50%)
  • 7 (58%)
  • 8 (66%)
  • 9 (75%)
  • 10 (83%)
  • 11 (92%)
  • 12 (100%)
Cell 2 Width (Large)
Cell 2 Width (Medium)
Cell 2 Width (Small)
This setting appears if 2-Column Tab Design is selected
Select from sizes :
  • 1 (8%)
  • 2 (16%)
  • 3 (25%)
  • 4 (33%)
  • 5 (42%)
  • 6 (50%)
  • 7 (58%)
  • 8 (66%)
  • 9 (75%)
  • 10 (83%)
  • 11 (92%)
  • 12 (100%)
Tab Position  Select from:
  • Left 
  • Right
SELECT TAB INFORMATION
Use in Tab

Select from:
  • Single Column
  • Both Column (for the two-column tab design only)

FIRST SECTION
Number of Tabs
Select from a minimum of 2 tabs to a maximum of 10 tabs
Tab [1-10] TitlesEach tab has a variety of properties to set individually. Enter the title for each of the tabs in your tabbed layout. The more tabs in your layout, the shorter the titles should be to fit in a tidy way.
Tab [1-10] CSSCode provided by the Atlas development team to achieve custom effects
Tab [1-10] Columns Each individual tab has the ability to display one or two columns of content inside the tab. Select from 1-2 columns. Each of these columns will display the blue add widget icon to build content.
Cell [1 or 2] Width (Large)
Cell [1 or 2] Width (Medium)
Cell [1 or 2] Width (Small)
Selecting to have two columns inside a tab requires the width settings be defined in the same way they are for a grid
  • 1 (8%)
  • 2 (16%)
  • 3 (25%)
  • 4 (33%)
  • 5 (42%)
  • 6 (50%)
  • 7 (58%)
  • 8 (66%)
  • 9 (75%)
  • 10 (83%)
  • 11 (92%)
  • 12 (100%)

MarginUse margins to increase spacing between the Foundation Tab Layout Section and other sections on the page. This is helpful to provide visual room between elements and increase readability.

Top
User can select from 1-5 rems to increase spacing above the tabbed layout

Bottom
User can select from 1-5 rems to increase spacing below the tabbed layout

Right
User can select from 1-5 rems to increase to the right of the tabbed layout

Left
User can select from 1-5 rems to increase spacing to the left of the tabbed layout
PaddingUse padding to increase spacing within the Foundation Tab Layout Section background area. This is especially useful when using a background color to provide content grouping and visual space for readability.

Top
User can select from 1-5 rems to increase room in the top of the tabbed layout background area

Bottom
User can select from 1-5 rems to increase room in the bottom of the tabbed layout background area

Right
User can select from 1-5 rems to increase room in the right of the tabbed layout background area

Left
User can select from 1-5 rems to increase room in the left of the tabbed layout background area
Show Before AfterCheck to reveal content grid cells before and after tabbed section. Each of these has the blue add widget icon for adding additional related content. Typically used for the WYSIWYG widget to add title and descriptive information.
Tab Title CSSCode provided by the Atlas development team to achieve custom effects
Tab Panel CSSCode provided by the Atlas development team to achieve custom effects
Tab Container CSSCode provided by the Atlas development team to achieve custom effects
Enable BackgroundCheck to enable background for entire section filling the full-width of the page
Background Color The background color attribute effects the color behind the tabbed layout to the full width of the page. Initially, Default is selected, which is no color added. Select from your custom brand colors or grayscale options from the menu. Additionally, you can select any color by adding the hexidecimal color code. Below is the list of Background colors that can be selected:
  • Default (None) 
  • Primary
  • Primary Color - Light
  • Primary Color - Dark
  • Secondary
  • Secondary - Light
  • Secondary - Dark
  • Gradient
  • White
  • Light Gray
  • Medium Gray
  • Dark Gray
  • Black 
  • Custom (enter color in hex format – ex. #2c6090)
Background Image SmallClicking the Select button opens a dialog box allowing you to select an image via the Media Library Application.

Image should not be more than 100kb in file size.
Background Image MediumClicking the Select button opens a dialog box allowing you to select an image via the Media Library Application. Image should not be more than 100kb in file size.
Background Image LargeClicking the Select button opens a dialog box allowing you to select an image via the Media Library Application. Image should not be more than 100kb in file size.

Examples

One Column Foundation Tab Layout

In this example we have three tabs in one column full-width. Note that each tab can contain our wide variety of widgets, added by clicking the blue plus icon. The standard tab style out of the box is rather simple. Connect with your Atlas team to style the tabbed interface.

Cotton plant

Feature Large A Widget

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Use this section layout with a variety of different widgets! Below is a Feature List Widget.

Applications

ATLAS applications are powerful databases, dashboards and creation tools for creating, categorizing and managing the data that feeds into many custom widgets. 

Pages

Page Types could be more properly defined as page templates. They are added to the site from within the Pages Application. 

Sections

Sections are the page building frameworks that hold widgets. They form the underlying structure of your page. There are three types of section.

Widgets

Widgets are plug and play components you use to build and edit your website. They are designed to look great and be simple to use no matter what their function. 

Add a second cell within a tab to break up content. This tab is using the WYSIWYG & Image Editable widgets. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Sunrise over farm

Two Column Foundation Tab Layout

In this example we have a two column layout with an image on the left and three tabs to the right.

WYSYWYG Widget
Arcu cursus vitae congue mauris rhoncus aenean vel. Faucibus in ornare quam viverra orci. Urna cursus eget nunc scelerisque. Pharetra magna ac placerat vestibulum lectus mauris ultrices eros in. Ac odio tempor orci dapibus ultrices in iaculis nunc. Viverra aliquet eget sit amet tellus. In tellus integer feugiat scelerisque varius morbi enim. Posuere sollicitudin aliquam ultrices sagittis. Dolor morbi non arcu risus. In hendrerit gravida rutrum quisque non.

Ultricies mi eget mauris pharetra et ultrices neque. Magna fringilla urna porttitor rhoncus dolor purus non enim praesent. Vestibulum morbi blandit cursus risus at ultrices. Sed euismod nisi porta lorem mollis aliquam. Tempus imperdiet nulla malesuada pellentesque elit eget gravida cum. Dis parturient montes nascetur mus. Facilisi morbi tempus iaculis urna id volutpat lacus. Diam vel quam elementum pulvinar etiam. Sed faucibus turpis in eu.

WYSYWYG Widget
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Pulvinar sapien et ligula ullamcorper. Arcu non sodales neque sodales ut. At ultrices mi tempus imperdiet nulla malesuada. Lobortis mattis aliquam faucibus purus. Nec ultrices dui sapien eget mi proin sed libero enim. Sem nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Sodales ut etiam sit amet nisl purus in mollis. Diam quam nulla porttitor massa id neque aliquam vestibulum. Massa sed elementum tempus egestas sed sed risus pretium quam. Tortor condimentum lacinia quis vel eros.

WYSYWYG Widget
At lectus urna duis convallis convallis. Eget magna fermentum iaculis eu non diam phasellus. Sit amet facilisis magna etiam. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque. Placerat in egestas erat imperdiet. Vitae aliquet nec ullamcorper sit amet. Quam lacus suspendisse faucibus interdum posuere lorem. Non blandit massa enim nec dui nunc mattis enim. Pellentesque adipiscing commodo elit at imperdiet. Feugiat pretium nibh ipsum consequat nisl vel pretium.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut diam. Amet volutpat consequat mauris nunc congue nisi vitae. Lacus viverra vitae congue eu. Purus in mollis nunc sed id semper. Quam vulputate dignissim suspendisse in est. Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Gravida in fermentum et sollicitudin ac orci phasellus.

Horse standing in field

Two Column Foundation Tab Layout

In this example we have a two column layout with two tabs in each column and a background color.

Two

Malesuada Pellentesque Elit

Consequat interdum varius sit amet mattis vulputate. Neque egestas congue quisque egestas diam. Vitae congue eu consequat ac felis donec. Massa tincidunt nunc pulvinar sapien et ligula. Risus nec feugiat in fermentum posuere urna nec tincidunt. Sed pulvinar proin gravida hendrerit lectus. Et netus et malesuada fames. Eu non diam phasellus vestibulum lorem sed risus ultricies tristique. Sit amet purus gravida quis. Porta non pulvinar neque laoreet suspendisse interdum consectetur libero. Massa massa ultricies mi quis hendrerit dolor.

Aliquam Malesuada Bibendum

Posuere lorem ipsum dolor sit amet consectetur adipiscing elit duis. Consequat nisl vel pretium lectus quam id leo in. Odio pellentesque diam volutpat commodo sed egestas egestas. Dictum fusce ut placerat orci nulla. Risus at ultrices mi tempus imperdiet. Felis eget velit aliquet sagittis. Porttitor lacus luctus accumsan tortor posuere ac. Dui id ornare arcu odio ut sem nulla pharetra. Amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar. Posuere lorem ipsum dolor sit. Auctor elit sed vulputate mi sit amet mauris.

One

Vitae Congue eu Consequat

Arcu cursus vitae congue mauris rhoncus aenean vel. Faucibus in ornare quam viverra orci. Urna cursus eget nunc scelerisque. Pharetra magna ac placerat vestibulum lectus mauris ultrices eros in. Ac odio tempor orci dapibus ultrices in iaculis nunc. Viverra aliquet eget sit amet tellus. In tellus integer feugiat scelerisque varius morbi enim. Posuere sollicitudin aliquam ultrices sagittis. Dolor morbi non arcu risus. In hendrerit gravida rutrum quisque non.

Convallis a Cras Semper

Pulvinar sapien et ligula ullamcorper malesuada proin libero. Convallis tellus id interdum velit laoreet id. Quam elementum pulvinar etiam non quam lacus. Sed vulputate odio ut enim blandit volutpat maecenas. Aliquam malesuada bibendum arcu vitae elementum curabitur. Massa tempor nec feugiat nisl. Turpis egestas sed tempus urna et pharetra. Tristique nulla aliquet enim tortor at auctor urna. Velit egestas dui id ornare arcu odio ut sem nulla.