VitalSite Styles & Components

Here you will find examples of all styles you have access to through the style dropdown and page/panel elements dropdown. Within the section navigation you will find pages which demo some of the panel containers available.

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.

Test "Arrow-Link" Style.

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 "Plain-List"

List item one
List item two
List item three

Ordered List

List item one
1. Nested ordered list item 1
2. Nested ordered list item 2
The second list item
A third list item

Two Column List

Item1
Item2
Item3
Item4
Item5
Item6

Three Column List

Item1
Item2
Item3
Item4
Item5
Item6
Item7
Item8
Item9

Four Column List

Item1
Item2
Item3
Item4
Item5
Item6
Item7
Item8
Item9
Item10
Item11

Buttons

"Button" style on a link

"Button-Secondary" style on a link

"Button-CTA" style on a link

"Button-CTA-Arrow" style on a link

Button-Icon

Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit.

— Jane Dow, Geonetric

Data Tables

'Table-Border1' & 'Table-Striped'
Table Header - ScopeCol	Row Heading One	Row Heading Two	Row Heading Three	Row Heading Four	Row Heading Five	Row 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

'Table-Border1'
Table Header - ScopeCol	Row Heading One	Row Heading Two	Row Heading Three	Row Heading Four	Row Heading Five	Row 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

'Table-Border2'
Table-ColorRow	Heading	Heading
Heading	Data	Data
Heading	Data	Data
Heading	Data	Data

'Table-Border3'
Table-ColorRow	Heading	Heading
Heading	Data	Data
Heading	Data	Data
Heading	Data	Data

'AutoWidth'
Heading	Heading Col1	Heading Col2
Heading	Data	Data
Heading	Data	Data
Heading	Data	Data

Image Captions

Add additional page content here

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.

Add additional page content here

Tab Container

Accessible Tab Container on large screens, Accordions on small screen sizes

Tab Heading 1

This accordion is styled as an accordion on small resolutions and tabs at large resolutions.

Tab Heading 2

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.

Tab Heading 3

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.

Tabs to Accordions Container

Accessible Tab Container on large screens, Accordions on small screen sizes

Tab Heading 1

This accordion is styled as an accordion on small resolutions and tabs at large resolutions.

Tab Heading 2

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.

Tab Heading 3

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

Accordion Heading 1

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.

Accordion Heading 2

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.

Accordion Heading 3

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 (independent triggers)"

Like an accordion but each item opens and closes independently of the others

Accordion Multi Heading 1

This accordion can have multiple open at once. Add class of "open" to toggle heading(s) to make the accordion section open by default instead of closed.

Accordion Multi Heading 2

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.

Accordion Multi Heading 3

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

By adding the class of "YouTubeVideo" to your link, your nested image will get an overlay of a play icon and your link (YouTube video) will open within a lightbox. Please use the YouTube embed path for your link.

Video Text Goes Here

If a link (a href="/") with a class of "YouTubeVideo" is around an image, the play icon is automatically added.

Code for this will look like:
<a class="YouTubeVideo" href="https://www.youtube-nocookie.com/embed/h7Ks8O96ewE?rel=0">
<img alt="Play YouTube Video" src="/path/image-name.jpg" />
</a>

Call To Action Panel

Subheading Example

When to Use: When the same CTA appears on multiple pages within a section or across the site.
Where It Appears: At the top of the right column, if placed within the Call To Action panel slot within the layout tab / If no right column exists, the CTA Panel shows up in line with body copy
How to Place It: Build a panel and place the panel on the page in the Call to Action panel slot within the layout tab
Example Uses: Schedule an appointment, request information, contact us
Why Us It: The panel will stay at the top of the page in tablet and mobile views and is generally called out more with unique styles.

Example of ThreeFlex with Button-White-Arrow

Button Text One Button Text Two Button Text Three

Below Main Left

The maximum image width for this panel is 727px. The height is flexible.

Below Main Right

The maximum image width for this panel is 727px. The height is flexible.

Lorem ipsum dolor

Lorem ipsum dolor sit amet consectetur adipiscing elit id neque sociis, urna imperdiet faucibus potenti platea primis cras facilisi per duis tempus, aptent cursus dignissim accumsan ultricies pulvinar venenatis tincidunt eu. Cubilia vehicula libero cum nec mauris augue sagittis himenaeos euismod, tempus vivamus tellus pellentesque ac sociosqu eu elementum molestie, proin tortor litora erat class hac tempor rhoncus. Dapibus dui facilisi lacus scelerisque faucibus leo, etiam tempor sapien conubia urna, arcu varius senectus eget rhoncus.