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