Stile

Auf dieser Seite werden Stile für Standardseitenelemente wie Typografie, Formularelemente und Symbole angezeigt. Diese sind in einer alternativen Seitenvorlagendatei mit dem Namen fest codiert page.styles.liquid.

---

Typografie

Überschrift eins

Überschrift zwei

Überschrift drei

Überschrift vier

Überschrift fünf

Überschrift sechs

H1 TITEL

H2 TITEL

Überschrift H3

Überschrift H4

H5 TITEL

Überschrift H6

Anscheinend hatten wir eine große Höhe in der Atmosphäre erreicht, denn der Himmel war tot schwarz und die Sterne hatten aufgehört zu funkeln. Durch dieselbe Illusion, die den Horizont des Meeres auf die Höhe des Zuschauers auf einem Hügel hebt, wurde die darunter liegende Zobelwolke ausgebreitet, und das Auto schien inmitten einer riesigen dunklen Kugel zu schweben, mit deren oberer Hälfte übersät war Silber. Als ich in den dunklen Golf hinunterblickte, konnte ich ein rötliches Licht sehen, das durch einen Riss in den Wolken strömte.

Erhalten Sie unseren Newsletter und entdecken Sie unsere Geschichten, Sammlungen und Überraschungen.

• NEU IN
• Verkauf & Sonderangebote
• Frauengesundheit
• Männergesundheit
• Schuhe
• Taschen & Accessoires
• Top-Marken
• Lookbook

• Lorem ipsum dolor sit amet
• Conse ctetur adipisicing elit sed do
• Eiusmod tempor
• Incididunt ut labore et dolore magna
• Ut enim ad minim veniam

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

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

RTE-Überschriften

Die Absätze

Lorem ipsum dolor sitzen 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 Übung ullamcorper.

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

Geben Sie Stile ein

• Stark
• Betonung
• Inline-Link
• Streik
• ^Sup

Blockquotes

Eu feugiat nulla facilisis bei vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum Nam liber tempor cum cum soluta nobis eleifend Option congue nihil imperdiet Doming id quod mazim placerat facer possim annehmen.

Der Autor des Zitats

Listen

---

Responsive Tabellen

---

Formulare

Standardformularelemente

Horizontale Beschriftung Horizontale Beschriftung 2 -- Wählen -- Option 1 Option 2 Option 3 Kontrollkästchenbezeichnung

Unsichtbare Etiketten

Fügen Sie eine Klasse von hinzu label-hidden zu einem Etikett, um es visuell auszublenden und gleichzeitig für Bildschirmleser zugänglich zu halten. Verwenden Sie die placeholder Attribut als sichtbares Etikett.

Hinweis: Der placeholder Das Attribut funktioniert nur in IE10 +, daher sind unsichtbare Beschriftungen in IE9 und darunter deaktiviert.

Vorname Nachname E–Mail

---

Vertikale Formulare (Kunde, Kontakt usw.)

In Slate gibt es hierfür keine Stile, sie werden jedoch in den meisten Themen verwendet. Stilelemente in einem Formular / Div mit der Klasse "form-vertikal", um Ihre Stile hier anzuzeigen.

Sie können den meisten flüssigen Formelementen keine Klasse direkt hinzufügen (z {% form 'contact' %}). Schließen Sie das Formular stattdessen in ein div mit der Klasse ein .form-vertical um den gleichen Effekt zu erzielen.

Textfeld Platzhalter Feld deaktiviert Discographie Textfeld (Fehler) Textfeld (Erfolg) Feld auswählen -- Wählen -- Option 1 Option 2 Option 3

Checkboxen

Kontrollkästchen Feld
Kontrollkästchen Feld
Kontrollkästchen Feld

Radios

Option1
Option1
Option1

Textarea Dateifeld

Notizen und Formularfehler

In Slate sind keine Notizstile vorhanden, sie 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;
 }
 

Beispielverwendung:

 {% 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 %}
 

---

Buttons

Schaltfläche Standard

Standardschaltfläche (keine Standardeinstellungen)

Taste deaktiviert

Standardschaltfläche deaktiviert

Breiter Knopf

Breite Standardschaltfläche

---

Verschiedene Elemente

Horizontale Regeln

Es gibt keine Standardeinstellungen hr Stile in Slate, aber diese sind häufig hinzuzufügen.

Default hr

---

unsichtbar hr.hr--clear

---