VitalSite Styles Defined

Listed below are the style options available within this site:

The "Place-Phone-Link-On-Icon" style can be applied to an anchor tag surrounding one phone number within the "Templates: Mobile Phone Numbers" panel. If this style is placed this one link will become directly clickable without expanding the menu to display the phone number. By taking this class off, the phone number or numbers will be listed within the expandable mobile menu. This style (along with the "Templates: Mobile Phone Numbers" panel) will only apply on small screens. [TEMPORARILY DOES NOT WORK]

"ClearBoth" style can be placed on text after a floated element that you do not want to wrap up beside another element.

"nowrap" style can be placed on text that you want to prevent from wrapping.

"Right", "Left" and "Center" styles can be added to images that you want to align left or right of your text or in the center of the content area.

"TextAlignCenter" style can be placed on headers or paragraph text to align the text center.

"TextAlignRight" style can be placed on headers or paragraph text to align the text right.

'Button' style can be added to (<a>) anchor tags to allow the link to appear as a button.

"Arrow-Link" can be added to an anchor tag (link) to add an arrow style right of the link.

"Plain-List" can be added to an unordered list <ul> tag to remove the bullets and remove the left padding/margins.

"TwoColum", "ThreeColumn" or "FourColumn" can be added to an unordered list <ul> tag or a div tag to place direct elements within a column structure as the screen allows. These columns do not remain as set columns on smaller screens. On phone size screens they all will default back to a single column.

"Table-Border1", "Table-Border2" or "Table-Border3" can be applied to a table tag to apply differing sets of borders. Examples can be found in the content guide.

"Table-ColorRow" can be applied to the <tr> tag to create a different colored background on a particular table row.

"AutoWidth" can be placed on a table tag to allow the table's width to default to the width of the content within. This will overwrite the default 100% width of the table. This can be used on other elements as well to create an width: auto; style.

The "LightGreyPanel", "MidGreyPanel" and "DarkGreyPanel" styles can be applied to any element within a panel to have that particular panel have the mentioned background color. This will apply within the above footer panel area.

"Img-SemiWhite" and "Img-SemiBlack" can be applied to an image tag on the home page banner to apply an overlay to the banner image so that it is possible to use text over the image without the background on the text box. This allows you to meet the color contrast requirements set for accessibility.

"Reversed" can be applied to the "PhotoText" div (first div outside of the text) to create white text with a dark background on the home page banner. 

"NoBackground" can be applied to the "PhotoText" div (first div outside of the text) to remove the semi white or semi black background behind the text. If you used "NoBackground" and "Reversed" styles together then you need to make sure you are using the "Img-SemiBlack" style on the banner image to meet color contrast requirements.

"Img-Focus-Left", "Img-Focus-Center" or "Img-Focus-Right" can be used on the home banner image to allow the mobile view of the banner image to crop into the focus area. (For example, "Img-Focus-Right" will crop out the left side of the image when viewing this page on a phone.)

"Lightbox-for-img" can be applied to a link (<a> tag) to allow an image source to open within a lightbox.
"Lightbox-for-video" can be applied to a link (<a> tag) to allow a YouTube video source to open within a lightbox.
"Lightbox-for-iframe" can be applied to a link (<a> tag) to allow the link source to open within an iframe inside a lightbox.

"YouTubeVideo" can be applied to a link (<a> tag) on an image which will allow the video source to open in an iframe and also adds a play button over the image on the page.


Additional styles below the "do_not_use_below_here______" should not be used from the style dropdown. These additional styles are automatically added to the correct elements when you insert Page/Panel Elements from within the text editor.

Call To Action Panel

  • 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  Secondary Button

Our website uses cookies

This website uses cookies to give you the very best experience. Your continued use of this site is considered permission by you to use cookies in this manner. Please review our Privacy Policy and Terms of Use for more information about the data we collect and the types of cookies we use. Please note, if you link off our website to a 3rd party site of any kind, that website has its own terms and conditions.