Content

Headline

Die Headline ist das Pattern für Überschriften. Insgesamt stehen fünf verschiedene Größen zur Verfügung. Eine Schriftfarbe bringt das Pattern nicht mit, so dass die Überschriften in der Standard-Schriftfarbe black100 dargestellt werden. Während für die größeren Headlines 100 und 150 die OTTO Sans Thin verwendet wird, greifen die 75er und 50er Varianten für eine bessere Lesbarkeit auf den Standard-Schriftschnitt und die 25er auf die Bold-Variante zurück.

headline150

Empfehlungen für Sie

headline100

Empfehlungen für Sie

headline75

Empfehlungen für Sie

headline50

Empfehlungen für Sie

headline25

Empfehlungen für Sie

Copy

Das Copy-Pattern dient der Formatierung von Fließtexten und steht in zwei Größen und zwei Ordnungen zur Verfügung. Standardgröße ist die copy100 erster Ordnung mit der Textfarbe black100. Anwendungsbeispiele für die Copy zweiter Ordnung sind z.B Hinweise, Telefon-Gebühren und Sternchen-Texte.

Für andere Arten von Textbausteinen als Fließtexte oder um lediglich auf eine bestimmte Schriftgröße oder -farbe zurückzugreifen, sind die Font-Variablen und Grundfarben zu verwenden.

copy100

1. Ordnung

Diese Bauknecht Waschmaschine Super Eco 6413 besticht vor allem durch Ihre Alltagstauglichkeit: Mit 6kg Ladevolumen fasst Sie eine Menge Wäsche und dank der Energieeffizienzklasse A+++ schonen Sie nicht nur die Umwelt sondern auch Ihre Haushaltskasse - der Stromverbrauch ist nämlich äußerst gering. Beim Strom sparen hilft Ihnen zusätzlich der praktische Eco Monitor, in dem er den voraussichtlichen Stromverbrauch de gewählten Programms anzeigt.

2. Ordnung

Diese Bauknecht Waschmaschine Super Eco 6413 besticht vor allem durch Ihre Alltagstauglichkeit: Mit 6kg Ladevolumen fasst Sie eine Menge Wäsche und dank der Energieeffizienzklasse A+++ schonen Sie nicht nur die Umwelt sondern auch Ihre Haushaltskasse - der Stromverbrauch ist nämlich äußerst gering. Beim Strom sparen hilft Ihnen zusätzlich der praktische Eco Monitor, in dem er den voraussichtlichen Stromverbrauch de gewählten Programms anzeigt.

copy75

1. Ordnung

Diese Bauknecht Waschmaschine Super Eco 6413 besticht vor allem durch Ihre Alltagstauglichkeit: Mit 6kg Ladevolumen fasst Sie eine Menge Wäsche und dank der Energieeffizienzklasse A+++ schonen Sie nicht nur die Umwelt sondern auch Ihre Haushaltskasse - der Stromverbrauch ist nämlich äußerst gering. Beim Strom sparen hilft Ihnen zusätzlich der praktische Eco Monitor, in dem er den voraussichtlichen Stromverbrauch de gewählten Programms anzeigt.

2. Ordnung

Diese Bauknecht Waschmaschine Super Eco 6413 besticht vor allem durch Ihre Alltagstauglichkeit: Mit 6kg Ladevolumen fasst Sie eine Menge Wäsche und dank der Energieeffizienzklasse A+++ schonen Sie nicht nur die Umwelt sondern auch Ihre Haushaltskasse - der Stromverbrauch ist nämlich äußerst gering. Beim Strom sparen hilft Ihnen zusätzlich der praktische Eco Monitor, in dem er den voraussichtlichen Stromverbrauch de gewählten Programms anzeigt.

SEO-Headline

Unter der SEO-Headline sind Patterns zur Formatierung von Überschriften in Texten zusammengefasst, die der Suchmaschinenoptimierung dienen. Die in zwei Größen verfügbare infoHeadline unterscheidet sich von den normalen Headline-Patterns nur durch die Schriftfarbe. Die adviserHeadline hingegen ist eine speziell aufgebaute und formatierte Überschrift für Beratertexte, die die klassischen SEO-Texte auf otto.de zukünftig teilweise ersetzen sollen.

Damit Suchmaschinen SEO-Headlines nicht als solche erkennen, dürfen diese Patterns nicht die Abkürzung "SEO" im Namen tragen. Aus diesem Grund werden die Präfixe "info" bzw. "adviser" verwendet.

adviserHeadline100

Kaufberatung für Raclette

im Handumdrehen zum perfekten Dinner

infoHeadline100

Mode, Möbel und Multimedia online kaufen bei OTTO

infoHeadline50

Mode, Möbel und Multimedia online kaufen bei OTTO

SEO-Copy

