Quick Access Links

Above Main Text

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

Three 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

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
placeholder

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.

placeholder

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

placeholder

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.

  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.

placeholder

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-ColorRow Heading Heading
Heading Data Data
Heading Data Data
Heading Data Data
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

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

placeholder
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 width for the Slider element on a three column template should be 894px wide. Height 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.

Alt text photo 1

Need Care Now?

Visit our walk-in clinics for immediate care when you need it most.

Find a Walk-In Clinic
Alt text photo 2

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
Alt text photo 3

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
Alt text photo 4

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
Alt text photo 5

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
Alt text photo 6

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. However, we would not reccomend using more than five tabs on a Three Column template.

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

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

Play YouTube Video

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="placeholder" src="//placehold.it/650x400" />
</a>

Below is an example of what this would look like on the site.

placeholder

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.

Play YouTube VideoHeading 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>

Below Main Left

445 Max Width, Flexible Height.

Below Main Right

445 Max Width, Flexible Height.

Below Main Text

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

Call To Action

Indented Heading

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

Text Link

Arrow-Link

Button

Image Max Width

350 Max Width, Flexible Height.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Heading 4

Unordered List

  • List Item One
  • List Item Two
    • List Item Two A
    • List Item Two B
  • List Item Three
  • List Item Four
Heading 5

Ordered List

  1. List Item One
  2. List Item Two
  3. list Item three
Heading 6

Phasellus auctor, velit non commodo rutrum, felis wisi faucibus ligula, facilisis ornare sem magna a magna.

Pediatric Hematology/

Oncology Clinic

2018 Clinch Avenue
South Tower
Knoxville, TN 37916

Hours: 8:00 am to 4:30
Mondays through Fridays.
Phone: (865) 541-8266

Heading 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Heading 4

Unordered List

  • List Item One
  • List Item Two
    • List Item Two A
    • List Item Two B
  • List Item Three
  • List Item Four
Heading 5

Ordered List

  1. List Item One
  2. List Item Two
  3. list Item three
Heading 6

Phasellus auctor, velit non commodo rutrum, felis wisi faucibus ligula, facilisis ornare sem magna a magna.

Related Locations

Upcoming Events

  • Camp Eagle's Nest

    Camp Eagle's Nest will welcome campers for a day camp experience during the summer of 2021. WHEN: Friday, July 23 - Saturday, July 24, 2021 WHERE: University of Tennessee campus

  • Safe Sitter Classes (Ages 11-14)

    Learn correct babysitting techniques, emergency responses and how to use babysitting as a business.

  • Children's Hospital Butterfly Run

    Lace up your running shoes and join us at the Knoxville World's Fair Park on August 7 for a 5k, 10k or fun run/walk. Funds raised directly benefit our patients and their families.

  • CPR Classes (Ages 14+)

    Learn CPR so you can respond to emergencies in your home.

Upcoming Events

  • Jul
    23
    Friday
    8:00 AM - 3:30 PM
    Camp Eagle's Nest will welcome campers for a day camp experience during the summer of 2021. WHEN: Friday, July 23 - Saturday, July 24, 2021 WHERE: University of Tennessee campus
  • Jul
    24
    Saturday
    9:00 AM - 3:00 PM
    Learn correct babysitting techniques, emergency responses and how to use babysitting as a business.
  • Aug
    7
    Saturday
    8:30 AM - 12:00 PM
    Lace up your running shoes and join us at the Knoxville World's Fair Park on August 7 for a 5k, 10k or fun run/walk. Funds raised directly benefit our patients and their families.
  • Aug
    21
    Saturday
    9:00 AM - 3:00 PM
    Learn correct babysitting techniques, emergency responses and how to use babysitting as a business.
  • Sep
    18
    Saturday
    9:00 AM - 3:00 PM
    Learn correct babysitting techniques, emergency responses and how to use babysitting as a business.

Upcoming Classes & Events

  • Jul
    23
    Friday
    8:00 AM - 3:30 PM
    Camp Eagle's Nest will welcome campers for a day camp experience during the summer of 2021. WHEN: Friday, July 23 - Saturday, July 24, 2021 WHERE: University of Tennessee campus
  • Jul
    24
    Saturday
    9:00 AM - 3:00 PM
    Learn correct babysitting techniques, emergency responses and how to use babysitting as a business.
  • Aug
    7
    Saturday
    8:30 AM - 12:00 PM
    Lace up your running shoes and join us at the Knoxville World's Fair Park on August 7 for a 5k, 10k or fun run/walk. Funds raised directly benefit our patients and their families.
  • Aug
    21
    Saturday
    9:00 AM - 3:00 PM
    Learn correct babysitting techniques, emergency responses and how to use babysitting as a business.

Right Column Panel

Right column images on a Right Column Template should be 350px max width, image height is flexible.

Button Text