[dev] Style guide

Buttons

kt-button (snippets/button-appearance.liquid)

theme: black (default)

Add to cart

theme: white

Add to cart

theme: outline

Add to cart

theme: ghost-outline

Add to cart

fullWidth: true

Add to cart

disabled: true

Add to cart

active: true

Add to cart

squared: true

8

Bordered icon button (snippets/border-icon-button-appearance.liquid)

theme: grey (default)

theme: white

theme: black

layout: large

icon: "plus"

icon_text: "4"

CTA (snippets/cta.liquid)

default

Discover more

Form controls

Checkbox (snippets/checkbox.liquid)

default

Subscribe to updates

checked: true

Subscribe to updates

disabled: true

Subscribe to updates

count: 5

Tents⁵

Input (snippets/input.liquid)

default

Full name

type: email, required: true

Email address

disabled: true

Full name

input_description

Serial number Found on the underside of the unit.

Radio button (snippets/radio-button.liquid)

default

Standard

checked: true

Express

theme: language-selector

English

Filter pill (snippets/filter-pill.liquid)

default

Tents

checked: true

Tents

disabled: true

Tents

Overlays & navigation

Accordion (snippets/accordion.liquid)

default (closed)

Section title

Accordion body content goes here.

open: true

Section title

Accordion body content goes here.

size: "small"

Section title

Accordion body content goes here.

Drawer (snippets/drawer.liquid)

trigger (opens drawer via #style-guide-drawer)

Open drawer

Pagination (snippets/pagination.liquid)

collections.all.products by 2

You have viewed 332 out of 332 items

Breadcrumb (snippets/breadcrumb.liquid)

default (reflects this page)

Product data

card-tag (snippets/card-tag.liquid)

default

label

card-status (snippets/card-status.liquid)

default

label

Red

label

Green

label

Yellow

label

Price (snippets/price.liquid)

use_variant: true

placeholder: true

card-product (snippets/card-product.liquid)

default

Copy

copy (snippets/copy.liquid)

align: "left"

Unmotorized, as always.

With curiosity, endurance, and the quiet belief that somehow, things always work out in the end.

align: "right"

Unmotorized, as always.

With curiosity, endurance, and the quiet belief that somehow, things always work out in the end.

align: "center"

Unmotorized, as always.

With curiosity, endurance, and the quiet belief that somehow, things always work out in the end.

With blocks

Unmotorized, as always.

With curiosity, endurance, and the quiet belief that somehow, things always work out in the end.

size: "l"

Unmotorized, as always.

With curiosity, endurance, and the quiet belief that somehow, things always work out in the end.

size: "xl"

Unmotorized, as always.

With curiosity, endurance, and the quiet belief that somehow, things always work out in the end.

is_quote: true

"Unmotorized, as always."

Kristen Bell

Mountaineer

With video

Unmotorized, as always.

With curiosity, endurance, and the quiet belief that somehow, things always work out in the end.

With image

Unmotorized, as always.

With curiosity, endurance, and the quiet belief that somehow, things always work out in the end.

Miscellaneous

Data item (snippets/data-item.liquid)

default

Years of experience

25

large: true

Years of experience

25

Expandable text (snippets/expandable-text.liquid)

lines: 2

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.

Typography

title-6xl

Lorem ipsum dolor sit amet 18.

title-5xl

Lorem ipsum dolor sit amet 16.

title-4xl

Lorem ipsum dolor sit amet 14.

title-3xl

Lorem ipsum dolor sit amet 12.

title-2xl

Lorem ipsum dolor sit amet 10.

title-xl

Lorem ipsum dolor sit amet 8.

title-l

Lorem ipsum dolor sit amet 6.

title-m-strong

Lorem ipsum dolor sit amet 4.

title-m

Lorem ipsum dolor sit amet 3.

title-s

Lorem ipsum dolor sit amet 2.

title-xs

Lorem ipsum dolor sit amet 1.

title-2xs

Lorem ipsum dolor sit amet 0.5.

title-3xs-strong

Lorem ipsum dolor sit amet 0.25.

title-3xs

Lorem ipsum dolor sit amet 0.2.

title-4xs-strong

Lorem ipsum dolor sit amet 0.15.

title-4xs

Lorem ipsum dolor sit amet 0.1.

title-5xs-strong

Lorem ipsum dolor sit amet 0.075.

title-5xs