palette
#181818
#3B3B3F
#65656C
#999D9F
#BBBDC0
#EFEFF0
#FCFCFC
#c2d500
#002b49
#181818
#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
a.button
a.button
a.button.button--ghost
a.button.button--primary.button--large
a.button.button--large
a.button.button--small
a.Button--more
a.Button--back
button--arrow, a.button--arrow
a.button
a.button
a.button.button--ghost
a.button.button--primary.button--large
a.button.button--large
a.button.button--small
a.Button--more
a.Button--back
button--arrow, a.button--arrow
Links
Dividers
Forms
Alert
Layout
Margins
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.
Negative Text
.u-negative
class makes all children text, buttons, etc white.