Skip to Content

  • Site Search

Microsite VitalSite Styles

Left Column Panel h3

Header 3

Header 4

Header 5
Header 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea text link.

Ordered List

  1. List Item

Unordered List

  • List Item

Microsite VitalSite Styles

Here you will find examples of all styles you have access to through VitalSite drop downs and predefined templates.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

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 item 1
  • 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 item 1
    • Nested unordered list item 2
  • Unordered list item 3
  1. First ordered list item
  2. Second ordered list item
  3. Third ordered list item

Buttons

Yellow Button Style

Blue Button Style

Green Button Style

Call To Actions

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.

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.

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.

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.

Read More

Callouts

Callout Right

Callout Right images should be 400 max width. Flexible height.

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 400 wide. They can be slightly larger if needed. Flexible height.

Read More

Heading 4

Callout Right Plain

Callout Right Plain images should be 400 max width. Flexible height.

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.

CalloutWide Plain

The Callout Wide plain images here are 400 wide. They can be slightly larger if needed. Flexible height.

Read More

Image Captions

Caption

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam dui. Etiam sapien est, vestibulum quis, cursus ac, feugiat quis, quam. Curabitur lorem. Praesent condimentum augue vel massa. Sed tincidunt fringilla est. Aliquam sapien orci, fringilla sit amet, commodo nonummy, dignissim commodo, dui. In auctor aliquam orci.

Etiam venenatis varius eros. Phasellus ultrices rutrum mauris. Sed non lectus. Fusce hendrerit neque at justo. Etiam tempus egestas dolor.

Caption

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam dui. Etiam sapien est, vestibulum quis, cursus ac, feugiat quis, quam. Curabitur lorem. Praesent condimentum augue vel massa. Sed tincidunt fringilla est. Aliquam sapien orci, fringilla sit amet, commodo nonummy, dignissim commodo, dui. In auctor aliquam orci.

Etiam venenatis varius eros. Phasellus ultrices rutrum mauris. Sed non lectus. Fusce hendrerit neque at justo. Etiam tempus egestas dolor.

Small Image Captions

Caption

Caption Left Small makes the caption container width auto (will be as wide as the image as you put in.) You will want to use an image 150px wide or smaller. If the caption text is wider than your image, you will want to add a manual line break to make it two lines (Shift + Return in the WYSIWYG).

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam dui. Etiam sapien est, vestibulum quis, cursus ac, feugiat quis, quam. Curabitur lorem. Praesent condimentum augue vel massa. Sed tincidunt fringilla est. Aliquam sapien orci, fringilla sit amet, commodo nonummy, dignissim commodo, dui. In auctor aliquam orci.

Etiam venenatis varius eros. Phasellus ultrices rutrum mauris. Sed non lectus. Fusce hendrerit neque at justo. Etiam tempus egestas dolor.

Caption

Caption Right Small makes the caption container width auto (will be as wide as the image as you put in.) You will want to use an image 150px wide or smaller. If the caption text is wider than your image, you will want to add a manual line break to make it two lines (Shift + Return in the WYSIWYG).

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam dui. Etiam sapien est, vestibulum quis, cursus ac, feugiat quis, quam. Curabitur lorem. Praesent condimentum augue vel massa. Sed tincidunt fringilla est. Aliquam sapien orci, fringilla sit amet, commodo nonummy, dignissim commodo, dui. In auctor aliquam orci.

Etiam venenatis varius eros. Phasellus ultrices rutrum mauris. Sed non lectus. Fusce hendrerit neque at justo. Etiam tempus egestas dolor.

Tables

Border Table
ColorRowHeadingHeading
Heading Data Data
Heading Data Data
Heading Data Data

Border2 Table
ColorRowHeadingHeading
Heading Data Data
Heading Data Data
Heading Data Data

Border3 Table
ColorRowHeadingHeading
Heading Data Data
Heading Data Data
Heading Data Data

AutoWidth Table
HeadingHeadingHeading
Heading Data Data
Heading Data Data
Heading Data Data

TopBorder Table
HeadingHeadingHeading
Heading Data Data
Heading Data Data
Heading Data Data

BottomBorder Table
HeadingHeadingHeading
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.

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.


Fixed Width Photo Sliders

  • Alt text photo 1
  • Alt text photo 2
  • Alt text photo 3

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.

  • Alt text photo 1
  • Alt text photo 2
  • Alt text photo 3

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.


Tabs and Accordions

Tabbed Container

Tab One

Content area for Tab One

Content area for Tab One

Tab Two

Content area for Tab Two

Content area for Tab Two

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.

Accordion Menu

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

YouTube Video Options

YouTube Embed

You can embed a video from YouTube using a video that has an embed code using 560px.  To make it scale at smaller screen sizes, you will need to wrap the iframe in a div class="YouTubeEmbed".

Test text below the video.

Fancy Box Option

Image that opens overlay

Use an image as click through to a YouTube video in a LightBox popup. Click on the images below.

Stand Alone Image

You can add the YouTubeVideo class on the a href tag on an image sized 340px x 200px. This example has an play icon overlay on it to identify it will play a video.

Floated Left Image

You can add the YouTubeVideo class on the a href tag on an image floated Left. This example has a play button overlay to identify it opens up a video. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.

Floated Right Image

You can add the YouTubeVideo class on the a href tag on an image floated Right. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.

Video from a text link

This is a video text link Click here to see the video inside a sentence.

Call To Action Panel

Sed ut perspiciateis undel omins iste natus error tsit volupmeitem accu santium doloremque landutium Text Link.

Green Button

Right Column Panel h3

Header 3

Header 4

Header 5
Header 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea text link.

Ordered List

  1. List Item

Unordered List

  • List Item