placeholder

Caption line one

Caption line two

Above Main Text

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

Left 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

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

  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
  • Item1
  • Item2
  • Item3

Three Column List

  • Item1
  • Item2
  • Item3
  • Item1
  • Item2
  • Item3
  • Item1
  • Item2
  • Item3

Buttons

Button Default

Teal Button

Purple Button

Orange Button

Green Button

Blue Button

Yellow Button


Call to Action (CTA) Panel

  • When to Use: When the same CTA appears on multiple pages within a section or across the site
  • Where It Appears: The CTA Panel shows up at the top of the right column, if one exists. If there isn’t a right column, the CTA Panel shows up in line with body copy.
  • How to Place It: Build a panel, select the predefined template called “CTA Panel Markup” and then place the panel on the page in Call to Action panel slot in Layout tab
  • Example Uses: schedule an appointment, request information, contact us
  • The panel will stay at the top of the page in tablet and mobile views.

CTA Inline Right and CTA Inline Wide

CTA Inline Right

Supportive text about clever headling. More supportive text about clever headline.

My Button Text

  • When to Use: For a single-use CTA
  • When Not to Use: On a right-column template
  • Where It Appears: The CTA Inline Right shows up in line with the body copy. The CTA Inline Wide shows up across the width of the content area.
  • How to Place It: Create either of the CTAs directly on CMS page using their respective predefined templates: CTA Inline Right and CTA Inline Wide.
  • Example Uses: schedule an appointment, request information, contact us
  • The CTA Inline Right and CTA Inline Wide will stay where they’re placed and move above the paragraph copy in tablet and mobile views.

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.

Make an appointment today


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 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
  • The callouts will stay where they’re placed and move above the paragraph copy in tablet and mobile views.

Callout Right

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

Callout Right 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.

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

Callout Wide Link

Heading 4

Callout Right Plain

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

Callout Right Plain Link

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 images here are 260 wide. They can be any height and width. Float to the right or left using the style dropdown.

Callout Wide Plain Link

Data Tables

Border Table
ColorRow Heading Heading
Heading Data Data
Heading Data Data
Heading Data Data
Border2 Table
ColorRow Heading Heading
Heading Data Data
Heading Data Data
Heading Data Data
Border3 Table
ColorRow Heading Heading
Heading Data Data
Heading Data Data
Heading Data Data
AutoWidth Table
Heading Heading Heading
Heading Data Data
Heading Data Data
Heading Data Data
TopBorder Table
Heading Heading Heading
Heading Data Data
Heading Data Data
Heading Data Data
BottomBorder Table
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

Flexible Width Photo Slider

Photo width for the Left Col template flexslider should be 340px wide if floating left or right. Height is variable. Full-width dimension would be 1075px wide.

Alt text photo 1

Slide One Heading

Testing text. Here is a link

Button

Alt text photo 2

Slide Two Heading

Testing text. Here is a link

Button

Alt text photo 3

Slide Three Heading

Testing text. Here is a link

Button

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.

Alt text photo 1

Slide One Heading

Testing text. Here is a link

Button

Alt text photo 2

Slide Two Heading

Testing text. Here is a link

Button

Alt text photo 3

Slide Three Heading

Testing text. Here is a link

Button

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.

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.

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.

Alt text photo 1

Test Header1

This is test content for the first slide. You should be able to add more as needed.

View services

Alt text photo 2

Test Header Slide2

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 Slide3

This is test content for the third slide. You can add more content as needed. Please keep slide content equivalent for best results.

CTA Button

Tabs and Accordions

A11y Tab Container

Accessible Tab Container on large screens, Accordions on small screen sizes

Accordion to Tabs Heading 1

This accordion is styled as an accordion on small resolutions and tabs at large resolutions.

Accordion to Tabs Heading 2

All these toggles are H2s. These can be changed to lower headings. Remember to nest headings in order appropriately to meet WCAG 2.0 success criteria.

Accordion to Tabs Heading 3

Accordions can contain other accordions, tabs, headings, lists, tables, iframes, anything you like.

A11y Accordion

This is your classic accordion where when one item is clicked the others close

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 toggle heading to make this accordion open by default instead of closed.

Accordion Heading 2

All these toggles are H2s. These can be changed to lower headings. Remember to nest headings in order appropriately to meet WCAG 2.0 success criteria.

Accordion Heading 3

Accordions can contain other accordions, tabs, headings, lists, tables, iframes, anything you like.

A11y Toggle

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

Accordion Multi Heading 1

This accordion can have multiple open at once. Add class of "open" to toggle heading to make this accordion open by default instead of closed.

Accordion Multi Heading 2

All these toggles are H2s. These can be changed to lower headings. Remember to nest headings in order appropriately to meet WCAG 2.0 success criteria.

Accordion Multi Heading 3

Accordions can contain other accordions, tabs, headings, lists, tables, iframes, anything you like.


Fancy Box Styles

Example of thumb image linked to a larger image. Description overlay is title attribute of link:
Test image


Video Styles

YouTube Videos

By adding a class of "YouTubeVideo" to your link, the video will open in a FancyBox

Play YouTube Video

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="/path/image-name.jpg" /></a>

Convenient Location(s)

Related Video

Patient Story: Bev Bolduc

Bev Bolduc arrived at Concord Hospital in February 2016 with more than a dozen bones below her waist broken or shattered. A pickup truck had skidded on slippery Route 28 in Barnstead after passing a line of cars in a snowstorm and slammed head-on into her.

First responders cut her out of her mangled car, then sped her to Concord Hospital, where she was greeted by a trauma team led by orthopaedic trauma surgeon Dr. Sean Burns of Concord Orthopaedics.

Upcoming Classes & Events

  • Aug
    25
    Sunday
    9:00 AM - 3:30 PM
    This program prepares you and your partner for the journey of birth in a relaxed and supportive environment. It includes a tour of The Family Place.
  • Aug
    26
    Monday
    2:00 PM - 3:00 PM
    Learn basic bleeding control techniques such as direct pressure, wound packing and tourniquet application.
  • Aug
    27
    Tuesday
    10:00 AM - 11:30 AM
    Support, connection, education and empowerment is what you can expect when you attend this support group for new parents and their babies.
  • Aug
    27
    Tuesday
    5:00 PM - 6:00 PM
    If you're having your baby at The Family Place this guided tour of the unit highlights what you can expect during your Hospital stay.

Below Main Left

516 Max Width, Flexible Height.

Below Main Right

516 Max Width, Flexible Height.

Below Main Text

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