Styleguide

Dieser Styleguide zeigt die vollständige Auswahl an WYSIWYG-Elementen, die Sie für ausführliche redaktionelle Inhalte auf Ihren Seiten oder in Ihren Beiträgen verwenden können. Dies ist keine vollständige Liste, deckt aber die meisten gängigen Elemente ab, die Sie benötigen könnten!

Verwenden Sie class="intro" für einleitende Texte, die stärker hervorstechen sollen als ein Standardabsatz und dennoch als Seiteninhalt lesbar bleiben.

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

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

Redaktioneller Text

Redaktionelle Seiten können besondere Wichtigkeit, Hervorhebungen, 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 Anleitungen, Launch-Hinweisen, Kaufkontext oder wichtigen Informationen zu Richtlinien.

Überschriftenhierarchie

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

Überschrift der ersten Ebene für Artwork

Überschrift der zweiten Ebene für Seitenabschnitte

Überschrift der dritten Ebene für Unterabschnitte

Überschrift der vierten Ebene für gruppierte Details

Überschrift der fünften Ebene für kompakte Bezeichnungen

Überschrift der sechsten Ebene für Metadaten

Inline-Semantik

Verwenden Sie <kbd> für Tastaturbefehle wie Ctrl + K, <abbr> für Abkürzungen wie SEO und <dfn> zur Einführung eines Begriffs wie strukturierter Inhalt.

Verwenden Sie <time> für Datumsangaben wie 25. Juni 2026, <cite> für Titel oder Quellen wie The Darkroom 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 Standortangaben, nicht für allgemeine postalische Formatierungen.

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

Listen

Listen sollten übersichtliche Anleitungen ermöglichen und zugleich genügend Text enthalten, um Umbrüche, Links und Inline-Formatierungen zu testen.

Ungeordnete Liste mit geordneten Schritten

• Vergleichen Sie Produkte sorgfältig. Beginnen Sie mit einem weiteren ausgewählten Artwork 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 die 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 mit einem klaren Absatz und einem passenden Link.
2. Unterstützen Sie die Kernaussage mit nützlichen Details:
   • Heben Sie wichtige Begriffe sparsam hervor.
   • Verwenden Sie <code> für wörtliche Bezeichnungen oder Ausschnitte.
   • Setzen Sie Fettdruck oder Hervorhebungen nur dort ein, wo sie den Lesenden helfen.
3. Schließen Sie den Abschnitt mit einem klaren nächsten Gedanken ab, nicht mit einem unvollständigen Fragment.

Zitate und Hinweise

Verwenden Sie Blockzitate für Quellenangaben, Kundenstimmen, redaktionelle Auszüge oder Aussagen, die optisch vom umgebenden Text getrennt werden sollen.

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

Redaktionsteam von Darkroom

Verwenden Sie class="pullquote", wenn ein Zitat stärker hervorstechen 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 die Platzierung von Bildunterschriften unterhalb und oberhalb zu zeigen.

Gehostetes Video

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

YouTube-Iframe

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

Tabelle

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

Beispielvergleich von Artworks

Merkmal	Standardoption	Ausgewählte Option	Hinweise
Primärer Link	Produkt eins	Produkt zwei	Links in Tabellenzellen sollten leicht erkennbar und antippbar bleiben.
Redaktionelle Eignung	Kurze Beschreibung mit leichter Hervorhebung.	Eine längere Beschreibung, die sich über mehrere Zeilen erstreckt und fett formatierten Text für die wichtigste Aussage enthält.	Verwenden Sie unterschiedlich lange Zellen, um Ausrichtung und Abstände zu prüfen.
Pflegedetail	Spot clean	Professional care recommended	Inline-Code kann wörtliche Bezeichnungen, Pflegeetiketten oder kompakte Spezifikationen kennzeichnen.
Verfügbarkeit	Begrenzt	Online und im Flagship-Store verfügbar.	Tabellenzellen können Hervorhebungen, Links und anleitende Sätze 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 stärkeren einleitenden Absatz zu erstellen.

Bildunterschrift

Verwenden Sie class="caption" für Bildunterschriften mit einheitlicher Gestaltung.

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 artwork</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, Größenhinweise oder optionale redaktionelle Anmerkungen.

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 zeigen soll.

---

• Abgeschlossene Aufgabe mit bereits erreichtem wichtigem Fortschritt.
• Nicht abgeschlossene Aufgabe mit noch ausstehendem ergänzendem Kontext.

Wenn jeder Abschnitt einen klaren Zweck erfüllt, bleiben umfangreiche Inhalte leicht zu überblicken, nützlich zu lesen und über das gesamte Darkroom-Erlebnis hinweg konsistent.