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

Background

Text

text light

Link

Link hover

Border

Info

Success

Warning

Danger

Primary

50

100

200

250

300

400

500

600

700

800

900

Secondary

50

100

200

250

300

400

500

600

700

800

900

Accent

50

100

200

250

300

400

500

600

700

800

900

Gray

Black

5

15

50

Typography

Headings

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5
Headline 6

Paragraphs

Sizes

Text sm

Text base

Text lg

Label

Label sm

Label base

Label lg

Transforms

Normal

Capitalised

Uppercased

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

  • Warenkorb
  • Schließen
  • Menü
  • Search
  • Konto
  • Warenkorb

USP icons

Payment icons

Social icons

Buttons

Primary anchor
Secondary anchor
Outline anchor
Link anchor

Forms

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

Options

For variants, filters and sorting

Button style

List style

Quantity input

Collapsibles

Collapsible

Collapsible content 1
Collapsible content 2
Collapsible content 3

Collapsible using button styles

Collapsible content 1
Collapsible content 2
Collapsible content 3

Toggle element

Click here

Badges

Prices

Verkaufspreis
29,95 €
Regulärer Preis
40,85 €
Verkaufspreis
20,00 €
Regulärer Preis
23,85 €
Verkaufspreis
25,45 €
Regulärer Preis
30,40 €
Verkaufspreis
20,00 €
Regulärer Preis
30,40 €
Verkaufspreis
26,95 €
Regulärer Preis
37,85 €
Verkaufspreis
26,95 €
Regulärer Preis
31,55 €
Verkaufspreis
13,50 €
Regulärer Preis
17,90 €
Verkaufspreis
27,95 €
Regulärer Preis
40,85 €

Product cards

Combi Deal - gegen Asiatische Hornissen
Combi Deal - gegen Asiatische Hornissen Combi Deal - gegen Asiatische Hornissen

Combi Deal - gegen Asiatische Hornissen

Falle inklusive 2 Lockstoffen
Verkaufspreis
29,95 €
Regulärer Preis
40,85 €
Combi Deal - gegen Blattläuse
Combi Deal - gegen Blattläuse Combi Deal - gegen Blattläuse

Combi Deal - gegen Blattläuse

Komplettpaket für 10 (Zimmer-)Pflanzen
Verkaufspreis
20,00 €
Regulärer Preis
23,85 €
Combi Deal - gegen Kleidermotten
Combi Deal - gegen Kleidermotten Combi Deal - gegen Kleidermotten

Combi Deal - gegen Kleidermotten

Schlupfwespen und Kleidermottenfalle
Verkaufspreis
25,45 €
Regulärer Preis
30,40 €
Combi Deal - gegen Lebensmittelmotten
Combi Deal - gegen Lebensmittelmotten Combi Deal - gegen Lebensmittelmotten

Combi Deal - gegen Lebensmittelmotten

Schlupfwespen und Lebensmittelmottenfalle
Verkaufspreis
20,00 €
Regulärer Preis
30,40 €
Combi Deal - gegen Spinnmilben
Combi Deal - gegen Spinnmilben Combi Deal - gegen Spinnmilben

Combi Deal - gegen Spinnmilben

Komplettpaket für 5 (Zimmer-)Pflanzen
Verkaufspreis
26,95 €
Regulärer Preis
37,85 €
Combi Deal - gegen Thripse
Combi Deal - gegen Thripse Combi Deal - gegen Thripse

Combi Deal - gegen Thripse

Komplettset für 10 (Zimmer-)Pflanzen
Verkaufspreis
26,95 €
Regulärer Preis
31,55 €
Combi Deal - gegen Trauermücken
Combi Deal - gegen Trauermücken Combi Deal - gegen Trauermücken

Combi Deal - gegen Trauermücken

Komplettpaket für 5 - 10 (Zimmer-)Pflanzen
Verkaufspreis
13,50 €
Regulärer Preis
17,90 €
Combi Deal - gegen Weiße Fliege
Combi Deal - gegen Weiße Fliege Combi Deal - gegen Weiße Fliege

Combi Deal - gegen Weiße Fliege

Verkaufspreis
27,95 €
Regulärer Preis
40,85 €

Article cards