Styles

This page is here to show off styles and components for standard page elements such as typography, form elements, icons, product cards and more. These are hard coded in an alternate page template file containing the section main-styleguide.liquid .

Colors

BG default

Border default

Text default

Text light

Text link

Text link-states

Success

Danger

Gray

Offblack

Primary

Primary

Primary 600

Primary 700

Custom

Custom

Custom anise

Custom orange

Custom lilac

Custom lightblue

Custom watermelon

Custom mint

Custom yellow

Custom peach

Custom pink

Custom blue

Custom turquoise

Custom mustard

Accent

Accent 100

Accent 200

Accent 300

Accent 400

Typography

Headings

Headline 1

Handwritten Headline 1

Headline 2

Handwritten Headline 2

Headline 3

Handwritten Headline 3

Headline 4

Handwritten Headline 4

Headline 5
Handwritten Headline 5
Headline 6
Handwritten Headline 6

Paragraphs

Body text Sizes

Body text xxs

Body text xs

Body text sm

Body text md

Body text lg

Body text xl

Type styles

  • Strong
  • Emphasis
  • Link
  • Strike
  • Sup

Rte

Headline 2

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus dolore beatae molestias voluptas cumque facilis, recusandae omnis, nihil magni culpa tenetur quo aperiam, earum nisi at pariatur impedit voluptates quia!

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus dolore beatae molestias voluptas cumque facilis, recusandae omnis, nihil magni culpa tenetur quo aperiam, earum nisi at pariatur impedit voluptates quia!

Headline 3

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus dolore beatae molestias voluptas cumque facilis, recusandae omnis, nihil magni culpa tenetur quo aperiam, earum nisi at pariatur impedit voluptates quia!

Headline 4

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus dolore beatae molestias voluptas cumque facilis, recusandae omnis, nihil magni culpa tenetur quo aperiam, earum nisi at pariatur impedit voluptates quia!

Headline 5

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus dolore beatae molestias voluptas cumque facilis, recusandae omnis, nihil magni culpa tenetur quo aperiam, earum nisi at pariatur impedit voluptates quia!

Headline 6

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus dolore beatae molestias voluptas cumque facilis, recusandae omnis, nihil magni culpa tenetur quo aperiam, earum nisi at pariatur impedit voluptates quia!

Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

The author of the quote
  • One
  • Two
  • Three, with child list
    • First sub item
    • Second sub item
    • Third sub item, with child list
      • Third level item
      • Another third level item
  • Four
  1. One
  2. Two
  3. Three, with child list
    1. First sub item
    2. Second sub item
    3. Third sub item, with child list
      1. Third level item
      2. Another third level item
  4. Four
Order Date Payment Status Fulfillment Status Total
#1001 December 22, 2015 Authorized Unfulfilled $43.03
#1002 December 23, 2015 Authorized Unfulfilled $44.03
#1003 December 24, 2015 Authorized Unfulfilled $45.03
#1004 December 25, 2015 Authorized Unfulfilled $46.03
#1005 December 26, 2015 Authorized Unfulfilled $47.03
#1006 December 27, 2015 Authorized Unfulfilled $48.03

Grid

More info on tailwind and css-tricks.

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Icons

User interface icons

  • Cart
  • Close
  • Menu
  • Search
  • Account

Countries

Payment icons

Social icons

Buttons

Cart
Primary anchor
Secondary anchor
Tertiary anchor
Tertiary-light anchor
Accent anchor
Accent-2 anchor
Black anchor
Anise anchor
Orange anchor
Lilac anchor
Lightblue anchor
Watermelon anchor
Mint anchor
Yellow anchor
Peach anchor
Pink anchor
Blue anchor
Turquoise anchor
Mustard anchor
Link anchor
Link light anchor

Forms

Form message
Incorrect email format
Incorrect password
Option menu
Checkboxes
Radios
Switch button
Submit button

Options

For variants, filters and sorting

Button style

List style

Quantity input

Collapsibles

Collapsible

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias, ducimus, repellendus error adipisci assumenda sint, tempora nisi magni optio dolor architecto et. Aliquam ducimus minima cupiditate unde, voluptates accusantium optio?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias, ducimus, repellendus error adipisci assumenda sint, tempora nisi magni optio dolor architecto et. Aliquam ducimus minima cupiditate unde, voluptates accusantium optio?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias, ducimus, repellendus error adipisci assumenda sint, tempora nisi magni optio dolor architecto et. Aliquam ducimus minima cupiditate unde, voluptates accusantium optio?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias, ducimus, repellendus error adipisci assumenda sint, tempora nisi magni optio dolor architecto et. Aliquam ducimus minima cupiditate unde, voluptates accusantium optio?

Toggle element

Click here

Badges

Prices

Sale price
€45
Regular price
€36
Sale price
€45
Regular price
€36
Sale price
€45
Regular price
€36
Sale price
€45
Regular price
€36
Sale price
€45
Regular price
€36
Sale price
€45
Regular price
€36
Sale price
€45
Regular price
€36
Sale price
€45
Regular price
€36

Collection cards

Collection cards

Product cards

100 year Bauhaus exhibition
Image 47718616990034 100 year Bauhaus exhibition 100 year Bauhaus exhibition

100 year Bauhaus exhibition

Vendor:Bauhaus Bauhaus

Sale price
€45
Regular price
€36
24 Heures du mans | Winners 1923-2024
Image 47718616990034 24 Heures du mans | Winners 1923-2024 24 Heures du mans | Winners 1923-2024

24 Heures du mans | Winners 1923-2024

Vendor:PSTR.Studio PSTR.Studio

Sale price
€45
Regular price
€36
By The Seaside
Image 47718616990034 Abbie Franks - By The Seaside Abbie Franks - By The Seaside

By The Seaside

Vendor:Abbie Franks A. Franks

Sale price
€45
Regular price
€36
Café con leche
Image 47718616990034 Abbie Franks - Café con leche Abbie Franks - Café con leche

Café con leche

Vendor:Abbie Franks A. Franks

Sale price
€45
Regular price
€36
Cuppa Tea?
Image 47718616990034 Abbie Franks - Cuppa Tea? Abbie Franks - Cuppa Tea?

Cuppa Tea?

Vendor:Abbie Franks A. Franks

Sale price
€45
Regular price
€36
Good Morning
Image 47718616990034 Abbie Franks - Good Morning Abbie Franks - Good Morning

Good Morning

Vendor:Abbie Franks A. Franks

Sale price
€45
Regular price
€36
In the Sun
Image 47718616990034 Abbie Franks - In the Sun Abbie Franks - In the Sun

In the Sun

Vendor:Abbie Franks A. Franks

Sale price
€45
Regular price
€36
Italian Coffee
Image 47718616990034 Abbie Franks - Italian Coffee Abbie Franks - Italian Coffee

Italian Coffee

Vendor:Abbie Franks A. Franks

Sale price
€45
Regular price
€36

Article cards

Helen Butler

Helen Butler

October 7, 2024|Support PSTR

Inspired by atmospheric colour and light and the beauty found in the fleeting and the ethereal.

Ruby Hughes

Ruby Hughes

October 7, 2024|D. van den Berg

inviting you to feel inspired, and either want to grab a paintbrush or go and sit in a wine bar.

Madelen Möllard

Madelen Möllard

October 7, 2024|Sónia Gomes

Renowned for her vibrant colors, striking art, and distinctive style.