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