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

1. List item one
   1. Nested ordered list item 1
   2. Nested ordered list item 2
2. The second list item
3. 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

• 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.

---

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

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.

Heading 4

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.

1. Morbi consectetuer est in neque
2. Etiam ullamcorper, justo sed scelerisque
3. 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.

---

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

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

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.

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.

"Accordion"

This is your classic accordion where when one item is clicked the other closes

"Accordion (independent triggers)"

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

---

Lightbox Styles

• Lightbox Image - "Lightbox-for-image"
• Lightbox Video - "Lightbox-for-video"
• Lightbox iFrame -"Lightbox-for-iframe"

---

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>