Site Style Guide
Colors
white
#ffffff
black
#000000
light gray
#f3f3f5
medium gray
#b9b9b9
blue
#2656ff
Headings
Header Level 1
Header Level 2
Header Level 3
Header Level 4
Header Level 5
Header Level 6
The following are p tags with a heading class like h1
Tag with class h1
Tag with class h2
Tag with class h3
Tag with class h4
Tag with class h5
Tag with class h6
Body Copy
Eyebrow Text
Basic body copy sentence. Habitant morbi tristique senectus et netus et malesuada fames ac turpis
Body body-1. Habitant malesuada et senectus morbi pellentesque netus egestas fames turpis ac tristique et.
Body body-2. Et fames habitant tristique turpis et morbi egestas senectus netus pellentesque malesuada ac.
Body body-3. Egestas et turpis pellentesque ac malesuada et senectus habitant morbi netus fames tristique.
Body body-4. Malesuada tristique ac turpis fames et netus habitant et senectus morbi egestas pellentesque.
Body body-5. Morbi turpis pellentesque netus egestas fames tristique habitant ac malesuada et senectus et.
Quote
John Doe, PositionButtons
Primary Buttons
Secondary Buttons
Dark Buttons
Light Buttons
Black Buttons
White Buttons
Module Cards
Eyebrow
Welcome to VSS Advantage
Eyebrow
Welcome to VSS Advantage with a bit longer title
Eyebrow
Welcome to VSS Advantage
Eyebrow
Welcome to VSS Advantage with a bit longer title
Accordion Styles
Accordion example 1
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 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.
Accordion example 2
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 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.
Accordion example 3, with a longer title to illustrate how this should wrap correctly.
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 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.
Accordion example 4
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 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.