Left Column

Contact Us

Contact the Cancer Program at 562.698.0811 Ext. 12896 for more information about our cancer services

Schedule an appointment

Left Column Template

Max width of this section is 1138px, the height is variable. 

Here you will find examples of all styles you have access to through VitalSite dropdowns and page/panel elements. Test anchor link.


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.

Address Block

Name
Address One
Address Two
City, State 12345

Break Block Styles

Highlight the block of text you would like to have a page break inserted at the end of and select "BreakSpace" in the Styles dropdown within VitalSite. (DO NOT include the last line of text in your highlight. Example... below I highlighted Line 1, Line 2, and Line 3 all at once and then selected the "BreakSpace" style from the dropdown.)

Line 1

Line 2

Line 3

Line 4

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

Two Column List - using divs

Header title

Paragraph text can go here

  • list item
  • list item
  • list item
Header title

Paragraph text can go here

  • list item
  • list item
  • list item

Three Column List

  • Item1
  • Item2
  • Item3
  • Item4
  • Item5
  • Item6
  • Item7
  • Item8
  • Item9

Three Column List - using divs

Header title

Paragraph text can go here

  • list item
  • list item
  • list item
Header title

Paragraph text can go here

  • list item
  • list item
  • list item
Header title

Paragraph text can go here

  • list item
  • list item
  • list item

Four Column List

  • Item1
  • Item2
  • Item3
  • Item4
  • Item5
  • Item6
  • Item7
  • Item8
  • Item9
  • Item10
  • Item11

Four Column List - using divs

Header title

Paragraph text can go here

  • list item
  • list item
  • list item
Header title

Paragraph text can go here

  • list item
  • list item
  • list item
Header title

Paragraph text can go here

  • list item
  • list item
  • list item
Header title

Paragraph text can go here

  • list item
  • list item
  • list item

Buttons

"Button" style on a link

"Button Outline" style on a link

"Skew Button" style on a link

"Skew Button Outline" style on a link


Buttons - Same Width

"Button" style on a link

"Button Outline" style on a link

"Skew Button" style on a link

"Skew Button Outline" style on a link


CTA Inline Right and CTA Inline Wide

CTA Inline Right

Supportive text about clever heading. More supportive text about clever headline. Text Link

testing Arrow-Link Will remove

Button Text

Skew 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 heading. More supportive text about clever headline. Text Link

testing Arrow-Link Will remove

Button Text

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

Button

Skew Button

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.

Button

Skew Button

Heading 4

CalloutRight Plain

Callout Right Plain images should be 260 max width. Flexible height. This is a text link.

Button

Skew Button

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. This is a text link.

Button

Skew Button


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
Table Striped
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

This is a portrait image on 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

Slider with Captions:  Photo width for the "Slider" element on a left column template should be 1067px wide. Height is variable.

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

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.

Slider Photo

Allows for varying widths and heights. If you have multiple photo sliders on a page use lazy load functionality. To do this replace the src with data-lazy

Event Heading Goes here

Alt text photo 1 Alt text photo 2 Alt text photo 3 Alt text photo 4 Alt text photo 5 Alt text photo 6 Alt text photo 7 Alt text photo 8

Slider Video

This slider supports multiple videos. 

Event Heading Goes here


Tab Container

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

Tab Heading 1

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

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

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.

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

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

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 (independent triggers)"

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(s) to make the accordion section open by default instead of closed.

Accordion Multi 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 Multi 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.


Lightbox Styles

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


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.

Play YouTube Video

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

Video iframe

When using an iframe be sure to add a title for accessibility purposes. 

<iframe title="Watch Video: Video title goes here" width="1280" height="720" src="https://www.youtube.com/embed/XqRd9TBcuk8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Slider for Good Sam

Slider - Insert Pre-defined template- "Slider"

Photo width for the "Slider" element on a three column template should be 894px wide. Height is variable.

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

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.

Below Main Text - Left Column Template Only

Content Guide

Ideal image size for this content area is 1138px wide. Height is flexible. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. This is a text link.

Header h3

Header h4

Header h5
Header h6

Ordered List

  1. List Item

Unordered List

  • List Item

"Button" style on a link

"Skew Button" style on a link

Below Main Text - Left Column Template Only - LightPanel

Content Guide

Ideal image size for this content area is 1138px wide. Height is flexible. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. This is a text link.

Header h3

Header h4

Header h5
Header h6

Ordered List

  1. List Item

Unordered List

  • List Item

"Button" style on a link

"Skew Button" style on a link

Below Main Text - Left Column Template Only - BlueGreenPanel

Content Guide

Ideal image size for this content area is 1138px wide. Height is flexible. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. This is a text link.

Header h3

Header h4

Header h5
Header h6

Ordered List

  1. List Item

Unordered List

  • List Item

"Button" style on a link

"Skew Button" style on a link

Related Locations

Below Main Panel - Default Background

heading 3

heading 4

heading 5
heading 6

You can change the background of this panel by adding one of the following styles: LightPanel, BlueGreenPanel, or BrightBluePanel

Content Guide

The max-width of this image is 1640px. If using a smaller image you can float it left or right of the text so it will wrap. This image is responsible and has a flexible height. 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Here is a text link.

Unordered List

  • List Item

Ordered List

  1. List Item

ButtonSkew Button

Below Main Panel - Blue Green Background

heading 3

heading 4

heading 5
heading 6

Content Guide

The max-width of this image is 1640px. If using a smaller image you can float it left or right of the text so it will wrap. This image is responsible and has a flexible height. 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Here is a text link.

Unordered List

  • List Item

Ordered List

  1. List Item

ButtonSkew Button

Below Main Panel - Bright Blue Background

heading 3

heading 4

heading 5
heading 6

Content Guide

The max-width of this image is 1640px. If using a smaller image you can float it left or right of the text so it will wrap. This image is responsible and has a flexible height. 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Here is a text link.

Unordered List

  • List Item

Ordered List

  1. List Item

ButtonSkew Button

Below Main Panel - Light Background

heading 3

heading 4

heading 5
heading 6

Content Guide

The max-width of this image is 1640px. If using a smaller image you can float it left or right of the text so it will wrap. This image is responsible and has a flexible height. 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Here is a text link.

Unordered List

  • List Item

Ordered List

  1. List Item

ButtonSkew Button

Below Left

Content Guide

The ideal image width for this panel is 150px and either floated left or right, so the text will wrap. At 150px wide the image will display properly at all screen resolutions. Height is flexible. 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Here is a text link.

Unordered List

  • List Item

Ordered List

  1. List Item

Below Right

Content Guide

The ideal image width for this panel is 150px and either floated left or right, so the text will wrap. At 150px wide the image will display properly at all screen resolutions. Height is flexible. 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Here is a text link.

Unordered List

  • List Item

Ordered List

  1. List Item