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

Text link

Text link-states

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

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

Allvital Phyto Basic mit Hagebutte und Ingwer. Hagebutte unterstützt ein gesundes Immunsystem und eine gesunde Verdauung

Phyto Basic mit Hagebutte & Ingwer

Price
CHF 33.15

Phyto Basic

Details anzeigen

phyto_clean

Phyto Clean mit Gotu Kola & Ginseng

Price
CHF 31.25

Phyto Clean

Details anzeigen

phyto_immun
wieder verfügbar

Phyto Immun mit Süßholzwurzel & Ginseng

Price
CHF 27.95

Phyto Immun

Details anzeigen

phyto_redox

Phyto Redox mit Granatapfel & Mariendistel

Price
CHF 31.90

Phyto Redox

Details anzeigen

Phyto Relax

Phyto Relax mit gelbem Enzian & Lindenblüten

Price
CHF 34.40

Phyto Relax

Details anzeigen

phyto_vital

Phyto Vital mit Moringa & Aronia

Price
CHF 34.40

Phyto Vital

Details anzeigen

Pillenbox

Pillendose

Price
CHF 6.20

Pillendose

Details anzeigen

Bamboo_Pillenbox

Pillendose aus Bambus

Price
CHF 11.20

Pillendose aus Bambus

Details anzeigen

Allvital Phyto Basic mit Hagebutte und Ingwer. Hagebutte unterstützt ein gesundes Immunsystem und eine gesunde Verdauung

Phyto Basic mit Hagebutte & Ingwer

Price
CHF 33.15
Phyto Basic mit Hagebutte & Ingwer
Price
CHF 33.15

Phyto Basic

Details anzeigen

phyto_clean

Phyto Clean mit Gotu Kola & Ginseng

Price
CHF 31.25
Phyto Clean mit Gotu Kola & Ginseng
Price
CHF 31.25

Phyto Clean

Details anzeigen

phyto_immun
wieder verfügbar

Phyto Immun mit Süßholzwurzel & Ginseng

Price
CHF 27.95
Phyto Immun mit Süßholzwurzel & Ginseng
Price
CHF 27.95

Phyto Immun

Details anzeigen

phyto_redox

Phyto Redox mit Granatapfel & Mariendistel

Price
CHF 31.90
Phyto Redox mit Granatapfel & Mariendistel
Price
CHF 31.90

Phyto Redox

Details anzeigen

Phyto Relax

Phyto Relax mit gelbem Enzian & Lindenblüten

Price
CHF 34.40
Phyto Relax mit gelbem Enzian & Lindenblüten
Price
CHF 34.40

Phyto Relax

Details anzeigen

phyto_vital

Phyto Vital mit Moringa & Aronia

Price
CHF 34.40
Phyto Vital mit Moringa & Aronia
Price
CHF 34.40

Phyto Vital

Details anzeigen

Pillenbox

Pillendose

Price
CHF 6.20
Pillendose
Price
CHF 6.20

Pillendose

Details anzeigen

Bamboo_Pillenbox

Pillendose aus Bambus

Price
CHF 11.20
Pillendose aus Bambus
Price
CHF 11.20

Pillendose aus Bambus

Details anzeigen

Article cards

Präbiotika: Nahrung für die Darmflora

Präbiotika: Nahrung für die Darmflora

Präbiotika sind unverdauliche Nahrungsbestandteile, die die Vermehrung von nützlichen Darmbakterien fördern. Sie gehören zu den wichtigsten Bausteinen einer darmfreundlichen, gesunden Ernährungsweise.

Mehr lesen...
Wie Mikroplastik der Gesundheit schadet

Wie Mikroplastik der Gesundheit schadet

Mikroplastik ist heute praktisch überall nachweisbar: im Wasser, in Lebensmitteln, in der Luft und sogar im menschlichen Körper. Die winzigen Kunststoffpartikel sind dabei nicht einfach nur passiv vorhanden, sondern können...

Mehr lesen...
Gesunde Gewichtsreduktion: Warum Kalorien allein nicht über das Gewicht entscheiden

Gesunde Gewichtsreduktion: Warum Kalorien allein nicht über das Gewicht entscheiden

Wer sein Gewicht reduzieren und langfristig gesund halten möchte, braucht mehr als bloße Kalorienkontrolle. Erfahren Sie hier, auf welche Faktoren es besonders ankommt und wie Sie diese im Alltag umsetzen...

Mehr lesen...