Content

⭐️ Display

Display200 kann für Kundenvorteile und Flashdeals genutzt werden. Display100 wiederum für Seitentitel, Begrüßungen usw.

pl_display200

Display200

pl_display100

Display100

⭐️ Neue Headline

Die pl_headline300 Klasse darf ausschließlich für den Breakpoint >= L verwendet werden!

pl_headline300

Empfehlungen für Sie

pl_headline200

Empfehlungen für Sie

pl_headline100

Empfehlungen für Sie

pl_headline50

Empfehlungen für Sie

pl_headline25

Empfehlungen für Sie

pl_headline10

Empfehlungen für Sie

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

⭐️ Neue Copy

pl_copy125

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.

pl_copy100

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.

pl_copy75

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.

pl_copy50

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.

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.

pl_list--unordered

  • Lorem ipsum dolor sit amet, consetetur
    sadipscing elitr,
  • Sed diam nonumy eirmod tempor invidunt ut labore
    • et dolore magna aliquyam erat
    • sed diam voluptua.
  • At vero eos et accusam et justo duo dolores et ea rebum.

pl_list--ordered

  1. Lorem ipsum dolor sit amet, consetetur
    sadipscing elitr,
  2. Sed diam nonumy eirmod tempor invidunt ut labore
    1. et dolore magna aliquyam erat
    2. sed diam voluptua.
  3. At vero eos et accusam et justo duo dolores et ea rebum.

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

⭐️ Table View

Dieser Table View verwendet in der Regel das pl_table-view--item. Die im Beispiel verwendete Kombination aus <span> und pl_copy100 ist nur examplarisch. Der Content wird zu 100% durch den Anwender vorgegeben.

Für das --item gibt es noch Modifier in Form von pl_table-view--item-no-divider (eine Reihe ohne Linie oben) und pl_table-view--item-fully-clickable (entfernt das Padding und ermöglicht somit das Klicken der gesamten Reihe). Bei letzterem ist zu beachten, dass der vom Design vorgegebene Innenabstand von den Teams entsprechend beim ihrem Content dann extra gesetzt werden muss. Dabei einfach beim Padding der anderen Beispielreihen orientieren.

Bitte beachten das bei Verwendung des --item's auch der Wrapper in Form des pl_table-view mitgenommen werden muss, da dieser das grundsätzliche Layout plus den linken Abstand mitliefert. Die Klasse pl_table-view--headline kann für eine passende Überschrift verwendet werden, ist aber nur optional.

HEADLINE
[Empty Row]
Label
Row Icon Right
Row Icon Left
Label Lorem ipsum dolor sit
Label
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur similique error maiores soluta veritatis, alias illum temporibus labore perferendis officiis ratione quo repellat delectus magnam cupiditate incidunt blanditiis, nihil et quisquam quod neque quam dolores pariatur quidem? Amet, aperiam voluptate, rem temporibus excepturi ducimus omnis laboriosam eaque laudantium adipisci deserunt.
Label Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur similique error maiores soluta veritatis, alias illum temporibus labore perferendis officiis ratione quo repellat delectus magnam cupiditate incidunt blanditiis, nihil et quisquam quod neque quam dolores pariatur quidem? Amet, aperiam voluptate, rem temporibus excepturi ducimus omnis laboriosam eaque laudantium adipisci deserunt.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur similique error maiores soluta veritatis, alias illum temporibus labore perferendis officiis ratione quo repellat delectus magnam cupiditate incidunt blanditiis, nihil et quisquam quod neque quam dolores pariatur quidem? Amet, aperiam voluptate, rem temporibus excepturi ducimus omnis laboriosam eaque laudantium adipisci deserunt.

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

⭐️ Media Object

Neues Pattern um eine Kombination aus Bild plus Text darzustellen. Primärer Einsatzzweck ist klar der Bereich KuVo (Kundenvorteile), allerdings ist das Pattern darauf nicht beschränkt.

Single Variant

pl_media-object

Nicht vergessen!
Das liegt noch in deinem
Warenkorb
Nicht vergessen!
Das liegt noch in deinem
Warenkorb
Zeile 1
Zeile 2
Zeile 3
Zeile 1
Zeile 2
Zeile 1
Image mit 8px Abstand

pl_media-object--red

10% Extra auf Mode
und Wohnen
nur bis morgen 23:59 Uhr
Zeile 1
Zeile 2
Zeile 3
Zeile 1
Zeile 2
Zeile 1
Keine Lust auf
Versandkosten?
1 Jahr Liefer-Flat für 9,90€

Grouped Variant

pl_media-object

Nicht vergessen!
Das liegt noch in deinem Warenkorb
Zeile 1
Zeile 2
Zeile 1
Zeile 2

pl_media-object--red

Keine Lust auf Versandkosten?
1 Jahr Liefer-Flat für 9,90€
10% Extra auf Mode
und Wohnen
nur bis morgen 23:59 Uhr
10% Extra auf Mode
und Wohnen
nur bis morgen 23:59 Uhr

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

Technische Hinweise

Für dieses Pattern sind keine technischen Hinweise vorhanden!