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. Ac pellentesque tristique fames morbi egestas turpis et habitant malesuada netus et senectus.
Body body-2. Turpis tristique ac et habitant pellentesque malesuada netus morbi senectus fames egestas et.
Body body-3. Malesuada netus egestas habitant ac turpis et morbi tristique et pellentesque senectus fames.
Body body-4. Ac turpis netus senectus tristique malesuada habitant et pellentesque et fames morbi egestas.
Body body-5. Netus turpis morbi senectus ac tristique pellentesque et habitant malesuada fames egestas 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.