Styleguide

Dieser Beispiel-Styleguide zeigt die gesamte Auswahl an WYSIWYG-Elementen, die Sie für längere redaktionelle Inhalte auf Ihren Seiten oder in Ihren Artikeln verwenden können. Dies ist keine vollständige Liste, sondern zeigt die meisten gängigen Elemente, die Sie benötigen könnten.

Verwenden Sie class="intro" für einen einleitenden Text, der prominenter als ein Standardabsatz wirken und dennoch als Seiteninhalt lesbar bleiben soll.

Verwenden Sie class="small" für ergänzende Hinweise, die lesbar bleiben, sich aber deutlich vom Fließtext abheben sollen.

Verwenden Sie class="citation" für Quellenangaben, kompakte Credits, Bildunterschriften oder redaktionelle Nebenbemerkungen.

Redaktioneller Text

Redaktionelle Seiten können starke Hervorhebungen, Betonungen, entfernte Formulierungen, hervorgehobene Begriffe und Inline-code-style labels kombinieren, ohne den Lesefluss zu unterbrechen.

Verwenden Sie <mark>, um auf eine Formulierung aufmerksam zu machen, <del> oder <s> für entfernten oder nicht mehr aktuellen Text und <code> für wörtliche Bezeichnungen, Dateinamen, Einstellungen oder kurze technische Verweise.

Verwenden Sie class="callout" für einen Absatz mit kurzen Hinweisen, Einführungsnotizen, Kaufkontext oder wichtigen Informationen zu Richtlinien.

Überschriftenhierarchie

Überschriften sollten eine klare Gliederung schaffen. Reservieren Sie <h1> für den primären Seitentitel, wenn das Template keinen solchen bereitstellt, und verwenden Sie anschließend <h2> und <h3> zur Strukturierung der Seitenabschnitte.

Überschriftenebene eins für Bäume

Überschriftenebene zwei für Seitenabschnitte

Überschriftenebene drei für Unterabschnitte

Überschriftenebene vier für gruppierte Details

Überschriftenebene fünf für kompakte Bezeichnungen

Überschriftenebene sechs für Metadaten

Inline-Semantik

Verwenden Sie <kbd> für Tastaturbefehle wie Strg + K, <abbr> für Abkürzungen wie SEO und <dfn>, wenn Sie einen Begriff wie strukturierte Inhalte einführen.

Verwenden Sie <time> für Daten wie 25. Juni 2026, <cite> für Titel oder Quellen wie The Verdant Journal, <var> für Variablen wie n und <samp> für Beispielausgaben wie Erfolgreich gespeichert.

Zu den Inline-Beispielen gehören außerdem Fettdruck, Kursivschrift, Unterstreichung, Durchstreichung, _Tiefstellung, ^Hochstellung und ein Produktlink.

Adresse

Verwenden Sie <address> für Kontakt- oder Standortdetails, nicht für allgemeine postalische Formatierungen.

Flagship-Store
123 Example Avenue
New York, NY 10001
Standorte anzeigen

Listen

Listen sollten übersichtliche Hinweise unterstützen und gleichzeitig genügend Text für Tests von Umbrüchen, Links und Inline-Formatierungen enthalten.

Ungeordnete Liste mit geordneten Schritten

• Vergleichen Sie Produkte sorgfältig. Beginnen Sie mit einem weiteren empfohlenen Baum und prüfen Sie anschließend die für den vorgesehenen Einsatz wichtigsten Details.
• Planen Sie den Kaufprozess. Ein Listenelement kann verschachtelte geordnete Schritte enthalten:
  1. Bestätigen Sie Anforderungen an Größe, Material oder Stil.
  2. Prüfen Sie ergänzende Inhalte, einschließlich FAQs und Richtlinienseiten.
  3. Wählen Sie die Option, die Passform, Ausführung und Verfügbarkeit am besten miteinander verbindet.
• Formulieren Sie prägnant, aber mit genügend Kontext, damit jedes Element auch beim schnellen Überfliegen verständlich bleibt.

Geordnete Liste mit ungeordneten Hinweisen

1. Erklären Sie den Zweck der Seite in einem klaren Absatz und fügen Sie einen passenden Link ein.
2. Stützen Sie die Hauptaussage mit hilfreichen Details:
   • Heben Sie wichtige Begriffe sparsam hervor.
   • Verwenden Sie <code> für wörtliche Bezeichnungen oder Ausschnitte.
   • Fügen Sie fetten oder hervorgehobenen Text nur dort ein, wo er den Leserinnen und Lesern hilft.
3. Schließen Sie den Abschnitt mit einem klaren nächsten Gedanken ab, nicht mit einem unvollständigen Fragment.

