palette
#262627
#3B3B3F
#65656C
#999d9f
#BBBDC0
#EFEFF0
#FCFCFC
#106A71
#A4C6CB
#BCC200
#BF1722
#CC8100
#178801
Type
Header H1
Header H2
Header H3
Header H4
Header H5
Header H6
SubHeader H3
SubHeader Secondary
SubHeader H4
SubHeader H5
SubHeader H6
paragraph.large. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus orci vel urna ultrices venenatis. Mauris imperdiet pulvinar vehicula. Donec convallis enim nec risus aliquam, at varius velit dictum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus orci vel urna ultrices venenatis. Mauris imperdiet pulvinar vehicula. Donec convallis enim nec risus aliquam, at varius velit dictum.
Header H3
paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus orci vel urna ultrices venenatis. Mauris imperdiet pulvinar vehicula. Donec convallis enim nec risus aliquam, at varius velit dictum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus orci vel urna ultrices venenatis. Mauris imperdiet pulvinar vehicula. Donec convallis enim nec risus aliquam, at varius velit dictum.
Header H4
paragraph.small. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus orci vel urna ultrices venenatis. Mauris imperdiet pulvinar vehicula. Donec convallis enim nec risus aliquam, at varius velit dictum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus orci vel urna ultrices venenatis. Mauris imperdiet pulvinar vehicula. Donec convallis enim nec risus aliquam, at varius velit dictum.
Blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus orci
Here is a link - Large Inline links in paragraph tags should be pretty obvious.
Here is a link - Small Inline links in paragraph tags should be pretty obvious.
Util Label venenatis. Mauris imperdiet pulvinar vehicula. Donec convallis enim nec risus aliquam, at varius velit dictum.Blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus orci Author
Here is a link Inline links in paragraph tags should be pretty obvious.
Util Link Places like the masthead or blog meta data
Util Label Places like the cart labels or key value pairs
.emphasized paragraph text
Header H1
Header H2
Header H3
Header H4
Header H5
Header H6
SubHeader H3
SubHeader Secondary
SubHeader H4
SubHeader H5
SubHeader H6
paragraph.large. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus orci vel urna ultrices venenatis. Mauris imperdiet pulvinar vehicula. Donec convallis enim nec risus aliquam, at varius velit dictum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus orci vel urna ultrices venenatis. Mauris imperdiet pulvinar vehicula. Donec convallis enim nec risus aliquam, at varius velit dictum.
Header H3
paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus orci vel urna ultrices venenatis. Mauris imperdiet pulvinar vehicula. Donec convallis enim nec risus aliquam, at varius velit dictum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus orci vel urna ultrices venenatis. Mauris imperdiet pulvinar vehicula. Donec convallis enim nec risus aliquam, at varius velit dictum.
Header H4
paragraph.small. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus orci vel urna ultrices venenatis. Mauris imperdiet pulvinar vehicula. Donec convallis enim nec risus aliquam, at varius velit dictum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus orci vel urna ultrices venenatis. Mauris imperdiet pulvinar vehicula. Donec convallis enim nec risus aliquam, at varius velit dictum.
Blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus orci
Here is a link - Large Inline links in paragraph tags should be pretty obvious.
Here is a link - Small Inline links in paragraph tags should be pretty obvious.
Util Label venenatis. Mauris imperdiet pulvinar vehicula. Donec convallis enim nec risus aliquam, at varius velit dictum.Blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus orci Author
Here is a link Inline links in paragraph tags should be pretty obvious.
Util Link Places like the masthead or blog meta data
Util Label Places like the cart labels or key value pairs
.emphasized paragraph text
Buttons
Default
Primary
Secondary
Tertiary
button--arrow
Default
Primary
Secondary
Tertiary
button--arrow
Links
Dividers
Forms
Alert
Layout
Spaced Section
.stacked-component
Another Spaced Section, Medium Spacing
.stacked-component.spacing-md
Stacked Spaced Sections, Spacing Small, Same Theme
.stacked-component.spacing-sm
This section has no padding-top
.stacked-component.spacing-sm + .stacked-component.spacing-sm
Spacing
The layout centers around a vertical rhythm of 20px which is equal to the base line height and blocks of text. Gutters are also equal to this base line height. Note that these are only variables and there are not classes mapped to these variables.
Background Themes
.theme-negative or .u-negative
.theme-dark
.theme-primary
.theme-gray
.theme-light-gray
.theme-light
.theme-transparent