Die SEO-Copy soll zur Formatierung von Texten eingesetzt werden, die der Suchmaschinenoptimierung dienen. Sie unterscheidet sich von dem normalen Copy-Pattern nur durch die Schriftfarbe.

Damit Suchmaschinen SEO-Texte nicht als solche erkennen, darf dieses Pattern nicht die Abkürzung "SEO" im Namen tragen. Aus diesem Grund wird das Präfix "info" verwendet.

infoCopy100

Von Business-Kostüm bis Marken-Jeans - vom Abendkleid bis zur Outdoorjacke: die riesige Auswahl an Damen-, Herren- und Kinder-Mode lässt keine Wünsche offen. Und den passenden Schuh gibt’s dazu! Lassen Sie sich begeistern von innovativen Sport-Schuhen, klassischen Halb-Schuhen, raffinierten Overknees, eleganten Ballerinas, atemberaubenden Pumps – oder auch von funktionellen Gummistiefeln in den schönsten Farben des Regenbogens.

Liste

Das Listen-Pattern soll dazu eingesetzt werden, , im Content eingebundene Aufzählungen und nummerierte Listen zu formatieren. Es definiert die Art der Aufzählungs- und Nummerierungszeichen und sorgt für korrekte Einrückungen sowie harmonische Abstände zwischen den Listenelementen.

unorderedList100

  • unordered
    unordered
  • unordered
    • unordered
    • unordered

orderedList100

  1. ordered
    ordered
  2. ordered
    1. ordered
    2. ordered

Tabelle

Dieses Pattern ist eine Tabelle mit komplexer responsiver Funktionalität. Wesentlicher Mechanismus ist das Umsortieren der Spalten und Zeilen zwischen dem S-/M- und dem L-/XL-Breakpoint: Jede Zeile in L/XL wird zu einem Tabellenabschnitt in S/M, wobei die ehemalige Zeilen-Überschrift zur Überschrift des Abschnitts wird. Die Spalten werden zu den Zeilen dieses Abschnitts. Auf diese Weise kann auch der Inhalt komplexer Tabellen mit vielen Spalten auf den kleineren Breakpoints dargestellt werden.

Als zusätzliche Option kann zur besseren Lesbarkeit im L- und XL-Breakpoint jede zweite Zeile grau hervorgehoben werden (sog. "Zebrastreifen"-Muster). Ebenso können horizontale Trennlinien nach einzelnen Tabellenzeilen hinzugefügt werden.

Ergänzend steht für dieses Pattern auch eine Option zur Verfügung, mit der das Umsortieren beim Wechsel zwischen dem S- und M-Breakpoint ausgeschaltet werden kann.

table100

Standardvariante

Spalte Z-Überschrift Spalte A Spalte B Spalte C
Zeilen-Überschrift 1 Inhalt 1.A Inhalt 1.B Inhalt 1.C
Zeilen-Überschrift 2 Inhalt 2.A Inhalt 2.B Inhalt 2.C

mit Zebrastreifen auf L und XL

Spalte Z-Überschrift Spalte A Spalte B Spalte C
Zeilen-Überschrift 1 Inhalt 1.A Inhalt 1.B Inhalt 1.C
Zeilen-Überschrift 2 Inhalt 2.A Inhalt 2.B Inhalt 2.C

mit horizontaler Linie auf L und XL

Spalte Z-Überschrift Spalte A Spalte B Spalte C
Zeilen-Überschrift 1 Inhalt 1.A Inhalt 1.B Inhalt 1.C
Inhalt 1.D Inhalt 1.E Inhalt 1.F
Zeilen-Überschrift 2 Inhalt 2.A Inhalt 2.B Inhalt 2.C

table100 ohne responsive Umsortierung

Standardvariante

Spalte Z-Überschrift Spalte A Spalte B Spalte C
Zeilen-Überschrift 1 Inhalt 1.A Inhalt 1.B Inhalt 1.C
Zeilen-Überschrift 2 Inhalt 2.A Inhalt 2.B Inhalt 2.C

mit Zebrastreifen

Spalte Z-Überschrift Spalte A Spalte B Spalte C
Zeilen-Überschrift 1 Inhalt 1.A Inhalt 1.B Inhalt 1.C
Zeilen-Überschrift 2 Inhalt 2.A Inhalt 2.B Inhalt 2.C

mit horizontaler Linie

Spalte Z-Überschrift Spalte A Spalte B Spalte C
Zeilen-Überschrift 1 Inhalt 1.A Inhalt 1.B Inhalt 1.C
Inhalt 1.D Inhalt 1.E Inhalt 1.F
Zeilen-Überschrift 2 Inhalt 2.A Inhalt 2.B Inhalt 2.C

Für dieses Pattern ist kein Konfigurator verfügbar!

Technische Hinweise

Für dieses Pattern sind keine technischen Hinweise vorhanden!