Related Links & Videos
Foundation Tab Layout Section Properties
| PROPERTY | DESCRIPTION |
| 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 :
|
| 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 :
|
| Tab Position | Select from:
|
| SELECT TAB INFORMATION Use in Tab | Select from:
|
| FIRST SECTION Number of Tabs | Select from a minimum of 2 tabs to a maximum of 10 tabs |
| Tab [1-10] Titles | Each 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] CSS | Code 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
|
| Margin | Use 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 |
| Padding | Use 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 After | Check 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 CSS | Code provided by the Atlas development team to achieve custom effects |
| Tab Panel CSS | Code provided by the Atlas development team to achieve custom effects |
| Tab Container CSS | Code provided by the Atlas development team to achieve custom effects |
| Enable Background | Check 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:
|
| Background Image Small | Clicking 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 Medium | Clicking 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 Large | Clicking 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. |
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.
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.
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.
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.