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.
Additional styles built in
"Caps" will style your text in Uppercase.
"Orange" will change the text color to orange.
"White" will change the text color to white. (style not applied here. It can only be used on dark backgrounds such as over a dark banner or background image.)
"LargeThin" sizes the text 125% and uses web font Museo Sans W01 100.
"Large" sizes the text 125% and uses web font Museo Sans W01 300.
(This is the default font used on the site.)
"LargeBold" sizes the text 125% and uses web font Museo Sans W01 500.
"LargeBolder" sizes the text 125% and uses web font Museo Sans W01 700.
"LargeBoldest" sizes the text 125% and uses web font Museo Sans W01 900.
"LargerThin" sizes the text 150% and uses web font Museo Sans W01 100.
"Larger" sizes the text 150% and uses web font Museo Sans W01 300.
(This is the default font used on the site.)
"LargerBold" sizes the text 150% and uses web font Museo Sans W01 500.
"LargerBolder" sizes the text 150% and uses web font Museo Sans W01 700.
"LargerBoldest" sizes the text 150% and uses web font Museo Sans W01 900.
A WYSIWYG tip: If you want your style to apply to the paragraph tag, then first select the entire paragraph, then click on the p at the bottom of the WYSIWIYG window (where it says Path: p), then apply your style from the drop down menu. If you do not do this, it is likely that it will create a span tag with the style inside of your paragraph tag.
Styles that come standard
"TextAlignRight" can be used on paragraph tags to align text to the right.
"TextAlignCenter" can be used on paragraph tags to align text center.
"Right" can be added to an image tag to align an image right. Place the image before the text if you want the image to align to the right of the text. In this example the image is after this set of text.
Place a style of "ClearBoth" on a tag to clear a floated element. Sometimes you will get a stair stepped appearance if you do not use this style to clear the float. If this paragraph did not have the "ClearBoth" style on it, then it would show up to the left of the image above.
"Center" can be added to an image tag to align an image to the center.
"Plain" can be added to an unordered list to remove the bullets. Be sure that the style is applied to the ul tag for this to work correctly.
- List Item One
- List Item Two
- List Item Three
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
- First ordered list item
- Second ordered list item
- Third ordered list item
Callouts
Callout Right
Callout Right images should be 162 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 162 wide. They can be slightly larger if needed. Flexible height.
Read More
Heading 4
Callout Right Plain
Callout Right Plain images should be 162 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.
- Morbi consectetuer est in neque
- Etiam ullamcorper, justo sed scelerisque
- 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 162 wide. They can be slightly larger if needed. Flexible height.
Read More
Image Captions
Caption Left
Caption Right
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
| 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.
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 Slider
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
