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 3.75
Normaler Preis
Ermäßgter Preis
CHF 57.50
CHF 51.75
Price
CHF 0.00
Price
CHF 47.70
Price
CHF 41.20
Price
CHF 45.00
Price
CHF 62.45
Price
CHF 36.65
Price
CHF 48.15
Price
CHF 39.95
Price
CHF 57.45
Price
CHF 32.10
Price
CHF 31.50
Price
CHF 48.15
Price
CHF 33.15
Price
CHF 34.40
Price
CHF 26.45

Collection cards

  • Multivitamin Komplex von Allvital

    (Multi-) vitamines

  • Zubehör

    Accessoires

  • Lysin plus Vitamin C Mischung von Allvital

    Acides aminés

  • Essentielle Fettsäuren von Allvital

    Acides gras essentiels

  • Weitere Nahrungsergänzungen

    Autres compléments alimentaires

  • Back2School

    Back2School

  • Bestseller

    Bestseller

  • Biorhythmus

    Biorhythmus

  • Black Friday

    Black Friday

  • Black Friday

    Black Friday

  • Energieschub

    Booster d'énergie

  • Herz & Gefäße

    Coeur & vaisseaux

  • Konzentration

    Concentration

  • Entgiftung

    Détoxication

  • Kinder

    Enfants

  • Muttertag

    Fête des mères

  • Gesundes Körpergewicht fördern

    Gesundes Körpergewicht fördern

  • Darm & Verdauung

    Intestins & digestion

  • Gesundes Lernen beginnt jetzt!

    L'apprentissage sain commence dès maintenant !

  • Mineralien und Spurenelemente von Allvital

    Minéraux & Oligo-éléments

  • Veganer Lebensstil

    Mode de vie vegan

  • Schleimhäute

    Muqueuses

  • Muskeln & Gelenke

    Muscles et articulations

  • Muttertag: Fokus auf Frauengesundheit

    Muttertag: Fokus auf Frauengesundheit

  • Nerven & Psyche

    Nerfs & psyché

  • Neue Allvital-Produkte

    Nouveaux produits Allvital

  • Darmnährstoffe

    Nutriments intestinaux

  • Knochen- und Gelenkgesundheit

    Os & articulations

  • Knochen & Zähne

    Os & dents

  • Haut & Haare

    Peau & cheveux

  • Produkte zum Blog "Parasiten"

    Produkte zum Blog "Parasiten"

  • Allvital Osteraktion

    Promotion de Pâques

  • Sonnenschutz

    Protection solaire

  • Präbiotika: Nahrung für die Darmflora

    Präbiotika: Nahrung für die Darmflora

  • Kräuterpräparate von Allvital

    Préparations à base de plantes

  • Neujahrsrabatt

    Rabais de bonne année

  • Emfpehlung für eine optimale Vitalstoffversorgung in der Schwangerschaft

    Recommandation pour un apport optimal en substances vitales pendant la grossesse

  • Heuschnupfen

    Rhume des foins

  • Valentinsrabatt

    Réduction pour la Saint-Valentin

  • Frauengesundheit

    Santé de la femme

  • Gesunder Schlaf

    Sommeil sain

  • Sport & Fitness

    Sport & Fitness

  • Immunsystem

    Système immunitaire

  • Alle produkte A-Z

    Tous les produits A-Z

  • Unterstützung bei Mikroplastik-Belastung

    Unterstützung bei Mikroplastik-Belastung

  • Unterstützung der Schleimhäute

    Unterstützung der Schleimhäute

  • 5 HTP

    VAT override

  • Gesundes Altern

    Vieillissement sain

  • Vitalität

    Vitalité

  • Augen

    Yeux

Product cards

Glucosamin & Chondroitin Komplex
Enthält Krustentiere

Glucosamine & Chondroïtine Complexe

Price
CHF 62.00

Glucosamine & Chondroïtine Complexe

Details anzeigen

Gluco Complexe essentielle Zucker

Price
CHF 65.75

Gluco Complexe

Details anzeigen

Acide hyaluronique

Price
CHF 30.75

Acide hyaluronique

Details anzeigen

Immun Power Up

Price
CHF 48.15

Immun Power Up

Details anzeigen

Lysine & Vitamine C Poudre

Price
CHF 41.90

Lysine & Vitamine C Poudre

Details anzeigen

Lysine Complexe

Price
CHF 49.90

Lysine Complexe

Details anzeigen

Magnésium Plus

Price
CHF 28.90

Magnésium Plus

Details anzeigen

Minéraux plus Spurenelemente

Price
CHF 49.70

Minéraux

Details anzeigen

Glucosamin & Chondroitin Komplex
Enthält Krustentiere

Glucosamine & Chondroïtine Complexe

Price
CHF 62.00
Glucosamine & Chondroïtine Complexe
Price
CHF 62.00

Glucosamine & Chondroïtine Complexe

Details anzeigen

Gluco Complexe essentielle Zucker

Price
CHF 65.75
Gluco Complexe essentielle Zucker
Price
CHF 65.75

Gluco Complexe

Details anzeigen

Acide hyaluronique

Price
CHF 30.75
Acide hyaluronique
Price
CHF 30.75

Acide hyaluronique

Details anzeigen

Immun Power Up

Price
CHF 48.15
Immun Power Up
Price
CHF 48.15

Immun Power Up

Details anzeigen

Lysine & Vitamine C Poudre

Price
CHF 41.90
Lysine & Vitamine C Poudre
Price
CHF 41.90

Lysine & Vitamine C Poudre

Details anzeigen

Lysine Complexe

Price
CHF 49.90
Lysine Complexe
Price
CHF 49.90

Lysine Complexe

Details anzeigen

Magnésium Plus

Price
CHF 28.90
Magnésium Plus
Price
CHF 28.90

Magnésium Plus

Details anzeigen

Minéraux plus Spurenelemente

Price
CHF 49.70
Minéraux plus Spurenelemente
Price
CHF 49.70

Minéraux

Details anzeigen

Article cards