Stile

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

---

Typografie

Rubrik eins

Rubrik zwei

Rubrik drei

Rubrik vier

Rubrik fünf

Rubrik sechs

H1 ÜBERSCHRIFT

H2 HEADING

H3 Überschrift

H4 Überschrift

H5 ÜBERSCHRIFT

H6 Überschrift

Offenbar hatten wir eine große Höhe in der Atmosphäre erreicht, denn der Himmel war tiefschwarz, und die Sterne hatten aufgehört zu funkeln. Durch dieselbe Illusion, die den Horizont des Meeres auf die Höhe des Betrachters auf einem Hügel hebt, wurde die Zobelwolke unter uns aufgewölbt, und das Auto schien in der Mitte einer riesigen dunklen Kugel zu schweben, deren obere Hälfte mit Silber bestreut war. Als ich in den dunklen Golf hinunterblickte, sah ich ein rötliches Licht, das durch einen Spalt in den Wolken strömte.

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

• Neu eingetroffen
• Verkauf & Sonderangebote
• Frauen
• Männer
• Schuhe
• Taschen & Zubehör
• Top-Marken
• Lookbook

• Lorem ipsum dolor sit amet
• Conse ctetur adipisicing elit sed do
• Eiusmod temporär
• 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-Rubriken

Paragraphen

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.

Arten von Stilen

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

Blockanführungszeichen

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.

Der Autor des Zitats

Verzeichnisse

---

Reaktionsfähige Tabellen

---

Formulare

Standard-Formularelemente

Horizontales Etikett Horizontales Etikett 2 -- Wählen Sie -- Option 1 Option 2 Option 3 Etikett des Kontrollkästchens

Unsichtbare Etiketten

Hinzufügen einer Klasse von label-hidden zu einem Etikett hinzufügen, um es optisch auszublenden, während es für Bildschirmleser zugänglich bleibt. Verwenden Sie die Platzhalter Attribut als sichtbares Label.

Anmerkung: Die Platzhalter Attribut funktioniert nur im IE10+, so dass unsichtbare Etiketten im IE9 und darunter deaktiviert sind.

Vorname Nachname E-Mail

---

Vertikale Formulare (Kunde, Kontakt, etc.)

In Slate gibt es dafür keine Stile, aber sie werden in den meisten Themes verwendet. Stylen Sie Elemente innerhalb eines form/div mit der Klasse `form-vertical`, um Ihre Stile hier zu sehen.

Sie können den meisten Flüssigformularelementen nicht direkt eine Klasse hinzufügen (z. B. {% Formular 'Kontakt' %}). Stattdessen verpacken Sie das Formular in ein div mit der Klasse .form-vertikal um denselben Effekt zu erzielen.

Textfeld Platzhalter Deaktiviertes Feld Etikett Textfeld (Fehler) Textfeld (Erfolg) Feld auswählen -- Wählen Sie -- Option 1 Option 2 Option 3

Kontrollkästchen

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

Funkgeräte

Option1
Option1
Option1

Textarea Datei Feld

Anmerkungen und Formfehler

In Slate gibt es keine Notizstile, aber sie werden üblicherweise hinzugefügt, um Formularfehler zu behandeln. Beispiel Stile:

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

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

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

Beispiel für die Verwendung:

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

Standard-Schaltfläche

Standardtaste (keine Standardwerte)

Schaltfläche deaktiviert

Standardschaltfläche deaktiviert

Breite Taste

Breite Standardtaste

---

Verschiedene Elemente

Horizontale Regeln

Es gibt keine Standard hr Stile in Slate, aber das sind die üblichen, die man hinzufügen kann.

Standard hr

---

Unsichtbar hr.hr-Löschung

---