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