Stile

page dieser page Stile für page wie Typografie, Formularelemente und Symbole vorgestellt. Diese sind fest in einer alternativen page mit dem Namen page.styles.liquid.

---

Typografie

Überschrift 1

Überschrift 2

Überschrift 3

Überschrift 4

Überschrift 5

Überschrift 6

H1-ÜBERSCHRIFT

H2-ÜBERSCHRIFT

H3-Überschrift

H4-Überschrift

H5-ÜBERSCHRIFT

Überschrift H6

Offenbar hatten wir eine große Höhe in der Atmosphäre erreicht, denn der Himmel war black, und die Sterne hatten aufgehört zu funkeln. Durch dieselbe optische Täuschung, die den Horizont des Meeres auf die Höhe des Betrachters auf einem Hügel anhebt, war die pechschwarze Wolke unter uns gewölbt, und die Gondel schien inmitten einer riesigen dunklen Kugel zu schweben, deren obere Hälfte mit silver übersät war. Als ich hinunter in den dunklen Abgrund blickte, konnte ich ein rötliches Licht sehen, das durch einen Spalt in den Wolken strömte.

Abonnieren Sie unseren Newsletter und entdecken Sie unsere Geschichten, Kollektionen und Überraschungen.

• Neu eingetroffen
• Sonderangebote & Aktionen
• Damen
• Herren
• Schuhe
• Taschen & Accessoires
• Top-Marken
• Lookbook

• Lorem ipsum dolor sit amet
• Conse ctetur adipisicing elit sed do
• Eiusmod tempor
• Es geschah, dass sie unter großer Mühe und großem Leid
• Ut enim ad minim veniam

• Stoff 1: 100 % Polyester
• Oberstoff 2: 100 % Polyester, Futter: 100 % Polyester
• Stoff 3: 75 % Polyester, 20 % Viskose, 5 % Elasthan

1. Stoff 1: 75 % Polyester, 20 % Viskose, 5 % Elasthan
2. Oberstoff 2: 100 % Polyester, Futter: 100 % Polyester
3. Stoff 3: 100 % Polyester

RTE-Überschriften

Absätze

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.

Suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.

Schriftstile

• Stark
• Schwerpunkt
• Inline-Link
• Streik
• ^{Wie geht’s?}

Blockzitate

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 nihil imperdiet doming id quod mazim placerat facer possim assum.

Der Urheber des Zitats

Listen

---

Responsive Tabellen

---

Formulare

Standard-Formularelemente

Horizontale Beschriftung Horizontale Beschriftung 2 -- Wählen Sie -- Option Option Option Beschriftung des Kontrollkästchens

Unsichtbare Etiketten

Füge eine Klasse von label-hidden um ein Label optisch auszublenden, es aber für Screenreader weiterhin zugänglich zu halten. Verwenden Sie das Platzhalter Verwenden Sie das Attribut als sichtbare Bezeichnung.

Hinweis: Die Platzhalter Dieses Attribut funktioniert nur in IE10 und höher, daher sind unsichtbare Beschriftungen in IE9 und früheren Versionen deaktiviert.

Vorname Nachname E-Mail

---

Vertikale Formulare (Kunde, Kontakt usw.)

In Slate gibt es hierfür keine Stile, sie werden jedoch in den meisten Themes verwendet. Fügen Sie Stilelemente in ein `form`- oder `div`-Element mit der Klasse `form-vertical` ein, um Ihre Stile hier anzuzeigen.

Bei den meisten „liquid“-Form-Elementen kann man keine Klasse direkt hinzufügen (z. B. {% form 'contact' %}). Fügen Sie stattdessen das Formular in ein `div`-Element mit der Klasse .form-vertical um denselben Effekt zu erzielen.

Textfeld Platzhalter Deaktiviertes Feld Bezeichnung Textfeld (Fehler) Textfeld (Erfolg) Feld auswählen -- Wählen Sie -- Option Option Option

Kontrollkästchen

Ankreuzfeld
Ankreuzfeld
Ankreuzfeld

Radios

Option 1
Option 1
Option 1

Textfeld Dateifeld

Anmerkungen und Formularfehler

In Slate gibt es keine Notizstile, diese werden jedoch häufig hinzugefügt, um Formularfehler zu behandeln. Beispielstile:

 .note {
 padding: 20px;
 border: 1px solid #ccc;
 }

 .note--success {
 border-color: green;
 background-color: lightgreen;
 }

 .note--error {
 border-color: red;
 background-color: lightred;
 }
 

Anwendungsbeispiel:

 {% if form.posted_successfully? %}
 <p class="note note--success">Thanks for submitting the form</p>
 {% endif %}

 {% if form.errors %}
 <div class="note note--error">
 {{ form.errors | default_errors }}
 </div>
 {% endif %}
 

---

Schaltflächen

Standard-Schaltfläche

Standard-Schaltfläche (keine Standardeinstellungen)

Schaltfläche deaktiviert

Standardschaltfläche deaktiviert

Breiter Knopf

Breite Standardschaltfläche

---

Verschiedene Elemente

Horizontale Linien

Es gibt keine Standardwerte hr Stile in Slate, aber dies sind die gängigsten, die man hinzufügen kann.

Standard hr

---

Unsichtbar hr.hr--clear

---