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 Link


Menu Items

Inputs

Icon SVG

Path to icon Icon
account
arrow-down
arrow-right
search
bag
delivery
filter
location
minus
plus
user
close-svg
facebook
burger
instagram
pinterest
zip
visa
express
paypal
afterpay
master card
chevron-right
chat
heart-solid
heart
heart-solid-light
ruler
blog
tick
error
bell
TYPE BUTTON
"class_name" or [type]
BUTTON
BUTTON DEFAULT
.button
Shop now
BUTTON SECONDARY
.button .button--secondary
BUTTON
BUTTON ALTERNATE
.button .button--alternate
Find in store
BUTTON LINK
.button .button--link
Shop now
BUTTON LINK SECONDARY
.button .button--link-secondary
Learn more
BUTTON DISABLE
[disable]
BUTTON CUSTOM
.button .button--custom
BUTTON SMALL
.button .button--small

Switch Inactive disabled Active disabled

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

Labels

Breadcrumbs

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