VitalSite Styles
Here you will find examples of all styles you have access to through VitalSite dropdowns and predefined templates.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
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
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
- Item1
- Item2
- Item3
- Item1
- Item2
- Item3
Three Column List
- Item1
- Item2
- Item3
- Item1
- Item2
- Item3
- Item1
- Item2
- Item3
Buttons
Calls To Action
Call To Action Heading
Content goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Regular text link.
Duis rutrum metus vel diam. Donec eu erat. Nunc condimentum condimentum lorem. Phasellus placerat est id mauris. Curabitur laoreet ante eu libero. Vestibulum aliquet nibh sit amet mi.
Vivamus consequat. Sed id purus. Etiam hendrerit convallis risus. Proin orci libero, consectetuer sed, convallis non, hendrerit vitae, nisl. Vivamus imperdiet orci at lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse id ante sit amet nulla volutpat placerat. Fusce interdum dignissim ante.
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.
Call To Action Heading
Content goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Regular text link.
Callouts
Duis rutrum metus vel diam. Donec eu erat. Nunc condimentum condimentum lorem. Phasellus placerat est id mauris. Curabitur laoreet ante eu libero. Vestibulum aliquet nibh sit amet mi.
- ac placerat felis massa vel neque
- Maecenas tincidunt iaculis libero
- Nunc malesuada pulvinar leo
Vivamus consequat. Sed id purus. Etiam hendrerit convallis risus. Proin orci libero, consectetuer sed, convallis non, hendrerit vitae, nisl. Vivamus imperdiet orci at lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse id ante sit amet nulla volutpat placerat. Fusce interdum dignissim ante.
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.
Fusce at leo eget neque tincidunt finibus. Curabitur a nisl non dui lacinia maximus in non metus. Aenean eleifend, elit vulputate eleifend consectetur, tellus elit efficitur quam, ut faucibus erat diam sit amet nunc. Nullam vehicula metus mauris. Donec justo nibh, ultrices finibus ipsum eget, egestas aliquam ligula. Vestibulum est turpis, tempus vitae blandit ac, vehicula non tellus. Fusce vehicula elit id nulla blandit interdum. Integer tincidunt ex magna, at elementum felis molestie at. Etiam vitae eleifend ante. Integer quis erat in est gravida dignissim. Suspendisse dictum nibh libero, vel molestie orci convallis non. Donec a ornare leo. Donec eget ultrices orci. Curabitur nec mauris tristique, euismod urna et, posuere lectus. Donec accumsan placerat feugiat.
CalloutWide
The Callout Wide images here are 260 wide. They can be any height and width. Float to the right or left using the style dropdown.
Maecenas vehicula, risus eget blandit pulvinar, mi magna venenatis arcu, eget pretium neque nibh et libero. Cras in nulla a velit sollicitudin laoreet. Nam consectetuer lectus non odio. Integer ullamcorper ornare massa. Pellentesque in erat id odio ornare adipiscing. Aenean dapibus suscipit wisi.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin augue orci, bibendum pellentesque, consequat et, sagittis eu, ligula. Nullam in dui. Vivamus orci orci, cursus nec, elementum a, convallis at, mauris. Curabitur dignissim consectetuer dui. Etiam ut dui. Curabitur sagittis, nunc sed molestie bibendum, felis nisl aliquam lorem, vitae nonummy elit nisl non quam. Donec vitae nulla sed felis accumsan dapibus. Proin mattis elementum ligula.
- Morbi consectetuer est in neque
- Etiam ullamcorper, justo sed scelerisque
- condimentum, quam arcu tincidunt lorem
Maecenas vehicula, risus eget blandit pulvinar, mi magna venenatis arcu, eget pretium neque nibh et libero. Cras in nulla a velit sollicitudin laoreet. Nam consectetuer lectus non odio. Integer ullamcorper ornare massa. Pellentesque in erat id odio ornare adipiscing. Aenean dapibus suscipit wisi.
Vivamus consequat. Sed id purus. Etiam hendrerit convallis risus. Proin orci libero, consectetuer sed, convallis non, hendrerit vitae, nisl. Vivamus imperdiet orci at lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse id ante sit amet nulla volutpat placerat. Fusce interdum dignissim ante.
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.
CalloutWide Plain
The Callout Wide images here are 260 wide. They can be any height and width. Float to the right or left using the style dropdown.
Data Tables
| ColorRow | Heading | Heading |
|---|---|---|
| Heading | Data | Data |
| Heading | Data | Data |
| Heading | Data | Data |
| ColorRow | Heading | Heading |
|---|---|---|
| Heading | Data | Data |
| Heading | Data | Data |
| Heading | Data | Data |
| ColorRow | Heading | Heading |
|---|---|---|
| Heading | Data | Data |
| Heading | Data | Data |
| Heading | Data | Data |
| Heading | Heading | Heading |
|---|---|---|
| Heading | Data | Data |
| Heading | Data | Data |
| Heading | Data | Data |
| Heading | Heading | Heading |
|---|---|---|
| Heading | Data | Data |
| Heading | Data | Data |
| Heading | Data | Data |
| Heading | Heading | Heading |
|---|---|---|
| Heading | Data | Data |
| Heading | Data | Data |
| Heading | Data | Data |
Image Styles
Assign the class via the dropdown menu under alt text when adding an image to the Content area.
Image Captions
Caption Left
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.
Caption Right
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.
Dropshadow Right
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.
Dropshadow Left
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.
Inline Images
Tabs and Accordions
Tabbed Container
Tab One
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.
Tab Two
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.
Accordion
Can use regular or independent triggers.
Trigger 1
Panel 1
This is the content area for Panel 1
Trigger 2
Panel 2
This is the content area for Panel 2
Trigger 3
Panel 3
This is the content area for Panel 3
Fancy Box Styles
Video Styles
YouTube Videos
By adding a class of "YouTubeVideo" to your link, the video will open in a FancyBox
If a link (a href="/") with a class of "YouTubeVideo" is around an image, the play button icon is automatically added.
Code for this will look like:
<a class="YouTubeVideo" href="/"><img alt="" src="https://www.owensborohealth.org/path/image-name.jpg" /></a>
I think you'll see the numbers streamline into the best possible outcomes for current smokers, former smokers and people affected by smoking," Dr. Padgett said. "As we get more people in the system, we'll find cancers that are smaller and see fewer advanced cases."
Dr. Patrick Padgett, MD