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.
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.
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.
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.
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.
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.
Box
Default
Donec sollicitudin pretium lectus, ac finibus est volutpat a. Donec tempus sem sed nisl pulvinar dictum.
With Icon
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.
Background Styles
NOTE: Apply appropriate contrasting color styles to Title, Text, and Button when used in a Box with the Dark Background style applied.
Dark Background
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.
Light Background
Donec sollicitudin pretium lectus, ac finibus est volutpat a. Donec tempus sem sed nisl pulvinar dictum.
Transparent Background
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.
Download
With Action Button
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
-
Global -
Errors -
Sandbox -
Pharmacies -
Covered Entities -
About
Border Between Items
Border Left of List
Separator
Extra Large Padding
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.
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.
Large Padding
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.
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.
Default Padding
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.
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.
Small Padding
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.
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.
Extra Small Padding
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.
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.
Colors
Default
Light
Table
The Table component supports a minimum of 2 columns up to a maximum of 10 columns. The Table component is also optimized for mobile sized screens.
NOTE: The Text component includes an option to create a table in the expanded configuration however it is not mobile optimized.
Table Component
Column Heading 1
Column Heading 2
Column Heading 3
Column Heading 4
Table Component
Row Heading 1
Column Heading 1
Cell Data
Column Heading 2
Cell Data
Column Heading 3
Cell Data
Column Heading 4
Cell Data
Table Component
Row Heading 2
Column Heading 1
Cell Data
Column Heading 2
Cell Data
Column Heading 3
Cell Data
Column Heading 4
Cell Data
Table Component
Row Heading 3
Column Heading 1
Cell Data
Column Heading 2
Cell Data
Column Heading 3
Cell Data
Column Heading 4
Cell Data
Table Component
Row Heading 4
Column Heading 1
Cell Data
Column Heading 2
Cell Data
Column Heading 3
Cell Data
Column Heading 4
Cell Data
Table Component
Row Heading 5
Column Heading 1
Cell Data
Column Heading 2
Cell Data
Column Heading 3
Cell Data
Column Heading 4
Cell Data
Tabs
When choosing which components to use to create a tab, the Content Container component provides the most flexibility by allowing you do drag multiple components like text and button. The Text component can also be used when only copy is needed.
It's best to keep the tab structure and content simple as a complex tabbed interface can become difficult to use on a mobile device. Also, keep the number of tabs to less than than three or four and keep each tab label to one or two words.
IMPORTANT: As always, check your work on smaller screens.
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.
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.
Blue
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.
Light
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
Tables can be created using the table option within the expanded text component configure dialog.
NOTE: The table is not be optimized for mobile screens. Consider using the Table component instead.
| Default Table | Col Heading | Col Heading | Col Heading |
|---|---|---|---|
| Row Heading | Cell Data | Cell Data | Cell Data |
| Row Heading | Cell Data | Cell Data | Cell Data |
| Row Heading | Cell Data | Cell Data | Cell Data |
| Striped Table | Col Heading | Col Heading | Col Heading |
|---|---|---|---|
| Row Heading | Cell Data | Cell Data | Cell Data |
| Row Heading | Cell Data | Cell Data | Cell Data |
| Row Heading | Cell Data | Cell Data | Cell Data |
Unordered List Styles
Border Between Items
- One
- Two
- Three
- Four
- Five
Border Left of List
- One
- Two
- Three
- Four
- Five
Title
Set the heading type (h1-h6) using the Type dropdown in the Configure dialog. Additionally set how the heading appears visually using the Size values in the Styles dropdown in the component toolbar.
IMPORTANT: Configure the heading type (h1-h6) to reflect its location relative to content on the page. Size values in the styles dropdown should only be used for visual change.
Display 1
Display 2
Display 3
Display 4
Title H1
Title H2
Title H3
Title H4
Title H5
Title H6
Alignment
Default
Center
Right
Color
Default
Light
Layout
Apply layout styles to the Content Container component by selecting Styles from the component toolbar.
Content Two Column, Content Three Column, Content Four Column, and Content Six Column components can also be dragged into the Content Container component to layout page content.
Equal Height Boxes
An equal height column style can be applied by selecting Configuration from one of the three Content Column components toolbar which sets the height of of any child Box component, to equal one another.
NOTE: This style may not visually effect all components.
With Equal Height Columns
Cras varius placerat felis in bibendum. Fusce in tellus nec turpis tempor commodo eget sit amet dolor. Duis leo lacus, volutpat quis pulvinar aliquam, faucibus sed nisi.
Quisque feugiat accumsan nisl id gravida. Duis rhoncus ex nec erat condimentum, in suscipit risus ultrices. Vivamus consectetur nunc ut urna gravida vestibulum et faucibus est.
Donec eget mauris eget est bibendum euismod eget ac diam.
Without Equal Height Columns
Cras varius placerat felis in bibendum. Fusce in tellus nec turpis tempor commodo eget sit amet dolor. Duis leo lacus, volutpat quis pulvinar aliquam, faucibus sed nisi.
Quisque feugiat accumsan nisl id gravida. Duis rhoncus ex nec erat condimentum, in suscipit risus ultrices. Vivamus consectetur nunc ut urna gravida vestibulum et faucibus est.
Donec eget mauris eget est bibendum euismod eget ac diam.
Gutter Widths
Change the gutter width for the Content Two Column, Content Three Column, Content Four Column, or Content Six Column component as well as the Flex Row and Grid 3-2-1 layout styles.
NOTE: To create a grid of boxes, use the small gutter width size.
Large
Large
Large
Large
Default
Default
Default
Default
Small
Small
Small
Small
Extra Small
Extra Small
Extra Small
Extra Small
None
None
None
None
Flex Row
Change the Content Container component layout to a flex row. Child components will align horizontally and space between them will be distributed evenly. The gutter width style can also be used to control spacing.
NOTE: Child components will not wrap to a new line and will disappear if too many are included as demonstrated below. Child components will stack vertically at the mobile breakpoint.
Grid 3-2-1
Change the Content Container component layout to a grid.
Child 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 browsers without CSS grid support.
