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
- 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
| 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 .
Logo
Icons
User interface icons
Payment icons
Social icons
Forms
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
Badges
Prices
- Price
- CHF 41.90
- Price
- CHF 49.90
- Price
- CHF 28.90
- Price
- CHF 49.70
- Price
- CHF 24.00
- Price
- CHF 77.50
- Price
- CHF 78.15
- Price
- CHF 43.15
- Price
- CHF 44.40
- Price
- CHF 73.70
- Price
- CHF 37.50
- Price
- CHF 35.65
- Price
- CHF 33.15
- Price
- CHF 31.25
- Price
- CHF 27.95
- Price
- CHF 31.90
- Price
- CHF 34.40
- Price
- CHF 34.40
- Price
- CHF 6.20
- Price
- CHF 11.20
Collection cards
-
(Multi-) vitamines
-
Accessoires
-
Acides aminés
-
Acides gras essentiels
-
Autres compléments alimentaires
-
Back2School
-
Bestseller
-
Biorhythmus
-
Black Friday
-
Black Friday
-
Booster d'énergie
-
Coeur & vaisseaux
-
Concentration
-
Détoxication
-
Enfants
-
Fête des mères
-
Gesundes Körpergewicht fördern
-
Intestins & digestion
-
L'apprentissage sain commence dès maintenant !
-
Minéraux & Oligo-éléments
-
Mode de vie vegan
-
Muqueuses
-
Muscles et articulations
-
Muttertag: Fokus auf Frauengesundheit
-
Nerfs & psyché
-
Nouveaux produits Allvital
-
Nutriments intestinaux
-
Os & articulations
-
Os & dents
-
Peau & cheveux
-
Produkte zum Blog "Parasiten"
-
Promotion de Pâques
-
Protection solaire
-
Präbiotika: Nahrung für die Darmflora
-
Préparations à base de plantes
-
Rabais de bonne année
-
Recommandation pour un apport optimal en substances vitales pendant la grossesse
-
Rhume des foins
-
Réduction pour la Saint-Valentin
-
Santé de la femme
-
Sommeil sain
-
Sport & Fitness
-
Système immunitaire
-
Tous les produits A-Z
-
Unterstützung bei Mikroplastik-Belastung
-
Unterstützung der Schleimhäute
-
VAT override
-
Vieillissement sain
-
Vitalité
-
Yeux
Product cards
Coenzyme Q10 avec acide alpha lipoïque
- Price
- CHF 51.20
DHA plus EPA
- Price
- CHF 62.80
Coenzyme Q10 avec acide alpha lipoïque
- Price
- CHF 51.20
- Price
- CHF 51.20
Curcuma micellaire
- Price
- CHF 48.15
- Price
- CHF 48.15
Curcumine Plus
- Price
- CHF 36.90
- Price
- CHF 36.90
Complexe intestin-cerveau avec griffe de chat & lapacho
- Normaler Preis
- Ermäßgter Preis
- CHF 39.35
- CHF 35.40
- Normaler Preis
- Ermäßgter Preis
- CHF 39.35
- CHF 35.40
DHA plus EPA
- Price
- CHF 62.80
- Price
- CHF 62.80
Complexe de fer
- Price
- CHF 18.60
- Price
- CHF 18.60
Complexe d‘enzymes
- Normaler Preis
- Ermäßgter Preis
- CHF 49.25
- CHF 44.35
- Normaler Preis
- Ermäßgter Preis
- CHF 49.25
- CHF 44.35
Galactose Plus avec gingko biloba & ashwagandha
- Price
- CHF 74.25
- Price
- CHF 74.25
Article cards
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...