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

Text default

Text light

success

danger

Primary

Secondary

Brand colors

vista white

rose white

white linen

desert

pampas

cararra

mystic

pastel orange

desert sand

light gray

dove gray

gray dark

shark dark

shark

shark light

bison

bordeaux red

black

black light

yellow

green

lines

border

Typography

Headings

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5
Headline 6

Paragraphs

Sizes

Text xs

Text sm

Text base

Text lg

Text xl

Label

Label xs

Label sm

Label base

Label lg

Label xl

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

Payment icons

Social icons

Buttons

Button primary anchor
Button secondary anchor
Button conversion anchor
Button link 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

Collapsibles

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

Price
CHF 37.45
Price
CHF 42.40
Price
CHF 46.90
Price
CHF 74.90
Price
CHF 19.75
Normaler Preis
Ermäßgter Preis
CHF 37.75
CHF 34.00
Price
CHF 34.95
Price
CHF 36.90
Price
CHF 51.20
Price
CHF 48.15
Price
CHF 36.90
Normaler Preis
Ermäßgter Preis
CHF 39.35
CHF 35.40
Price
CHF 62.80
Price
CHF 18.60
Normaler Preis
Ermäßgter Preis
CHF 49.25
CHF 44.35
Price
CHF 74.25
Price
CHF 62.00
Price
CHF 65.75
Price
CHF 30.75
Price
CHF 48.15

Collection cards

  • Multivitamin Komplex von Allvital

    (Multi-) Vitamine

  • Alle produkte A-Z

    Alle produkte A-Z

  • Lysin plus Vitamin C Mischung von Allvital

    Aminosäuren

  • Augen

    Augen

  • Back2School

    Back2School

  • Bestseller

    Bestseller

  • Biorhythmus

    Biorhythmus

  • Black Friday

    Black Friday

  • Black Friday

    Black Friday

  • Darm & Verdauung

    Darm & Verdauung

  • Darmnährstoffe

    Darmnährstoffe

  • Emfpehlung für eine optimale Vitalstoffversorgung in der Schwangerschaft

    Emfpehlung für eine optimale Vitalstoffversorgung in der Schwangerschaft

  • Energieschub

    Energieschub

  • Entgiftung

    Entgiftung

  • Essentielle Fettsäuren von Allvital

    Essentielle Fettsäuren

  • Frauengesundheit

    Frauengesundheit

  • Gesunder Schlaf

    Gesunder Schlaf

  • Gesundes Altern

    Gesundes Altern

  • Gesundes Körpergewicht fördern

    Gesundes Körpergewicht fördern

  • Gesundes Lernen beginnt jetzt!

    Gesundes Lernen beginnt jetzt!

  • Haut & Haare

    Haut & Haare

  • Herz & Gefäße

    Herz & Gefäße

  • Heuschnupfen

    Heuschnupfen

  • Immunsystem

    Immunsystem

  • Kinder

    Kinder

  • Knochen & Zähne

    Knochen & Zähne

  • Knochen- und Gelenkgesundheit

    Knochen- und Gelenkgesundheit

  • Konzentration

    Konzentration

  • Kräuterpräparate von Allvital

    Kräuterpräparate

  • Mineralien und Spurenelemente von Allvital

    Mineralien & Spurenelemente

  • Muskeln & Gelenke

    Muskeln & Gelenke

  • Muttertag

    Muttertag

  • Muttertag: Fokus auf Frauengesundheit

    Muttertag: Fokus auf Frauengesundheit

  • Nerven & Psyche

    Nerven & Psyche

  • Neue Allvital-Produkte

    Neue Allvital-Produkte

  • Neujahrsrabatt

    Neujahrsrabatt

  • Allvital Osteraktion

    Oster-Aktion

  • Produkte zum Blog "Parasiten"

    Produkte zum Blog "Parasiten"

  • Präbiotika: Nahrung für die Darmflora

    Präbiotika: Nahrung für die Darmflora

  • Schleimhäute

    Schleimhäute

  • Sonnenschutz

    Sonnenschutz

  • Sport & Fitness

    Sport & Fitness

  • Unterstützung bei Mikroplastik-Belastung

    Unterstützung bei Mikroplastik-Belastung

  • Unterstützung der Schleimhäute

    Unterstützung der Schleimhäute

  • Valentinsrabatt

    Valentinsrabatt

  • 5 HTP

    VAT override

  • Veganer Lebensstil

    Veganer Lebensstil

  • Vitalität

    Vitalität

  • Weitere Nahrungsergänzungen

    Weitere Nahrungsergänzungen

  • Zubehör

    Zubehör

Product cards

5 HTP
Neu im Sortiment
1 Dose pro Kunde beschränkt

5-HTP

Price
CHF 37.45

5-HTP

Details anzeigen

Amino 8

Price
CHF 42.40

Amino 8

Details anzeigen

Astaxanthin Plus

Price
CHF 46.90

Astaxanthin Plus

Details anzeigen

augen_Komplex
Neu im Sortiment

Augen Komplex

Price
CHF 74.90

Augen Komplex

Details anzeigen

Basen Komplex

Price
CHF 19.75

Basen Komplex

Details anzeigen

biohumin
10% Rabatt

BioHumin

Normaler Preis
Ermäßgter Preis
CHF 37.75
CHF 34.00

BioHumin

Details anzeigen

CalMag 2:1

Price
CHF 34.95

CalMag 2:1

Details anzeigen

Carnitin Komplex

Price
CHF 36.90

Carnitin Komplex

Details anzeigen

5 HTP
Neu im Sortiment
1 Dose pro Kunde beschränkt

5-HTP

Price
CHF 37.45
5-HTP
Price
CHF 37.45

5-HTP

Details anzeigen

Amino 8

Price
CHF 42.40
Amino 8
Price
CHF 42.40

Amino 8

Details anzeigen

Astaxanthin Plus

Price
CHF 46.90
Astaxanthin Plus
Price
CHF 46.90

Astaxanthin Plus

Details anzeigen

augen_Komplex
Neu im Sortiment

Augen Komplex

Price
CHF 74.90
Augen Komplex
Price
CHF 74.90

Augen Komplex

Details anzeigen

Basen Komplex

Price
CHF 19.75
Basen Komplex
Price
CHF 19.75

Basen Komplex

Details anzeigen

biohumin
10% Rabatt

BioHumin

Normaler Preis
Ermäßgter Preis
CHF 37.75
CHF 34.00
BioHumin
Normaler Preis
Ermäßgter Preis
CHF 37.75
CHF 34.00

BioHumin

Details anzeigen

CalMag 2:1

Price
CHF 34.95
CalMag 2:1
Price
CHF 34.95

CalMag 2:1

Details anzeigen

Carnitin Komplex

Price
CHF 36.90
Carnitin Komplex
Price
CHF 36.90

Carnitin Komplex

Details anzeigen

Article cards