Titles

hero:

Desktop Hero

h1:

Desktop H1

h2:

Desktop H2

h3:

Desktop H3

h4:

Desktop H4

h5:
Desktop H5
h6:
Desktop H6

Buttons

Primary

Primary button

Default

Hovered

Disabled

Icon left

Default

Hovered

Disabled

icon right

Default

Hovered

Disabled

Secondary

Secondary button

Default

Hovered

Disabled

Icon left

Default

Hovered

Disabled

icon right

Default

Hovered

Disabled

Link

Link button

Default

Hovered

Disabled

Forms

Field

A field is a form element containing a label and an input.

Field groups automatically receive responsive styling, swapping to one field per row on mobile devices.

Default

Disabled

focused

Error

Email input

Dropdown (selection)

A dropdown allows a user to select a value from a series of options.

Vanilla dropdown, caret and dropdown visuals will be different between browsers

Default

Disabled

focused

Error

Text Area

A textarea can be used to allow for extended user input.

Default

Disabled

focused

Error

Radio checkbox

A checkbox can be formatted as a radio element. This means it is an exclusive option.

How often do you use checkboxes?

Default

How often do you use checkboxes?

Disabled

How often do you use checkboxes?

Error

Checkbox

A checkbox allow user to select a value from a small set of options, often binary.

Default

Disabled

Error

Success

If a form is in a success state, it will automatically show any success message blocks.

Thank you!
Thanks for contacting us. We’ll get back to you as soon as possible.

Error

If a form is in a error state, it will automatically show any error message blocks.

Oops!
There is an error in the form.

Warning

If a form is in a warning state, it will automatically show any warning message blocks.

Warning
Lorem ipsum sit dolor amet.

Badges

Promo badge

Small

New

Small new

Sale

Small sale

Sold out

Small sold out

Promo badge

Regular

New

Regular new

Sale

Regular sale

Sold out

Regular sold out

Promo badge

Large

New

Large new

Sale

Large sale

Sold out

Large sold out

Accordions

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

RICHTEXT

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.

image

List:

  • item 1 
  • item 2
  • item 3

  1. item 1
  2. item 2
  3. item 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Taxes and shipping calculated at checkout

Icons

account

arrow

arrow-nav

bluesky

calendar

cart

cart-plus

caret

chat

check

checkout

close

closing-quote

cube

credit-card

delete

direction

dot

email

error

eye

facebook

filter

gift

hamburger

heart

info

instagram

linkedin

link

map

map-pin

map-pin-fill

Messenger

minus

near-me

opening-quote

pause

phone

plane

play

plus

pinterest

question

return

bookmark

search

share

snapchat

star

star-fill

store

success

tag

threads

tiktok

truck

warning

x

youtube

zoom-in

zoom-out

