Accordion
Vivamus nec felis quam. Nullam et velit et risus bibendum imperdiet. Praesent eget accumsan nibh, gravida imperdiet nisi. Nunc vel lorem in felis sagittis ultricies maximus ut ex. Sed sodales varius orci a interdum. Morbi nec lorem iaculis nunc mollis scelerisque sit amet non arcu.
Nunc vitae sodales velit. Etiam auctor, ex nec ultrices blandit, quam purus consectetur ante, sit amet maximus lorem libero sed ipsum. Cras venenatis lobortis sollicitudin.
Morbi diam lectus, faucibus eu dolor ut, cursus lacinia justo. Suspendisse ipsum ante, scelerisque sodales lacinia at, faucibus eget enim. Vivamus semper at nibh ut euismod.
Vivamus nec felis quam. Nullam et velit et risus bibendum imperdiet. Praesent eget accumsan nibh, gravida imperdiet nisi. Nunc vel lorem in felis sagittis ultricies maximus ut ex. Sed sodales varius orci a interdum. Morbi nec lorem iaculis nunc mollis scelerisque sit amet non arcu.
Nunc vitae sodales velit. Etiam auctor, ex nec ultrices blandit, quam purus consectetur ante, sit amet maximus lorem libero sed ipsum. Cras venenatis lobortis sollicitudin.
Morbi diam lectus, faucibus eu dolor ut, cursus lacinia justo. Suspendisse ipsum ante, scelerisque sodales lacinia at, faucibus eget enim. Vivamus semper at nibh ut euismod.
Box
Default
Donec sollicitudin pretium lectus, ac finibus est volutpat a. Donec tempus sem sed nisl pulvinar dictum.
Icons
Backgrounds
Primary Background
Donec sollicitudin pretium lectus, ac finibus est volutpat a. Donec tempus sem sed nisl pulvinar dictum.
Secondary Background
Donec sollicitudin pretium lectus, ac finibus est volutpat a. Donec tempus sem sed nisl pulvinar dictum.
No Background
Donec sollicitudin pretium lectus, ac finibus est volutpat a. Donec tempus sem sed nisl pulvinar dictum.
Header and Footer Options
Header Image
Donec sollicitudin pretium lectus, ac finibus est volutpat a. Donec tempus sem sed nisl pulvinar dictum.
Download
Default
Feb. 27: All Employee Email from Zions Bancorporation Chairman and CEO Harris Simmons
- Size
- 175 KB
- Format
- application/pdf
With Action Button
Feb. 27: All Employee Email from Zions Bancorporation Chairman and CEO Harris Simmons
- Size
- 175 KB
- Format
- application/pdf
List
NOTE: The list component will only link to pages within the site. Use a bulleted list in the text component if external links are needed.
Default
Border Between
Separator
Extra Small Padding
Etiam finibus rutrum risus, ac auctor ante euismod in. In orci libero, ultricies ac accumsan in, bibendum ut ligula. Nunc at nisl urna. Proin vestibulum tincidunt purus eget tempor.
Etiam finibus rutrum risus, ac auctor ante euismod in. In orci libero, ultricies ac accumsan in, bibendum ut ligula. Nunc at nisl urna. Proin vestibulum tincidunt purus eget tempor.
Small Padding
Etiam finibus rutrum risus, ac auctor ante euismod in. In orci libero, ultricies ac accumsan in, bibendum ut ligula. Nunc at nisl urna. Proin vestibulum tincidunt purus eget tempor.
Etiam finibus rutrum risus, ac auctor ante euismod in. In orci libero, ultricies ac accumsan in, bibendum ut ligula. Nunc at nisl urna. Proin vestibulum tincidunt purus eget tempor.
Default Padding
Etiam finibus rutrum risus, ac auctor ante euismod in. In orci libero, ultricies ac accumsan in, bibendum ut ligula. Nunc at nisl urna. Proin vestibulum tincidunt purus eget tempor.
Etiam finibus rutrum risus, ac auctor ante euismod in. In orci libero, ultricies ac accumsan in, bibendum ut ligula. Nunc at nisl urna. Proin vestibulum tincidunt purus eget tempor.
Large Padding
Etiam finibus rutrum risus, ac auctor ante euismod in. In orci libero, ultricies ac accumsan in, bibendum ut ligula. Nunc at nisl urna. Proin vestibulum tincidunt purus eget tempor.
Etiam finibus rutrum risus, ac auctor ante euismod in. In orci libero, ultricies ac accumsan in, bibendum ut ligula. Nunc at nisl urna. Proin vestibulum tincidunt purus eget tempor.
Extra Large Padding
Etiam finibus rutrum risus, ac auctor ante euismod in. In orci libero, ultricies ac accumsan in, bibendum ut ligula. Nunc at nisl urna. Proin vestibulum tincidunt purus eget tempor.
Etiam finibus rutrum risus, ac auctor ante euismod in. In orci libero, ultricies ac accumsan in, bibendum ut ligula. Nunc at nisl urna. Proin vestibulum tincidunt purus eget tempor.
Tabs
When inserting components to create each tab, the content container component provides the most flexibility by allowing you do drag in multiple components like text and button. The text component can also be used when only copy is needed.
It's best to keep the structure and content in each tab simple and concise as a complex tabbed interface can become difficult to use on a mobile device. Also, keep the number of tabs to no more than three or four and keep each tab label to one or two words.
As alwyas, check your work on smaller screens.
Sed at neque sed augue rhoncus suscipit eget eget lectus. Vestibulum a ligula risus. Ut hendrerit porta orci, at maximus nulla tincidunt quis. Integer id porttitor turpis, et ultricies turpis. Integer semper dignissim commodo. Aenean nec lacus ut turpis tincidunt convallis. Sed sagittis nisi quis urna luctus interdum. Aliquam suscipit leo id enim suscipit scelerisque.
Donec pharetra lectus nec purus aliquam, ut aliquam nisl finibus. Curabitur ultricies lacus a urna convallis pellentesque. Pellentesque venenatis dolor eget rutrum fermentum. Duis laoreet augue eros, eu blandit turpis dictum vitae. Sed rhoncus posuere risus, ut hendrerit justo mattis id. Nulla rutrum elit sit amet massa molestie, quis malesuada velit imperdiet. Ut elementum est fermentum, vulputate neque et, pretium dolor. Proin consequat nisi elit, ac condimentum dolor facilisis quis. Maecenas consectetur diam at ornare commodo. Proin vestibulum cursus pulvinar.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus ut ante tellus. Proin in eros et sem porttitor viverra in eu lorem. Duis condimentum quam et velit malesuada laoreet sed a turpis. Aenean eu pharetra erat. Curabitur accumsan sit amet arcu quis lobortis. Maecenas pellentesque mi orci, et maximus mi vestibulum ut. Phasellus sagittis purus at metus tincidunt consequat. Proin quis lacus dolor. Ut lacinia gravida elit ac sagittis. Quisque maximus condimentum urna, in bibendum nibh bibendum nec. Curabitur molestie quam a lacus volutpat, et maximus lorem euismod. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc placerat dui ipsum, sit amet dapibus neque ultricies vitae. Vivamus et mollis massa.
Text
Large
Aliquam pellentesque vitae sem ut pellentesque. Etiam nibh sapien, aliquam eu mauris sed, venenatis elementum augue. Suspendisse id consectetur urna. Nam sed sem imperdiet, eleifend leo sit amet, scelerisque ligula. Proin sed posuere libero. Mauris pulvinar tellus tortor. Nunc elit sapien, efficitur eu justo luctus, semper dapibus metus. Donec quis nulla sed enim malesuada fringilla. Fusce ultrices vehicula ex, laoreet iaculis risus consectetur ac.
Default
Aliquam pellentesque vitae sem ut pellentesque. Etiam nibh sapien, aliquam eu mauris sed, venenatis elementum augue. Suspendisse id consectetur urna. Nam sed sem imperdiet, eleifend leo sit amet, scelerisque ligula. Proin sed posuere libero. Mauris pulvinar tellus tortor. Nunc elit sapien, efficitur eu justo luctus, semper dapibus metus. Donec quis nulla sed enim malesuada fringilla. Fusce ultrices vehicula ex, laoreet iaculis risus consectetur ac.
Small
Aliquam pellentesque vitae sem ut pellentesque. Etiam nibh sapien, aliquam eu mauris sed, venenatis elementum augue. Suspendisse id consectetur urna. Nam sed sem imperdiet, eleifend leo sit amet, scelerisque ligula. Proin sed posuere libero. Mauris pulvinar tellus tortor. Nunc elit sapien, efficitur eu justo luctus, semper dapibus metus. Donec quis nulla sed enim malesuada fringilla. Fusce ultrices vehicula ex, laoreet iaculis risus consectetur ac.
Color
Default
Sed mattis ipsum eros, in sagittis ante aliquet eget. Aliquam erat volutpat. Nulla ut nisi non tellus laoreet rhoncus rhoncus feugiat eros. Vestibulum sit amet odio est.
White
Sed mattis ipsum eros, in sagittis ante aliquet eget. Aliquam erat volutpat. Nulla ut nisi non tellus laoreet rhoncus rhoncus feugiat eros. Vestibulum sit amet odio est.
Table Styles
| Default Table | Col Two | Col Three | Col Four | Col Five |
|---|---|---|---|---|
| Row One | Cell Data | Cell Data | Cell Data | Cell Data |
| Row Two | Cell Data | Cell Data | Cell Data | Cell Data |
| Row Three | Cell Data | Cell Data | Cell Data | Cell Data |
| Striped Table | Col Two | Col Three | Col Four | Col Five |
|---|---|---|---|---|
| Row One | Cell Data | Cell Data | Cell Data | Cell Data |
| Row Two | Cell Data | Cell Data | Cell Data | Cell Data |
| Row Three | Cell Data | Cell Data | Cell Data | Cell Data |
Unordered List Styles
Border Between
- One
- Two
- Three
- Four
Border Left
- One
- Two
- Three
- Four
None
None
None
None
Extra Small
Extra Small
Extra Small
Extra Small
Small
Small
Small
Small
Default
Default
Default
Default
Large
Large
Large
Large
Flex Row
Change the content container layout to a flex row. Children components will align horizontally and space between them will be distributed evenly. The gutter width style can also be used to control spacing.
NOTE: Children components will not wrap to a new line and will start to disapear if too many are included. Children components will stack vertically at the mobile breakpoint.
Grid 3-2-1
Change the content container layout to a grid. Children components will display in three columns on desktop, two columns on tablet, and one column on mobile. The gutter width style can also be used to control spacing.
NOTE: CSS Grid layouts are not well supported on older browsers, in particular IE 11. Children will display in a single column in browers without CSS Grid support.