Right Column Template
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
Use the Styles dropdown within the Admin to first select Heading 2 and then also add the class name of "Indented". This will add space to the left of the that text. Style name in the dropdown appears as "Indented". Below is as example showing the first line not utilizing the class name while the second lines is to achieve the "layered" heading look.
Heading 2 Line 1
Heading 2 Indented
Code for a heading utilizing this style will look like:
<h2>Heading 2 Line 1 Text</h2>
<h2 class="Indented">Heading 2 Indented Text</h2>
Paragraph, List and Link Styles
This is a test paragraph for, link styling. Use the Styles dropdown within the Admin to add a stylized arrow to your link. Style name in the dropdown appears as "Arrow-Link". Test Arrow Link.
Use the Styles dropdown within the Admin to add a class name to the list for preferred bullet styles. Do not add a class if you would like the red bullet style to appear. Style names in the dropdown are "Diamonds" and "Arrows."
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 utilizing "Diamonds" class name.
- List Item 1
- List Item 2
- List Item 2
Unordered List utilizing "Arrows" class name.
- List Item 1
- List Item 2
- List Item 2
Unordered List with style "Plain-List"
- 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
- 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
Below is a standard button utilizing the class name "Button."You can find this button style in the Page/Panel Elements dropdown within the Admin.
Code for a standard button will look like:
<a class="Button" href="//link">Button Text</a>
"Button" style on a link
Below is blue button option if needed, which is utilizing the class names "Button Blue."You can find this button style in the Page/Panel Elements dropdown within the Admin.
Code for a blue button will look like:
<a class="Button Blue" href="//link">Button Text</a>
"Button Blue" style on a link
Below is a white, outlined button utilizing the class name "OutlineButton." You can find this button style in the Page/Panel Elements dropdown within the Admin. The blue background has been added for this specific example.
This button should only be used on a background color where the contrast ratio meets Accessibility Standards. Are you unsure if your proposed color-combo meets the required contrast ratio? Check here.
"OutlineButton" style on a link
Code for an Outline button will look like:
<a class="OutlineButton" href="//link">Button Text<span></span><span></span><span></span><span></span></a>
It is important the Button Text within the <a> tag is followed with four empty <span> tags for hover styles to appear.
Below is a blue, outlined button option if needed, which is utilizing the class names "OutlineButton Blue." You can find this button style in the Page/Panel Elements dropdown within the Admin.
"OutlineButton Blue" style on a link
Code for a Blue Outline button will look like:
<a class="OutlineButton Blue" href="//link">Button Text<span></span><span></span><span></span><span></span></a>
It is important the Button Text within the <a> tag is followed with four empty <span> tags for hover styles to appear.
CTA Inline Right and CTA Inline Wide
CTA Inline Right
Supportive text about clever heading. More supportive text about clever headline. Text Link
CTA Button
- When to Use: For a single-use CTA
- When Not to Use: On a right column or three column template
- Where It Appears: The CTA Inline Right shows up in line with the body copy where it is placed and floated to the right. The CTA Inline Wide shows up across the width of the content area.
- How to Place It: Create either of the CTAs directly on the CMS page using their respective predefined templates: CTA Inline Right and CTA Inline Wide.
- Example Uses: schedule an appointment, request information, contact us
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.
CTA Inline Wide
Supportive text about clever headling. More supportive text about clever headline. Text Link
CTA Button
Callout Right & Callout Wide
- When to Use: When you want to emphasize or highlight information related to the subject of the page.
- Where It Appears: The Callout Right shows up in line with the body copy. The Callout Wide shows up across the width of the content area.
- How to Place It: Create either of the callouts directly on the CMS page using their respective predefined templates: Callout Right or Callout Wide.
- Example Uses: patient stories, pull quote or highlighted comment, virtual tour or any clickable element/action to take that is secondary to the primary CTA for the page
Callout Right
Callout Right images should be 260 max width. Flexible height. This is a text link.
Read More
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.
Heading 3
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.
Callout Wide
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. This is a text link.
Read More
Heading 4
Callout Right Plain
Callout Right Plain images should be 260 max width. Flexible height. This is a text link.
Read More
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.
Heading 5
Nulla porta, nunc a viverra eleifend, augue mi molestie turpis, et facilisis est tellus venenatis eros. Vivamus eleifend, turpis et dictum euismod, arcu eros dignissim massa, sed interdum wisi mi id neque.
- 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.
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. This is a text link.
Read More
Data Tables
Border Table
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 |
Border2 Table
Table-ColorRow |
Heading |
Heading |
Heading |
Data |
Data |
Heading |
Data |
Data |
Heading |
Data |
Data |
Border3 Table
Table-ColorRow |
Heading |
Heading |
Heading |
Data |
Data |
Heading |
Data |
Data |
Heading |
Data |
Data |
AutoWidth Table
Heading |
Heading Col1 |
Heading Col2 |
Heading |
Data |
Data |
Heading |
Data |
Data |
Heading |
Data |
Data |
Image Captions
Caption Left
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.
Caption Right
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.
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.
Slider
This Slider feature can contain up to six different slides. Photo height for the Slider element is variable.Use the following class names on the outside div of each slide to achieve their background color: "Blue-BG", "Green-BG", ""Purple-BG", "Teal-BG", "Mauve-BG", "Plain-BG", and "Red-BG". Below is an example showing each slide using a different class name, other than red.
Test Header Slide 2
This is test content for the second slide. You can add more content as needed. Please keep slide content equivalent for best results.
View Bone & Joints
Test Header Slide 3
This is test content for the third slide. You can add more content as needed. Please keep slide content equivalent for best results.
CTA Button3
Test Header Slide 4
This is test content for the third slide. You can add more content as needed. Please keep slide content equivalent for best results.
CTA Button4
Test Header Slide 5
This is test content for the third slide. You can add more content as needed. Please keep slide content equivalent for best results.
CTA Button5
Test Header Slide 6
This is test content for the third slide. You can add more content as needed. Please keep slide content equivalent for best results.
CTA Button6
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 Container
Accessible Tab Container on large screens, Accordions on small screen sizes. This Tab Container was designed and styled to display up to six different tabs.
Tab Heading 1
This accordion is styled as an accordion on small resolutions and tabs at large resolutions.
Button Text
Tab Heading 2
Heading Text
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.
Button Text
Tab Heading 4
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.
Tab Heading 5
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.
Button Text
Tab Heading 6
Heading Text
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.
"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.
Button Text
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
Heading Text
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 Heading 4
Content for the fourth accordion.
Accordion Heading 5
Content for the fifth accordion.
Button Text
Accordion Heading 6
Heading Text
Content for the sixth accordion.
"Accordion (independent triggers)"
Like an accordion but each item opens and closes independently of the others
Accordion Heading 1
Content for the first accordion. Just a regular link.
Accordion Multi Heading 2
Heading Text
Content for the second accordion.
Accordion Multi Heading 3
Content for the third accordion.
Button Text
Accordion Multi Heading 4
Content for the fourth accordion.
Accordion Multi Heading 5
Heading Text
Content for the fifth accordion.
Accordion Multi Heading 6
Content for the sixth accordion.
Button Text
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.
Use the Styles dropdown within the Admin to add a class name to your link.
Plain Background - Lightbox
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="//www.youtube.com/embed/l8glB7jZCHs">
<img alt="placeholder" src="//placehold.it/650x400" />
</a>
Below is an example of what this would look like on the site.