{"type": "select","id": "icon","label": "t:global.icon","options": [{"value": "none","label": "t:schema_snippets.icons.none"},{"value": "account","label": "t:schema_snippets.icons.account"},{"value": "arrow","label": "t:schema_snippets.icons.arrow"},{"value": "arrow-nav","label": "t:schema_snippets.icons.arrow-nav"},{"value": "bluesky","label": "t:schema_snippets.icons.bluesky"},{"value": "calendar","label": "t:schema_snippets.icons.calendar"},{"value": "cart","label": "t:schema_snippets.icons.cart"},{"value": "cart-plus","label": "t:schema_snippets.icons.cart-plus"},{"value": "caret","label": "t:schema_snippets.icons.caret"},{"value": "chat","label": "t:schema_snippets.icons.chat"},{"value": "check","label": "t:schema_snippets.icons.check"},{"value": "checkout","label": "t:schema_snippets.icons.checkout"},{"value": "close","label": "t:schema_snippets.icons.close"},{"value": "closing-quote","label": "t:schema_snippets.icons.closing-quote"},{"value": "cube","label": "t:schema_snippets.icons.cube"},{"value": "credit-card","label": "t:schema_snippets.icons.credit-card"},{"value": "delete","label": "t:schema_snippets.icons.delete"},{"value": "direction","label": "t:schema_snippets.icons.direction"},{"value": "dot","label": "t:schema_snippets.icons.dot"},{"value": "email","label": "t:schema_snippets.icons.email"},{"value": "error","label": "t:schema_snippets.icons.error"},{"value": "eye","label": "t:schema_snippets.icons.eye"},{"value": "facebook","label": "t:schema_snippets.icons.facebook"},{"value": "filter","label": "t:schema_snippets.icons.filter"},{"value": "gift","label": "t:schema_snippets.icons.gift"},{"value": "hamburger","label": "t:schema_snippets.icons.hamburger"},{"value": "heart","label": "t:schema_snippets.icons.heart"},{"value": "info","label": "t:schema_snippets.icons.info"},{"value": "instagram","label": "t:schema_snippets.icons.instagram"},{"value": "linkedin","label": "t:schema_snippets.icons.linkedin"},{"value": "link","label": "t:schema_snippets.icons.link"},{"value": "map","label": "t:schema_snippets.icons.map"},{"value": "map-pin","label": "t:schema_snippets.icons.map-pin"},{"value": "map-pin-fill","label": "t:schema_snippets.icons.map-pin-fill"},{"value": "messenger","label": "t:schema_snippets.icons.messenger"},{"value": "minus","label": "t:schema_snippets.icons.minus"},{"value": "near-me","label": "t:schema_snippets.icons.near-me"},{"value": "opening-quote","label": "t:schema_snippets.icons.opening-quote"},{"value": "pause","label": "t:schema_snippets.icons.pause"},{"value": "phone","label": "t:schema_snippets.icons.phone"},{"value": "plane","label": "t:schema_snippets.icons.plane"},{"value": "play","label": "t:schema_snippets.icons.play"},{"value": "plus","label": "t:schema_snippets.icons.plus"},{"value": "pinterest","label": "t:schema_snippets.icons.pinterest"},{"value": "question","label": "t:schema_snippets.icons.question"},{"value": "return","label": "t:schema_snippets.icons.return"},{"value": "bookmark","label": "t:schema_snippets.icons.bookmark"},{"value": "search","label": "t:schema_snippets.icons.search"},{"value": "share","label": "t:schema_snippets.icons.share"},{"value": "snapchat","label": "t:schema_snippets.icons.snapchat"},{"value": "star","label": "t:schema_snippets.icons.star"},{"value": "star-fill","label": "t:schema_snippets.icons.star-fill"},{"value": "store","label": "t:schema_snippets.icons.store"},{"value": "success","label": "t:schema_snippets.icons.success"},{"value": "tag","label": "t:schema_snippets.icons.tag"},{"value": "threads","label": "t:schema_snippets.icons.threads"},{"value": "tiktok","label": "t:schema_snippets.icons.tiktok"},{"value": "truck","label": "t:schema_snippets.icons.truck"},{"value": "warning","label": "t:schema_snippets.icons.warning"},{"value": "x","label": "t:schema_snippets.icons.x"},{"value": "youtube","label": "t:schema_snippets.icons.youtube"},{"value": "zoom-in","label": "t:schema_snippets.icons.zoom-in"},{"value": "zoom-out","label": "t:schema_snippets.icons.zoom-out"}]}

Swiper

Drawer

Header

Dawer content
Header

Dawer content

Content cards

Product card

Sale
Apparellll
This is the alt text
Shopify

Amazing Aluminum Bag Collection1 EN

Movies
From $20.14
From $20.14 $42.36
Sale
Apparellll
Amazing Aluminum Bag Collection1 EN
This is the alt text
Shopify

Amazing Aluminum Bag Collection1 EN

Movies
From $20.14
From $20.14 $42.36
Sale
Amazing Aluminum Bag Collection10
Shopify

Amazing Aluminum Bag Collection10

Movies
From $25.98
From $25.98 $101.46
Sale
Amazing Aluminum Bag Collection11
Shopify

Amazing Aluminum Bag Collection11

Movies
From $8.66
From $8.66 $12.18
Sale
Amazing Aluminum Bag Collection12
Shopify

Amazing Aluminum Bag Collection12

Movies
From $44.78
From $44.78 $182.54
Sale
Amazing Aluminum Bag Collection13
Shopify

Amazing Aluminum Bag Collection13

Movies
From $60.72
From $60.72 $66.20
Sale
Amazing Aluminum Bag Collection14
Shopify

Amazing Aluminum Bag Collection14

Movies
From $2.68
From $2.68 $116.17
Sale
Amazing Aluminum Bag Collection15
Shopify

Amazing Aluminum Bag Collection15

Movies
From $39.50
From $39.50 $70.39

Tabs

Open Tab 1 Open Tab 2 Open Tab 3 Open Tab 4 Open Tab 5
Tab 1 Content Tab 2 Content Tab 3 Content Tab 4 Content Tab 5 Content