Zitate und Hinweiskästen

Verwenden Sie Blockzitate für Quellenangaben, Kundenstimmen, redaktionelle Auszüge oder Aussagen, die sich visuell vom umgebenden Text abheben sollen.

Die nützlichsten Produktinhalte beantworten praktische Fragen und vermitteln der Marke zugleich eine eigene Perspektive.

Redaktionsteam von Verdant

Verwenden Sie class="pullquote", wenn ein Zitat stärker hervorgehoben werden soll als ein gewöhnliches Blockzitat.

Bilder

Verwenden Sie figure-Elemente, wenn ein Bild eine Bildunterschrift benötigt. Die folgenden Beispiele verwenden <figure class="embed image"> und <figcaption class="caption">, um Bildunterschriften unterhalb und oberhalb zu zeigen.

Gehostetes Video

Verwenden Sie das standardmäßige <video>-Element für gehostete MP4-Inhalte. Halten Sie das Markup schlicht, sofern das umgebende Layout keine zusätzliche Struktur erfordert.

YouTube-Iframe

Verwenden Sie den standardmäßigen YouTube-Iframe, wenn ein Video von YouTube eingebettet werden soll.

Tabelle

Tabellen sollten aussagekräftige Überschriften und abwechslungsreiche Zellinhalte enthalten, damit Leserinnen und Leser Details schnell vergleichen können.

Beispiel für einen Baumvergleich

Merkmal	Standardoption	Empfohlene Option	Hinweise
Primärer Link	Produkt eins	Produkt zwei	Links in Tabellenzellen sollten leicht erkennbar und antippbar bleiben.
Redaktionelle Eignung	Kurze Beschreibung mit leichter Betonung.	Eine längere Beschreibung, die sich über mehrere Zeilen erstreckt und starken Text für die wichtigste Aussage enthält.	Verwenden Sie unterschiedlich lange Zellinhalte, um Ausrichtung und Abstände zu überprüfen.
Pflegedetail	Spot clean	Professional care recommended	Inline-Code kann wörtliche Bezeichnungen, Pflegehinweise oder kompakte Spezifikationen kennzeichnen.
Verfügbarkeit	Begrenzt	Online und im Flagship-Store verfügbar.	Tabellenzellen können Hervorhebungen, Links und Hinweise in Satzlänge enthalten.

Definitionsliste

Verwenden Sie <dl> für Begriff-und-Beschreibung-Paare, Glossareinträge, kompakte Spezifikationen oder gruppierte Metadaten.

Einleitungsabsatz

Verwenden Sie class="intro", um einen wirkungsvolleren Einleitungsabsatz zu erstellen.

Bildunterschrift

Verwenden Sie class="caption" für figure-Bildunterschriften, die einheitlich gestaltet werden sollen.

Hervorgehobenes Zitat

Verwenden Sie class="pullquote", wenn ein Zitat als stärkerer redaktioneller Moment wirken soll.

Codeblock

Verwenden Sie <pre> zusammen mit <code> für längere Beispiele, bei denen Abstände und Zeilenumbrüche wichtig sind.

<section>
  <h2>Care notes for trees</h2>
  <p class="intro">Begin with a concise overview that helps readers orient themselves.</p>
  <ul>
    <li><strong>Store carefully.</strong> Keep the item clean, dry, and protected between uses.</li>
    <li><em>Review the details.</em> Link to related products or supporting pages where useful.</li>
  </ul>
  <p class="small">Use small text for secondary reminders, not primary instructions.</p>
</section>

Aufklappelemente

Verwenden Sie <details> und <summary> für optionale Inhalte, die verfügbar sein sollen, ohne die Hauptseite zu überladen.

Beispiel für aufklappbaren Inhalt

Details-Blöcke eignen sich für umfangreiche Richtlinien, Pflegeinformationen, Hinweise zu Größen oder optionale redaktionelle Notizen.

Trennlinien und Aufgabenlisten

Verwenden Sie <hr>, wenn eine thematische Trennlinie klarer ist als eine weitere Überschrift. Checkbox-Eingaben können in aufgabenähnlichen Inhalten erscheinen, wenn die Seite einen Fortschritt oder eine Checklistenformatierung darstellen soll.

---

• Erledigtes Aufgabenelement mit bereits abgeschlossenem wichtigem Fortschritt.
• Unerledigtes Aufgabenelement mit noch ausstehendem ergänzendem Kontext.

Wenn jeder Abschnitt einen klaren Zweck erfüllt, bleiben längere Inhalte leicht erfassbar, nützlich und über das gesamte Verdant-Erlebnis hinweg konsistent.