Aquarium Wall Background - Lightbox - With and Without Caption
By adding the class names of "YouTubeVideo" and "AquarumBG" to your link, your nested image will get an overlay of a play icon and your link (YouTube video) will open within a lightbox. The Aquarium Wall background image will also be added. Please use the YouTube embed path for your link.
Use the Styles dropdown within the Admin to add class names to your link.
If a link (a href="/") with classes of "YouTubeVideo AquariumBG" is around an image, the play icon is automatically added, as well as the Aquarium Wall background.
Code utilizing the class "AquariumBG" and NOT utilizing the class "Caption" for this will look like:
<a class="YouTubeVideo AquariumBG" href="//www.youtube.com/embed/l8glB7jZCHs">
<img alt="" src="//placehold.it/650x400" />
</a>
Below is an example of what this would look like on the site.
If a link (a href="/") with all three classes of "YouTubeVideo," "AquariumBG" and "Caption" is around an image, and the image is followed up with the "CaptionWrap" span within the link tag, an editable blue caption box will appear directly under the video. Do not use the class name "Caption" unless you have decided to include a caption.
Use the Styles dropdown within the Admin to add class names to your link.
Code utilizing the classes "YouTubeVideo AquariumBG Caption" for this will look like:
<a class="YouTubeVideo AquariumBG Caption" href="//www.youtube.com/embed/l8glB7jZCHs">
<img alt="placeholder" src="/path/image-name.jpg" />
<span class="CaptionWrap">
<span class="VideoTitle">Heading Text for Video</span>
<span class="VideoCaption">Content describing the video goes here.</span>
</span>
</a>
Below is an example of what this would look like on the site.
Heading Text for VideoContent describing the video goes here.
Embedded Video
Below is an embedded video iframe utilizing a plain background. You can find this video style named "Video BG - Plain" in the Page/Panel Elements dropdown within the Admin. Be sure to update the title attribute, as well as the video source link.
Code utilizing the class "VideoBGPlain" for this will look like:
<div class="VideoBGPlain">
<iframe src="https://www.youtube.com/embed/K2WxoI66Jew" frameborder="0" height="315" width="560" title="Play Video: A Visit to the Hem/Onc Clinic" allowfullscreen>
</iframe>
</div>
Embedded Video - Aquarium Background
Below is an embedded video iframe utilizing the Aquarium Wall background image. You can find this video style named "Video BG - Aquarium" in the Page/Panel Elements dropdown within the Admin. Be sure to update the title attribute, as well as the video source link.
Code utilizing the class "VideoBGAquarium" for this will look like:
<div class="VideoBGAquarium">
<iframe src="https://www.youtube.com/embed/K2WxoI66Jew" frameborder="0" height="315" width="560" title="Play Video: A Visit to the Hem/Onc Clinic" allowfullscreen>
</iframe>
</div>