Typography

Important: Lineheights have not been defined in style guide design. We're defaulting to 1.5 across all headings for the time being.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Paragraph

Mauris non tempor quam, et lacinia sapien. Mauris accumsan eros eget libero posuere vulputate. Etiam elit elit, elementum sed varius at, adipiscing vitae est. Sed nec felis pellentesque, lacinia dui sed, ultricies sapien. Pellentesque orci lectus, consectetur vel posuere posuere, rutrum eu ipsum.

Intro Paragraph

Mauris non tempor quam, et lacinia sapien. Mauris accumsan eros eget libero posuere vulputate. Etiam elit elit, elementum sed varius at, adipiscing vitae est. Sed nec felis pellentesque, lacinia dui sed, ultricies sapien. Pellentesque orci lectus, consectetur vel posuere posuere, rutrum eu ipsum.

Text Links

Text Link

Error text

TYPE BUTTON
"class_name" or [type]		 BUTTON
BUTTON DEFAULT
.button
BUTTON SECONDARY
.button .button--secondary		 BUTTON
BUTTON ALTERNATE
.button .button--alternate		 Select
BUTTON SMALL
.button .button--small		 Select
BUTTON NEWSLETTER
.button .button--secondary .button--small		 Subscribe
BUTTON DISABLE
[disable]


Table account


Table responsive

Order Date Payment Status Fulfillment Status Tracking number Total
SOL-666 May 29, 2020 Authorized Unfulfilled 1234567 $22.00
SOL-888 May 29, 2020 Paid Fulfilled WN247245s64 $35.90
SOL-888 May 29, 2020 Paid Fulfilled WN247245s64 $35.90

Notice

Success notification Error notification Standard notification Due to the current COVID-19 pandemic, we are experiencing a delay in dispatch and delivery. More information

Navigation, Pagination, Labels


Breadcrumbs
Bread Crumbs

Icon SVG

Path to icon Icon
info
user
cart
search
sliders-h
horn
play
phone
long-arrow-left
chevron-down
chevron-up (use transform css)
chevron-left
chevron-right
chevron-right-solid
right-arrow
right-arrow-menu
close-svg
envelope
youtube
instagram
twitter
facebook
minus
plus
clock
burger
map
tick
error
bell
times