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

RTE Überschrift eins

RTE Überschrift zwei

RTE Überschrift drei

RTE Überschrift vier

RTE Überschrift fünf
RTE Überschrift sechs

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

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

ul (Default)
  • Eine
  • Zwei
  • Drei
  • Vier
Numerische Kugel ol (Default)
  1. Eine
  2. Zwei
  3. Drei
  4. Vier
Untergeordnete Listen (passend zu den RTE-Stilen)
  • Eine
  • Zwei
  • Drei mit Kinderliste
    • Erster Unterpunkt
    • Zweiter Unterpunkt
    • Dritter Unterpunkt mit untergeordneter Liste
      • Gegenstand der dritten Ebene
      • Ein weiterer Gegenstand der dritten Ebene
  • Vier

Responsive Tabellen

BESTELLUNG DATUM ZAHLUNGSSTATUS ERFÜLLENDER STATUS TOTALER
#1001 22. Dezember 2015 Zugelassen Unerfüllt $ 43.03
#1002 23. Dezember 2015 Zugelassen Unerfüllt $ 44.03
#1003 24. Dezember 2015 Zugelassen Unerfüllt $ 45.03
#1004 25. Dezember 2015 Zugelassen Unerfüllt $ 46.03
#1005 26. Dezember 2015 Zugelassen Unerfüllt $ 47.03
#1006 27. Dezember 2015 Zugelassen Unerfüllt $ 48.03

Formulare

Standardformularelemente

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.


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.

Checkboxen

Radios

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 %}
 
Dies ist eine Standardnotiz
Dies ist eine Erfolgsmeldung

Dies ist eine Fehlermeldung.

  • Aufzählungszeichen können mehr Einblick in den Fehler bieten

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


Dies ist ein Standard-Cookie-Hinweis, den Sie ganz einfach im Administrator anpassen oder deaktivieren können. Wir verwenden Cookies, um sicherzustellen, dass Sie unsere Website optimal nutzen können.

DATENSCHUTZ
Vorlader
Englisch
Englisch