Styleguide

Design Tokens

Colors

Text Colors

text-primary

text-secondary

text-faint

text-mute

text-disabled

text-inverse

text-critical

text-success

text-warning

text-info

text-link-default

text-link-hover

text-sale

Background Colors

background-default

background-light

background-mid

background-disabled

background-dark

background-inverse

background-accent-1

background-critical

background-success

background-warning

background-info

background-dark-overlay

background-sale

Border Colors

border-divider-primary

border-divider-accent-1

border-divider-inverse

border-focus

border-input-default

border-input-disabled

border-input-selected

border-input-entered

border-input-critical

border-input-success

border-input-warning

border-input-info

border-sale

Icon Colors

text-icon-primary

text-icon-secondary

text-icon-disabled

text-icon-inverse

text-icon-accent-1

text-icon-critical

text-icon-success

text-icon-warning

text-icon-info

text-icon-sale

Typography

Headlines

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Body Text

Body-xlarge-strong

Body-xlarge

Body-large-xstrong

Body-large-strong

Body-large

Body-core-xstrong

Body-core-strong

Body-core

Body-core-light

Body-core-xlight

Links

Link-core Link-core-strong Link-core-emphasis Button-core Button-core-emphasis Button-core-strong

Icon Library

hamburger

account

phone

map

bookmark

bookmark-filled

shopping-cart

chevron-up

chevron-down

chevron-left

chevron-right

brief-case-metal

pause

play

copy

australia

truck

handshake

storefront

facebook

instagram

youtube

sliders

wrench

plus

minus

arrow-left

arrow-right

arrow-up

arrow-down

arrow-circle-left

arrow-circle-right

dots

eye

eye-slash

calendar

magnifying-glass-plus

magnifying-glass-minus

warning

info

check

check-circle

x-circle

link-outline

facebook-2

envelope-simple-filled

map-trifold

clock

order-box

filter

grid

list

Form Components

Button

Default	Disabled	With Loading	Classes
			`button-fill-default` `button-small`
			`button-fill-default` `button-medium`
			`button-fill-default` `button-large`
			`button-fill-inverse` `button-small`
			`button-fill-inverse` `button-medium`
			`button-fill-inverse` `button-large`
			`button-outline-default` `button-small`
			`button-outline-default` `button-medium`
			`button-outline-default` `button-large`
			`button-outline-inverse` `button-small`
			`button-outline-inverse` `button-medium`
			`button-outline-inverse` `button-large`
			`button-underline-default`
			`button-underline-inverse`

Text Input

Label

Optional message

Label

Text Area

Textarea

Optional message

Textarea

Checkboxes

Checkbox

Checkbox On

Checkbox Disabled Off

Checkbox Disabled On

Radio Buttons

Radio Off

Radio On

Radio Disabled Off

Radio Disabled On

Native Select

Core Select

Core Select Error

Core Toggle

Toggle

Toggle Disabled Off

Toggle Disabled On

Search Input

Clear

Optional message

Clear

Aspect Ratios

Ratio	Example	Classes
`Auto`	Auto	`aspect-auto`
`4:1`	4:1	`aspect-4/1`
`3:1`	3:1	`aspect-3/1`
`2:1`	2:1	`aspect-2/1`
`16:9`	16:9	`aspect-16/9`
`3:2`	3:2	`aspect-3/2`
`5:4`	5:4	`aspect-5/4`
`1:1`	1:1	`aspect-1/1`
`4:5`	4:5	`aspect-4/5`
`3:4`	3:4	`aspect-3/4`
`2:3`	2:3	`aspect-2/3`
`9:16`	9:16	`aspect-9/16`
`4:3`	4:3	`aspect-4/3`

Liquid Components

Pagination

Classic Pagination

You've viewed 6 of 997 products

Load More Pagination

You've viewed 6 of 997 products

Applied Filters - Needs a snippet

Blue Medium $50-$100

applied-filters snippet not working think it needs url params?

Accordion

Accordion Item 1

This is the content for accordion item 1. It can contain any HTML content including paragraphs, lists, and other elements.

Accordion Item 2

This is the content for accordion item 2. You can add any content here including lists, images, or other HTML elements.

List item 1
List item 2
List item 3

Accordion Item 3

This is the content for accordion item 3. The accordion component provides a clean way to organize and display collapsible content.

Loader

Swatches - Needs a snippet

Badges

Badge Badge

Sale Sale

Quantity Selector

Product Card

Core Video - Needs a snippet

Breadcrumbs

Tabs

Global Components

Information toast

Success toast

Warning toast

Error toast

Info

Augue pellentesque est diam aliquet. Odio et amet aliquam.

Success

Augue pellentesque est diam aliquet. Odio et amet aliquam.

Warning

Augue pellentesque est diam aliquet. Odio et amet aliquam.

Error

Augue pellentesque est diam aliquet. Odio et amet aliquam.

Modal and Slideout

Section heading

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.