Style Guide
Here you will find examples of all styles you have access to through building blocks and using styles within the editor. Within the section navigation you will find pages which demo different examples of how to display the blocks and styles.
Heading 2
This is a general page paragraph.
Heading 3
This is a general page paragraph.
Heading 4
This is a general page paragraph.
Heading 5
This is a general page paragraph.
Heading 6
This is a general page paragraph.
Paragraph, List and Link Styles
Test paragraph for link styling, test link. Phasellus auctor, velit non commodo rutrum, felis wisi faucibus ligula, facilisis ornare sem magna a magna. Quisque orci risus, molestie vel, interdum eu, bibendum id, eros.
Unordered List
- List item one
- Another list item to test wrapping. Morbi consectetuer est in neque. Etiam ullamcorper, justo sed scelerisque condimentum, quam arcu tincidunt lorem, ac placerat felis massa vel neque.
- Nested unordered list
- Second list item
- List item 3
Unordered List with style "list-unstyled"
- List item one
- List item two
- List item three
Ordered List
- List item one
- Nested ordered list item 1
- Nested ordered list item 2
- The second list item
- A third list item
Two Column List
Apply class "column-count-sm-2" to the ul tag.
- Item1
- Item2
- Item3
- Item4
- Item5
- Item6
Three Column List
Apply both classes "column-count-sm-2" and "column-count-md-3" to the ul tag.
- Item1
- Item2
- Item3
- Item4
- Item5
- Item6
- Item7
- Item8
- Item9
Four Column List
Apply both classes "column-count-sm-2" and " column-count-md-4" to the ul tag.
- Item1
- Item2
- Item3
- Item4
- Item5
- Item6
- Item7
- Item8
- Item9
- Item10
- Item11
Video Embeds
Youtube embed
From the menu bar, select "Insert > Media" and select the embed tab to paste the embed code within the modal window.
Vimeo embed
From the menu bar, select "Insert > Media" and select the embed tab to paste the embed code within the modal window.
Virtual Health Talk: Weight Loss Medication Options from MetroHealth on Vimeo.
Buttons
Buttons with solid style are often used for primary calls to action, while an outline style may have less importance.
Quote
Quote with center alignment and no background set on block
A well-known quote, contained in a blockquote element.
Someone famous, Source title, Source affiliation
Quote with left alignment and a background option set on block
A second well-known quote, contained in a blockquote element.
Data Tables
| Table Header - ScopeCol | Column Heading One | Column Heading Two | Column Heading Three | Column Heading Four | Column Heading Five | Column Heading Six |
|---|---|---|---|---|---|---|
| Row Heading1 | Data1 | Data4 | Data7 | Data10 | Data13 | Data16 |
| Row Heading2 | Data2 | Data5 | Data8 | Data11 | Data14 | Data17 |
| Row Heading3 | Data3 | Data6 | Data9 | Data12 | Data15 | Data18 |
Table2
| Table Header - ScopeCol | Column Heading One | Column Heading Two | Column Heading Three | Column Heading Four | Column Heading Five | Column Heading Six |
|---|---|---|---|---|---|---|
| Row Heading1 | Data1 | Data4 | Data7 | Data10 | Data13 | Data16 |
| Row Heading2 | Data2 | Data5 | Data8 | Data11 | Data14 | Data17 |
| Row Heading3 | Data3 | Data6 | Data9 | Data12 | Data15 | Data18 |
Image Captions
"Image with Caption" block example. This is an example of the caption text.
Donec mauris mi, accumsan ut, egestas a, condimentum id, magna. Etiam ut sapien. Integer pharetra nunc eu eros. Aenean ullamcorper sapien a leo. Nunc lobortis mauris id lectus. Nunc commodo erat. Cras molestie urna quis felis porta rutrum. Integer malesuada est ac augue.
Nunc luctus. Donec justo. Suspendisse semper. Nunc vestibulum. Aliquam eleifend augue eu turpis. Nunc non felis non metus placerat venenatis. Donec faucibus mollis augue. Sed a ligula vitae quam tempor adipiscing. Ut porta malesuada mi. Vivamus mattis. Vivamus suscipit auctor lacus. Mauris suscipit. Integer consequat lorem a dolor.
"Image with Caption" block example. This is an example of the caption text.
Donec mauris mi, accumsan ut, egestas a, condimentum id, magna. Etiam ut sapien. Integer pharetra nunc eu eros. Aenean ullamcorper sapien a leo. Nunc lobortis mauris id lectus. Nunc commodo erat. Cras molestie urna quis felis porta rutrum. Integer malesuada est ac augue.
Nunc luctus. Donec justo. Suspendisse semper. Nunc vestibulum. Aliquam eleifend augue eu turpis. Nunc non felis non metus placerat venenatis. Donec faucibus mollis augue. Sed a ligula vitae quam tempor adipiscing. Ut porta malesuada mi. Vivamus mattis. Vivamus suscipit auctor lacus. Mauris suscipit. Integer consequat lorem a dolor.
Nunc luctus. Donec justo. Suspendisse semper. Nunc vestibulum. Aliquam eleifend augue eu turpis. Nunc non felis non metus placerat venenatis. Donec faucibus mollis augue. Sed a ligula vitae quam tempor adipiscing. Ut porta malesuada mi. Vivamus mattis. Vivamus suscipit auctor lacus. Mauris suscipit. Integer consequat lorem a dolor.
Carousels
Carousel 1 up
Carousel Item: Style Guide Example 2
Carousel Item: Style Guide Example 3
Carousel Item: Style Guide Example 4
Carousel Item: Style Guide Example 5
Carousel Item: Style Guide Example 6
Carousel 1 up with Auto setting
Carousel Item: Style Guide Example 2
Carousel Item: Style Guide Example 3
Carousel Item: Style Guide Example 4
Carousel Item: Style Guide Example 5
Carousel Item: Style Guide Example 6
Carousel 2 up
Carousel Item: Style Guide Example 2
Carousel Item: Style Guide Example 3
Carousel Item: Style Guide Example 4
Carousel Item: Style Guide Example 5
Carousel Item: Style Guide Example 6
Carousel 3 up
Carousel Item: Style Guide Example 2
Carousel Item: Style Guide Example 3
Carousel Item: Style Guide Example 4
Carousel Item: Style Guide Example 5
Carousel Item: Style Guide Example 6
Carousel 4 up
Carousel Item: Style Guide Example 2
Carousel Item: Style Guide Example 3
Carousel Item: Style Guide Example 4
Carousel Item: Style Guide Example 5
Carousel Item: Style Guide Example 6
Donec mauris mi, accumsan ut, egestas a, condimentum id, magna. Etiam ut sapien. Integer pharetra nunc eu eros. Aenean ullamcorper sapien a leo. Nunc lobortis mauris id lectus. Nunc commodo erat.
Tab or Accordion
Tabs
Tabs on every screen size
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue neque nec nisl ultricies, sit amet suscipit tellus tempus. Donec sollicitudin orci ac dolor auctor, et ornare massa eleifend. Pellentesque dignissim turpis diam, vitae luctus orci consequat a. Fusce sed vehicula urna. Etiam nec nisl velit. Fusce eu massa nec urna maximus molestie ut sed sapien. Nunc ac odio ut ante tristique fringilla.
Proin scelerisque turpis tortor, ac scelerisque risus varius eget. Sed purus erat, vulputate quis convallis eget, tincidunt id velit. Donec nec justo lacinia tellus efficitur pellentesque sed quis nisi. Sed imperdiet placerat ex id pretium. Donec sed mi id ante cursus cursus. Phasellus egestas feugiat eros nec finibus. Nulla faucibus pretium tempus. Curabitur eu metus ac mi ornare dapibus. Donec non tempus enim. Ut consequat tincidunt ex. Vestibulum semper tempor quam, nec malesuada leo vehicula et. Duis dolor tellus, gravida quis cursus vel, luctus non turpis.
Responsive
Tab container on large screens, accordions on small screen sizes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue neque nec nisl ultricies, sit amet suscipit tellus tempus. Donec sollicitudin orci ac dolor auctor, et ornare massa eleifend. Pellentesque dignissim turpis diam, vitae luctus orci consequat a. Fusce sed vehicula urna. Etiam nec nisl velit. Fusce eu massa nec urna maximus molestie ut sed sapien. Nunc ac odio ut ante tristique fringilla.
Proin scelerisque turpis tortor, ac scelerisque risus varius eget. Sed purus erat, vulputate quis convallis eget, tincidunt id velit. Donec nec justo lacinia tellus efficitur pellentesque sed quis nisi. Sed imperdiet placerat ex id pretium. Donec sed mi id ante cursus cursus. Phasellus egestas feugiat eros nec finibus. Nulla faucibus pretium tempus. Curabitur eu metus ac mi ornare dapibus. Donec non tempus enim. Ut consequat tincidunt ex. Vestibulum semper tempor quam, nec malesuada leo vehicula et. Duis dolor tellus, gravida quis cursus vel, luctus non turpis.
This accordion functions as an accordion on all resolutions. Only one accordion in the group can be open at a time. Add class of "open" to one specific toggle heading to make this accordion section open by default instead of closed.
- List item one
- List item two
- List item three
All these toggles are H3s. These can be changed to h2s or lower headings. Remember to nest headings in order appropriately on the page to meet WCAG 2.0 success criteria.
Accordions can contain other accordions, tabs, headings, lists, tables, iframes, anything you like, but please be cautious in doing so as you do not want to complicate the page.
Accordion
This is your classic accordion where when one item is clicked the other closes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue neque nec nisl ultricies, sit amet suscipit tellus tempus. Donec sollicitudin orci ac dolor auctor, et ornare massa eleifend. Pellentesque dignissim turpis diam, vitae luctus orci consequat a. Fusce sed vehicula urna. Etiam nec nisl velit. Fusce eu massa nec urna maximus molestie ut sed sapien. Nunc ac odio ut ante tristique fringilla.
Proin scelerisque turpis tortor, ac scelerisque risus varius eget. Sed purus erat, vulputate quis convallis eget, tincidunt id velit. Donec nec justo lacinia tellus efficitur pellentesque sed quis nisi. Sed imperdiet placerat ex id pretium. Donec sed mi id ante cursus cursus. Phasellus egestas feugiat eros nec finibus. Nulla faucibus pretium tempus. Curabitur eu metus ac mi ornare dapibus. Donec non tempus enim. Ut consequat tincidunt ex. Vestibulum semper tempor quam, nec malesuada leo vehicula et. Duis dolor tellus, gravida quis cursus vel, luctus non turpis.
This accordion functions as an accordion on all resolutions. Only one accordion in the group can be open at a time. Add class of "open" to one specific toggle heading to make this accordion section open by default instead of closed.
- List item one
- List item two
- List item three
All these toggles are H3s. These can be changed to h2s or lower headings. Remember to nest headings in order appropriately on the page to meet WCAG 2.0 success criteria.
Accordions can contain other accordions, tabs, headings, lists, tables, iframes, anything you like, but please be cautious in doing so as you do not want to complicate the page.
Lightbox Styles
Image that opens a YouTube video source in a lightbox
Card
Card Title
main content area.
Heading 2
This is a general page paragraph.
Heading 3
This is a general page paragraph.
Heading 4
This is a general page paragraph.
Heading 5
This is a general page paragraph.
Heading 6
This is a general page paragraph.
Paragraph, List and Link Styles
Test paragraph for link styling, test link. Phasellus auctor, velit non commodo rutrum, felis wisi faucibus ligula, facilisis ornare sem magna a magna. Quisque orci risus, molestie vel, interdum eu, bibendum id, eros.
Unordered List
- List item one
- Another list item to test wrapping. Morbi consectetuer est in neque. Etiam ullamcorper, justo sed scelerisque condimentum, quam arcu tincidunt lorem, ac placerat felis massa vel neque.
- Nested unordered list
- Second list item
- List item 3
Unordered List with style "list-unstyled"
- List item one
- List item two
- List item three
Ordered List
- List item one
- Nested ordered list item 1
- Nested ordered list item 2
- The second list item
- A third list item
Two Column List
Apply class "column-count-sm-2" to the ul tag.
- Item1
- Item2
- Item3
- Item4
- Item5
- Item6
Three Column List
Apply both classes "column-count-sm-2" and "column-count-md-3" to the ul tag.
- Item1
- Item2
- Item3
- Item4
- Item5
- Item6
- Item7
- Item8
- Item9
Four Column List
Apply both classes "column-count-sm-2" and " column-count-md-4" to the ul tag.
- Item1
- Item2
- Item3
- Item4
- Item5
- Item6
- Item7
- Item8
- Item9
- Item10
- Item11
Video Embeds
Youtube embed
From the menu bar, select "Insert > Media" and select the embed tab to paste the embed code within the modal window.
Vimeo embed
From the menu bar, select "Insert > Media" and select the embed tab to paste the embed code within the modal window.
Virtual Health Talk: Weight Loss Medication Options from MetroHealth on Vimeo.
Buttons
Buttons with solid style are often used for primary calls to action, while an outline style may have less importance.
Quote
Quote with center alignment and no background set on block
A well-known quote, contained in a blockquote element.
Quote with left alignment and a background option set on block
A second well-known quote, contained in a blockquote element.
Data Tables
| Table Header - ScopeCol | Column Heading One | Column Heading Two | Column Heading Three | Column Heading Four | Column Heading Five | Column Heading Six |
|---|---|---|---|---|---|---|
| Row Heading1 | Data1 | Data4 | Data7 | Data10 | Data13 | Data16 |
| Row Heading2 | Data2 | Data5 | Data8 | Data11 | Data14 | Data17 |
| Row Heading3 | Data3 | Data6 | Data9 | Data12 | Data15 | Data18 |
Table2
| Table Header - ScopeCol | Column Heading One | Column Heading Two | Column Heading Three | Column Heading Four | Column Heading Five | Column Heading Six |
|---|---|---|---|---|---|---|
| Row Heading1 | Data1 | Data4 | Data7 | Data10 | Data13 | Data16 |
| Row Heading2 | Data2 | Data5 | Data8 | Data11 | Data14 | Data17 |
| Row Heading3 | Data3 | Data6 | Data9 | Data12 | Data15 | Data18 |
Image Captions
"Image with Caption" block example. This is an example of the caption text.
Donec mauris mi, accumsan ut, egestas a, condimentum id, magna. Etiam ut sapien. Integer pharetra nunc eu eros. Aenean ullamcorper sapien a leo. Nunc lobortis mauris id lectus. Nunc commodo erat. Cras molestie urna quis felis porta rutrum. Integer malesuada est ac augue.
Nunc luctus. Donec justo. Suspendisse semper. Nunc vestibulum. Aliquam eleifend augue eu turpis. Nunc non felis non metus placerat venenatis. Donec faucibus mollis augue. Sed a ligula vitae quam tempor adipiscing. Ut porta malesuada mi. Vivamus mattis. Vivamus suscipit auctor lacus. Mauris suscipit. Integer consequat lorem a dolor.
"Image with Caption" block example. This is an example of the caption text.
Donec mauris mi, accumsan ut, egestas a, condimentum id, magna. Etiam ut sapien. Integer pharetra nunc eu eros. Aenean ullamcorper sapien a leo. Nunc lobortis mauris id lectus. Nunc commodo erat. Cras molestie urna quis felis porta rutrum. Integer malesuada est ac augue.
Nunc luctus. Donec justo. Suspendisse semper. Nunc vestibulum. Aliquam eleifend augue eu turpis. Nunc non felis non metus placerat venenatis. Donec faucibus mollis augue. Sed a ligula vitae quam tempor adipiscing. Ut porta malesuada mi. Vivamus mattis. Vivamus suscipit auctor lacus. Mauris suscipit. Integer consequat lorem a dolor.
Nunc luctus. Donec justo. Suspendisse semper. Nunc vestibulum. Aliquam eleifend augue eu turpis. Nunc non felis non metus placerat venenatis. Donec faucibus mollis augue. Sed a ligula vitae quam tempor adipiscing. Ut porta malesuada mi. Vivamus mattis. Vivamus suscipit auctor lacus. Mauris suscipit. Integer consequat lorem a dolor.
Carousels
Carousel 1 up
Carousel Item: Style Guide Example 2
Carousel Item: Style Guide Example 3
Carousel Item: Style Guide Example 4
Carousel Item: Style Guide Example 5
Carousel Item: Style Guide Example 6
Carousel 1 up with Auto setting
Carousel Item: Style Guide Example 2
Carousel Item: Style Guide Example 3
Carousel Item: Style Guide Example 4
Carousel Item: Style Guide Example 5
Carousel Item: Style Guide Example 6
Carousel 2 up
Carousel Item: Style Guide Example 2
Carousel Item: Style Guide Example 3
Carousel Item: Style Guide Example 4
Carousel Item: Style Guide Example 5
Carousel Item: Style Guide Example 6
Carousel 3 up
Carousel Item: Style Guide Example 2
Carousel Item: Style Guide Example 3
Carousel Item: Style Guide Example 4
Carousel Item: Style Guide Example 5
Carousel Item: Style Guide Example 6
Carousel 4 up
Carousel Item: Style Guide Example 2
Carousel Item: Style Guide Example 3
Carousel Item: Style Guide Example 4
Carousel Item: Style Guide Example 5
Carousel Item: Style Guide Example 6
Donec mauris mi, accumsan ut, egestas a, condimentum id, magna. Etiam ut sapien. Integer pharetra nunc eu eros. Aenean ullamcorper sapien a leo. Nunc lobortis mauris id lectus. Nunc commodo erat.
Tab or Accordion
Tabs
Tabs on every screen size
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue neque nec nisl ultricies, sit amet suscipit tellus tempus. Donec sollicitudin orci ac dolor auctor, et ornare massa eleifend. Pellentesque dignissim turpis diam, vitae luctus orci consequat a. Fusce sed vehicula urna. Etiam nec nisl velit. Fusce eu massa nec urna maximus molestie ut sed sapien. Nunc ac odio ut ante tristique fringilla.
Proin scelerisque turpis tortor, ac scelerisque risus varius eget. Sed purus erat, vulputate quis convallis eget, tincidunt id velit. Donec nec justo lacinia tellus efficitur pellentesque sed quis nisi. Sed imperdiet placerat ex id pretium. Donec sed mi id ante cursus cursus. Phasellus egestas feugiat eros nec finibus. Nulla faucibus pretium tempus. Curabitur eu metus ac mi ornare dapibus. Donec non tempus enim. Ut consequat tincidunt ex. Vestibulum semper tempor quam, nec malesuada leo vehicula et. Duis dolor tellus, gravida quis cursus vel, luctus non turpis.
Responsive
Tab container on large screens, accordions on small screen sizes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue neque nec nisl ultricies, sit amet suscipit tellus tempus. Donec sollicitudin orci ac dolor auctor, et ornare massa eleifend. Pellentesque dignissim turpis diam, vitae luctus orci consequat a. Fusce sed vehicula urna. Etiam nec nisl velit. Fusce eu massa nec urna maximus molestie ut sed sapien. Nunc ac odio ut ante tristique fringilla.
Proin scelerisque turpis tortor, ac scelerisque risus varius eget. Sed purus erat, vulputate quis convallis eget, tincidunt id velit. Donec nec justo lacinia tellus efficitur pellentesque sed quis nisi. Sed imperdiet placerat ex id pretium. Donec sed mi id ante cursus cursus. Phasellus egestas feugiat eros nec finibus. Nulla faucibus pretium tempus. Curabitur eu metus ac mi ornare dapibus. Donec non tempus enim. Ut consequat tincidunt ex. Vestibulum semper tempor quam, nec malesuada leo vehicula et. Duis dolor tellus, gravida quis cursus vel, luctus non turpis.
This accordion functions as an accordion on all resolutions. Only one accordion in the group can be open at a time. Add class of "open" to one specific toggle heading to make this accordion section open by default instead of closed.
- List item one
- List item two
- List item three
All these toggles are H3s. These can be changed to h2s or lower headings. Remember to nest headings in order appropriately on the page to meet WCAG 2.0 success criteria.
Accordions can contain other accordions, tabs, headings, lists, tables, iframes, anything you like, but please be cautious in doing so as you do not want to complicate the page.
Accordion
This is your classic accordion where when one item is clicked the other closes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue neque nec nisl ultricies, sit amet suscipit tellus tempus. Donec sollicitudin orci ac dolor auctor, et ornare massa eleifend. Pellentesque dignissim turpis diam, vitae luctus orci consequat a. Fusce sed vehicula urna. Etiam nec nisl velit. Fusce eu massa nec urna maximus molestie ut sed sapien. Nunc ac odio ut ante tristique fringilla.
Proin scelerisque turpis tortor, ac scelerisque risus varius eget. Sed purus erat, vulputate quis convallis eget, tincidunt id velit. Donec nec justo lacinia tellus efficitur pellentesque sed quis nisi. Sed imperdiet placerat ex id pretium. Donec sed mi id ante cursus cursus. Phasellus egestas feugiat eros nec finibus. Nulla faucibus pretium tempus. Curabitur eu metus ac mi ornare dapibus. Donec non tempus enim. Ut consequat tincidunt ex. Vestibulum semper tempor quam, nec malesuada leo vehicula et. Duis dolor tellus, gravida quis cursus vel, luctus non turpis.
This accordion functions as an accordion on all resolutions. Only one accordion in the group can be open at a time. Add class of "open" to one specific toggle heading to make this accordion section open by default instead of closed.
- List item one
- List item two
- List item three
All these toggles are H3s. These can be changed to h2s or lower headings. Remember to nest headings in order appropriately on the page to meet WCAG 2.0 success criteria.
Accordions can contain other accordions, tabs, headings, lists, tables, iframes, anything you like, but please be cautious in doing so as you do not want to complicate the page.
Lightbox Styles
Image that opens a YouTube video source in a lightbox
Card
Card Title
main content area.
Custom Navigation within the 'Main Body'