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
Collection cards
-
(Multi-) Vitamine
-
Alle produkte A-Z
-
Aminosäuren
-
Augen
-
Back2School
-
Bestseller
-
Biorhythmus
-
Black Friday
-
Black Friday
-
Darm & Verdauung
-
Darmnährstoffe
-
Emfpehlung für eine optimale Vitalstoffversorgung in der Schwangerschaft
-
Energieschub
-
Entgiftung
-
Essentielle Fettsäuren
-
Frauengesundheit
-
Gesunder Schlaf
-
Gesundes Altern
-
Gesundes Körpergewicht fördern
-
Gesundes Lernen beginnt jetzt!
-
Haut & Haare
-
Herz & Gefäße
-
Heuschnupfen
-
Immunsystem
-
Kinder
-
Knochen & Zähne
-
Knochen- und Gelenkgesundheit
-
Konzentration
-
Kräuterpräparate
-
Mineralien & Spurenelemente
-
Muskeln & Gelenke
-
Muttertag
-
Muttertag: Fokus auf Frauengesundheit
-
Nerven & Psyche
-
Neue Allvital-Produkte
-
Neujahrsrabatt
-
Oster-Aktion
-
Produkte zum Blog "Parasiten"
-
Präbiotika: Nahrung für die Darmflora
-
Schleimhäute
-
Sonnenschutz
-
Sport & Fitness
-
Unterstützung bei Mikroplastik-Belastung
-
Unterstützung der Schleimhäute
-
Valentinsrabatt
-
VAT override
-
Veganer Lebensstil
-
Vitalität
-
Weitere Nahrungsergänzungen
-
Zubehör
Product cards
Zink
- Price
- CHF 26.45
- Price
- CHF 26.45
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...