Fragmente

⭐️ Neue Grundfarben

Die Grundfarben von OTTO bestehen aus Rot-, Blau- und Grautönen. Primärfarbe ist das "OTTO-Rot", genannt pl_red100.

Die Farbcodes stehen als SASS-Variablen zur Verfügung und können für beliebige CSS-Eigenschaften eingesetzt werden.

 

$pl_color-white100

#ffffff

 

$pl_color-grey25

#f0f0f0

 

$pl_color-grey100

#e6e6e6

 

$pl_color-grey200

#c4c4c4

 

$pl_color-grey400

#777777

 

$pl_color-black100

#222222

 

$pl_color-red100

#f00020

 

$pl_color-blue100

#008ffd

🧟 Grundfarben

Die Grundfarben von OTTO bestehen aus Rot- und Grautönen. Primärfarbe ist das "OTTO-Rot", genannt red100.

Die Farbcodes stehen als SASS-Variablen zur Verfügung und können für beliebige CSS-Eigenschaften eingesetzt werden.

 

$grey25

#F6F6F6

 

$grey50

#EEEEEE

 

$grey100

#E6E6E6

 

$grey200

#C4C4C4

 

$grey300

#9E9E9E

 

$grey400

#777777

 

$black50

#333333

 

$black100

#222222

 

$red50

#F00020

 

$red100

#D4021D

 

$red200

#BA0019

⭐️ Neue Sonderfarben

Die Sonderfarben bilden einsatzzweckbezogene Spezialfarben ab und sollten nicht in anderen Kontexten verwendet werden.

Die Farbcodes stehen als SASS-Variablen zur Verfügung und können für beliebige CSS-Eigenschaften eingesetzt werden.

 

$pl_color-sustainable

#7ea87b

 

$pl_color-success

#50cc7f

 

$pl_color-hint

#ffdf33

Sonderfarben

Die Sonderfarben bilden Einsatzzweckbezogene Spezialfarben ab und sollten nicht in anderen Kontexten verwendet werden. Neben einem Grauton für deaktivierte Elemente und einem Gelbton für Services, gibt es Farben für Fehlermeldungen, Hinweise, die Verfügbarkeiten und die Energielabels.

Die Farbcodes stehen als SASS-Variablen zur Verfügung und können für beliebige CSS-Eigenschaften eingesetzt werden.

 

$error-font-color

#FFFFFF

 

$error-background-color

#F24E63

 

$error-inverted-color

#E6344B

 

$error-form-color

#FFBEC6

 

$hint-font-color

#FFFFFF

 

$hint-background-color

#318CD7

 

$hint-inverted-color

#217AC4

 

$success-font-color

#FFFFFF

 

$success-background-color

#71BA24

 

$success-inverted-color

#69AF1F

 

$warning-font-color

#222222

 

$warning-background-color

#F4E245

 

$warning-border-color

#FFD387

 

$warning-inverted-color

#F1B500

 

$warning-inverted-icon-color

#FFD200

 

$warning-form-color

#FFF6A6

 

$disabled-color

#CCCCCC

 

$service-color

#FBB100

 

$service-background-color

#FDD87F

 

$availability-green

#198504

 

$availability-orange

#EE9201

 

$availability-red

#DA2031

 

$energy-label-dark-green

#009640

 

$energy-label-medium-green

#50AF31

 

$energy-label-light-green

#C7D301

 

$energy-label-yellow

#FFED00

 

$energy-label-light-orange

#FBB900

 

$energy-label-dark-orange

#EC6707

 

$energy-label-red

#E30613

Schriftgrößen

Die hier definierten Schriftgrößen inklusive der passenden Zeilenhöhen bilden alle verschiedenen Größen ab, die auf otto.de zum Einsatz kommen sollen. Auf ihnen basieren auch die Copy- und Headline-Patterns.

Die Schriftgrößen sind als SASS-Variablen implementiert und können so auf beliebige Elemente angewendet werden. Sie werden als Teil der Global-Frontend-Settings via Git und Nexus bereitgestellt.

Das SASS-Mixin font-size() übersetzt die Variablen automatisch in font-size- und line-height-Angaben in REM mit px-Fallback.
Beispiel: @include font-size($font350);

Font Größe Line-Height Beispiel-Klasse
$font75 12px / 0.75rem 18px / 1.125rem copy75
$font100 14px / 0.875rem 20px / 1.25rem copy100, headline25
$font125 16px / 1rem 22px / 1.375rem
$font150 18px / 1.125rem 24px / 1.5rem headline50
$font175 20px / 1.25rem 26px / 1.625rem
$font200 22px / 1.375rem 28px / 1.75rem headline75
$font225 24px / 1.5rem 30px / 1.875rem
$font250 26px / 1.625rem 32px / 2rem headline100
$font275 28px / 1.75rem 34px / 2.125rem
$font300 30px / 1.875rem 36px / 2.25rem
$font325 32px / 2rem 38px / 2.375rem
$font350 34px / 2.125rem 40px / 2.5rem headline150

Schriftschnitte

Die Schriftschnitte sind CSS-Klassen die dazu genutzt werden können, den Schriftschnitt von Fließtexten zu definieren. Neben der normalen Schriftstärke stehen eine fette und eine dünne Variante zur Verfügung.

Die copyThin darf erst ab einer Schriftgröße von mindestens 22px ($font200) eingesetzt werden. Auf den Breakpoints S und M ist die copyThin nicht verfügbar und wird automatisch durch die copyNormal ersetzt.

copyNormal

Diese Bauknecht Waschmaschine Super Eco 6413 besticht vor allem durch Ihre Alltagstauglich- keit: 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 des gewählten Programms anzeigt.

copyBold

Diese Bauknecht Waschmaschine Super Eco 6413 besticht vor allem durch Ihre Alltagstauglich- keit: 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 des gewählten Programms anzeigt.

copyThin

Diese Bauknecht Waschmaschine Super Eco 6413 besticht vor allem durch Ihre Alltagstauglich- keit: 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 des gewählten Programms anzeigt.

Webfonts

Die Webfonts beinhalten vier verschiedene Schriftart-Definitionen, über die die OTTO Sans mit ihren drei Schriftschnitten Regular, Bold und Thin sowie die OTTO Icon-Font zur Verfügung gestellt werden können. Auf otto.de müssen sie nicht mehr integriert werden, sondern stehen über die Global Resources bereits seitenübergreifend zur Verwendung bereit. Auf Mobilgeräten (den Breakpoints S und M) wird aus Performancegründen auf das Laden der OTTO Sans Thin verzichtet und als Fallback die OTTO Sans Regular verwendet.

Bitte beachten: Die Schriften sind lizenziert und auf OTTO beschränkt! Sie dürfen nicht für Konzern-Themen oder andere Unternehmen/Töchter der Gruppe eingesetzt werden.

Wichtiger Hinweis zur Nutzung: Die unten stehenden @font-face Definitionen enthalten keine stabilen Pfade zu den Schriften! Unter Umständen existieren bereits neue Versionen der jeweiligen Schrift, da die Dateien versioniert sind. Entnehmen Sie die aktuelle Version bitte entweder direkt aus otto.de Webseite oder aus diesem Link: https://www.otto.de/assets-static/global-resources/assets.global-resources.fonts.latest.css.

OTTO Sans Regular

@font-face {
    font-family: 'OttoSans';
    src: url('https://www.otto.de/assets-static/global-resources/assets/otto-sans_88e5e760.woff2') format('woff2'),
         url('https://www.otto.de/assets-static/global-resources/assets/otto-sans_a4416f4.woff') format('woff'),
         url('https://www.otto.de/assets-static/global-resources/assets/otto-sans_c3506310.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

OTTO Sans Bold

@font-face {
    font-family: 'OttoSans';
    src: url('https://www.otto.de/assets-static/global-resources/assets/otto-sans-bold_89d38c21.woff2') format('woff2'),
         url('https://www.otto.de/assets-static/global-resources/assets/otto-sans-bold_f1a42f72.woff') format('woff'),
         url('https://www.otto.de/assets-static/global-resources/assets/otto-sans-bold_bce00337.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

OTTO Sans Thin

@font-face {
    font-family: 'OttoSansThin';
    src: url('https://www.otto.de/assets-static/global-resources/assets/otto-sans-thin_be4e47f1.woff2') format('woff2'),
         url('https://www.otto.de/assets-static/global-resources/assets/otto-sans-thin_cbdbbbd3.woff') format('woff'),
         url('https://www.otto.de/assets-static/global-resources/assets/otto-sans-thin_1836c4ca.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

OTTO Icons

@font-face {
    font-family: 'OttoIcons';
    src: url('https://www.otto.de/assets-static/global-resources/assets/OTTO-Icons_dad27dac.woff2') format('woff2'),
         url('https://www.otto.de/assets-static/global-resources/assets/OTTO-Icons_af3d05d7.woff') format('woff'),
         url('https://www.otto.de/assets-static/global-resources/assets/OTTO-Icons_9a5bcc97.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

⭐️ Logos (SVG)

Icon Name Markup
pl_logo_amex
<svg class="pl_logo" role="img"><use xlink:href="/assets-static/icons/pl_logo_amex.svg#pl_logo_amex" /></svg>
pl_logo_giropay
<svg class="pl_logo" role="img"><use xlink:href="/assets-static/icons/pl_logo_giropay.svg#pl_logo_giropay" /></svg>
pl_logo_giropay_paydirekt
<svg class="pl_logo" role="img"><use xlink:href="/assets-static/icons/pl_logo_giropay_paydirekt.svg#pl_logo_giropay_paydirekt" /></svg>
pl_logo_mastercard
<svg class="pl_logo" role="img"><use xlink:href="/assets-static/icons/pl_logo_mastercard.svg#pl_logo_mastercard" /></svg>
pl_logo_otto
<svg class="pl_logo" role="img"><use xlink:href="/assets-static/icons/pl_logo_otto.svg#pl_logo_otto" /></svg>
pl_logo_otto-deprecated
<svg class="pl_logo" role="img"><use xlink:href="/assets-static/icons/pl_logo_otto-deprecated.svg#pl_logo_otto-deprecated" /></svg>
pl_logo_otto-up
<svg class="pl_logo" role="img"><use xlink:href="/assets-static/icons/pl_logo_otto-up.svg#pl_logo_otto-up" /></svg>
pl_logo_paypal
<svg class="pl_logo" role="img"><use xlink:href="/assets-static/icons/pl_logo_paypal.svg#pl_logo_paypal" /></svg>
pl_logo_ratepay
<svg class="pl_logo" role="img"><use xlink:href="/assets-static/icons/pl_logo_ratepay.svg#pl_logo_ratepay" /></svg>
pl_logo_sepa
<svg class="pl_logo" role="img"><use xlink:href="/assets-static/icons/pl_logo_sepa.svg#pl_logo_sepa" /></svg>
pl_logo_slogan
<svg class="pl_logo" role="img"><use xlink:href="/assets-static/icons/pl_logo_slogan.svg#pl_logo_slogan" /></svg>
pl_logo_up
<svg class="pl_logo" role="img"><use xlink:href="/assets-static/icons/pl_logo_up.svg#pl_logo_up" /></svg>
pl_logo_visa
<svg class="pl_logo" role="img"><use xlink:href="/assets-static/icons/pl_logo_visa.svg#pl_logo_visa" /></svg>
pl_logo_facebook
<svg class="pl_logo" role="img"><use xlink:href="/assets-static/icons/pl_logo_facebook.svg#pl_logo_facebook" /></svg>
pl_logo_github
<svg class="pl_logo" role="img"><use xlink:href="/assets-static/icons/pl_logo_github.svg#pl_logo_github" /></svg>
pl_logo_instagram
<svg class="pl_logo" role="img"><use xlink:href="/assets-static/icons/pl_logo_instagram.svg#pl_logo_instagram" /></svg>
pl_logo_pinterest
<svg class="pl_logo" role="img"><use xlink:href="/assets-static/icons/pl_logo_pinterest.svg#pl_logo_pinterest" /></svg>
pl_logo_twitter
<svg class="pl_logo" role="img"><use xlink:href="/assets-static/icons/pl_logo_twitter.svg#pl_logo_twitter" /></svg>
pl_logo_xing
<svg class="pl_logo" role="img"><use xlink:href="/assets-static/icons/pl_logo_xing.svg#pl_logo_xing" /></svg>
pl_logo_youtube
<svg class="pl_logo" role="img"><use xlink:href="/assets-static/icons/pl_logo_youtube.svg#pl_logo_youtube" /></svg>

⭐️ Icons (SVG)

Icon Name Markup
pl_icon_arrow-down50
<svg class="pl_icon50" role="img"><use xlink:href="/assets-static/icons/pl_icon_arrow-down50.svg#pl_icon_arrow-down50" /></svg>
pl_icon_arrow-left50
<svg class="pl_icon50" role="img"><use xlink:href="/assets-static/icons/pl_icon_arrow-left50.svg#pl_icon_arrow-left50" /></svg>
pl_icon_arrow-right50
<svg class="pl_icon50" role="img"><use xlink:href="/assets-static/icons/pl_icon_arrow-right50.svg#pl_icon_arrow-right50" /></svg>
pl_icon_arrow-up50
<svg class="pl_icon50" role="img"><use xlink:href="/assets-static/icons/pl_icon_arrow-up50.svg#pl_icon_arrow-up50" /></svg>
pl_icon_basket50
<svg class="pl_icon50" role="img"><use xlink:href="/assets-static/icons/pl_icon_basket50.svg#pl_icon_basket50" /></svg>
pl_icon_check50
<svg class="pl_icon50" role="img"><use xlink:href="/assets-static/icons/pl_icon_check50.svg#pl_icon_check50" /></svg>
pl_icon_close50
<svg class="pl_icon50" role="img"><use xlink:href="/assets-static/icons/pl_icon_close50.svg#pl_icon_close50" /></svg>
pl_icon_delete50
<svg class="pl_icon50" role="img"><use xlink:href="/assets-static/icons/pl_icon_delete50.svg#pl_icon_delete50" /></svg>
pl_icon_filter50
<svg class="pl_icon50" role="img"><use xlink:href="/assets-static/icons/pl_icon_filter50.svg#pl_icon_filter50" /></svg>
pl_icon_info50
<svg class="pl_icon50" role="img"><use xlink:href="/assets-static/icons/pl_icon_info50.svg#pl_icon_info50" /></svg>
pl_icon_minus50
<svg class="pl_icon50" role="img"><use xlink:href="/assets-static/icons/pl_icon_minus50.svg#pl_icon_minus50" /></svg>
pl_icon_plus50
<svg class="pl_icon50" role="img"><use xlink:href="/assets-static/icons/pl_icon_plus50.svg#pl_icon_plus50" /></svg>
pl_icon_question50
<svg class="pl_icon50" role="img"><use xlink:href="/assets-static/icons/pl_icon_question50.svg#pl_icon_question50" /></svg>
pl_icon_rating-empty50
<svg class="pl_icon50" role="img"><use xlink:href="/assets-static/icons/pl_icon_rating-empty50.svg#pl_icon_rating-empty50" /></svg>
pl_icon_rating-filled50
<svg class="pl_icon50" role="img"><use xlink:href="/assets-static/icons/pl_icon_rating-filled50.svg#pl_icon_rating-filled50" /></svg>
pl_icon_rating-half50
<svg class="pl_icon50" role="img"><use xlink:href="/assets-static/icons/pl_icon_rating-half50.svg#pl_icon_rating-half50" /></svg>
pl_icon_sort50
<svg class="pl_icon50" role="img"><use xlink:href="/assets-static/icons/pl_icon_sort50.svg#pl_icon_sort50" /></svg>
pl_icon_wishlist-active50
<svg class="pl_icon50" role="img"><use xlink:href="/assets-static/icons/pl_icon_wishlist-active50.svg#pl_icon_wishlist-active50" /></svg>
pl_icon_wishlist50
<svg class="pl_icon50" role="img"><use xlink:href="/assets-static/icons/pl_icon_wishlist50.svg#pl_icon_wishlist50" /></svg>
pl_icon_advice
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_advice.svg#pl_icon_advice" /></svg>
pl_icon_arrow-down
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_arrow-down.svg#pl_icon_arrow-down" /></svg>
pl_icon_arrow-left
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_arrow-left.svg#pl_icon_arrow-left" /></svg>
pl_icon_arrow-right
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_arrow-right.svg#pl_icon_arrow-right" /></svg>
pl_icon_arrow-up
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_arrow-up.svg#pl_icon_arrow-up" /></svg>
pl_icon_assortment
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_assortment.svg#pl_icon_assortment" /></svg>
pl_icon_bank-details
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_bank-details.svg#pl_icon_bank-details" /></svg>
pl_icon_basket
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_basket.svg#pl_icon_basket" /></svg>
pl_icon_blogs
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_blogs.svg#pl_icon_blogs" /></svg>
pl_icon_callback
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_callback.svg#pl_icon_callback" /></svg>
pl_icon_camera
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_camera.svg#pl_icon_camera" /></svg>
pl_icon_catalogue
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_catalogue.svg#pl_icon_catalogue" /></svg>
pl_icon_categories
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_categories.svg#pl_icon_categories" /></svg>
pl_icon_check
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_check.svg#pl_icon_check" /></svg>
pl_icon_clear
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_clear.svg#pl_icon_clear" /></svg>
pl_icon_close
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_close.svg#pl_icon_close" /></svg>
pl_icon_contact-mail
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_contact-mail.svg#pl_icon_contact-mail" /></svg>
pl_icon_copy
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_copy.svg#pl_icon_copy" /></svg>
pl_icon_critique
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_critique.svg#pl_icon_critique" /></svg>
pl_icon_cut-out
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_cut-out.svg#pl_icon_cut-out" /></svg>
pl_icon_delete
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_delete.svg#pl_icon_delete" /></svg>
pl_icon_device-switch
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_device-switch.svg#pl_icon_device-switch" /></svg>
pl_icon_dislike
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_dislike.svg#pl_icon_dislike" /></svg>
pl_icon_disposal
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_disposal.svg#pl_icon_disposal" /></svg>
pl_icon_downloads
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_downloads.svg#pl_icon_downloads" /></svg>
pl_icon_duration
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_duration.svg#pl_icon_duration" /></svg>
pl_icon_e-invoice
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_e-invoice.svg#pl_icon_e-invoice" /></svg>
pl_icon_edit
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_edit.svg#pl_icon_edit" /></svg>
pl_icon_email-verification-confirmed
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_email-verification-confirmed.svg#pl_icon_email-verification-confirmed" /></svg>
pl_icon_email-verification-confirmed-safe
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_email-verification-confirmed-safe.svg#pl_icon_email-verification-confirmed-safe" /></svg>
pl_icon_email-verification-sent
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_email-verification-sent.svg#pl_icon_email-verification-sent" /></svg>
pl_icon_email-verification-sent-safe
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_email-verification-sent-safe.svg#pl_icon_email-verification-sent-safe" /></svg>
pl_icon_error-article-image
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_error-article-image.svg#pl_icon_error-article-image" /></svg>
pl_icon_error-hint
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_error-hint.svg#pl_icon_error-hint" /></svg>
pl_icon_euro
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_euro.svg#pl_icon_euro" /></svg>
pl_icon_faq
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_faq.svg#pl_icon_faq" /></svg>
pl_icon_feedback
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_feedback.svg#pl_icon_feedback" /></svg>
pl_icon_filter
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_filter.svg#pl_icon_filter" /></svg>
pl_icon_flip
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_flip.svg#pl_icon_flip" /></svg>
pl_icon_fullscreen
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_fullscreen.svg#pl_icon_fullscreen" /></svg>
pl_icon_home
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_home.svg#pl_icon_home" /></svg>
pl_icon_info
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_info.svg#pl_icon_info" /></svg>
pl_icon_info-hint
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_info-hint.svg#pl_icon_info-hint" /></svg>
pl_icon_inplace-zoom
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_inplace-zoom.svg#pl_icon_inplace-zoom" /></svg>
pl_icon_leaving-page
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_leaving-page.svg#pl_icon_leaving-page" /></svg>
pl_icon_like
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_like.svg#pl_icon_like" /></svg>
pl_icon_like-fingers
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_like-fingers.svg#pl_icon_like-fingers" /></svg>
pl_icon_like-product
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_like-product.svg#pl_icon_like-product" /></svg>
pl_icon_list-view
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_list-view.svg#pl_icon_list-view" /></svg>
pl_icon_location
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_location.svg#pl_icon_location" /></svg>
pl_icon_mic
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_mic.svg#pl_icon_mic" /></svg>
pl_icon_minus
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_minus.svg#pl_icon_minus" /></svg>
pl_icon_nav
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_nav.svg#pl_icon_nav" /></svg>
pl_icon_newsletter-sign-up
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_newsletter-sign-up.svg#pl_icon_newsletter-sign-up" /></svg>
pl_icon_order
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_order.svg#pl_icon_order" /></svg>
pl_icon_order-cancelled
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_order-cancelled.svg#pl_icon_order-cancelled" /></svg>
pl_icon_order-delivered
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_order-delivered.svg#pl_icon_order-delivered" /></svg>
pl_icon_order-form
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_order-form.svg#pl_icon_order-form" /></svg>
pl_icon_order-misdirected
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_order-misdirected.svg#pl_icon_order-misdirected" /></svg>
pl_icon_order-on-road
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_order-on-road.svg#pl_icon_order-on-road" /></svg>
pl_icon_order-packed
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_order-packed.svg#pl_icon_order-packed" /></svg>
pl_icon_order-payment
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_order-payment.svg#pl_icon_order-payment" /></svg>
pl_icon_order-received
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_order-received.svg#pl_icon_order-received" /></svg>
pl_icon_order-recieved
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_order-recieved.svg#pl_icon_order-recieved" /></svg>
pl_icon_order-return
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_order-return.svg#pl_icon_order-return" /></svg>
pl_icon_order-shipped
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_order-shipped.svg#pl_icon_order-shipped" /></svg>
pl_icon_order-state-unknown
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_order-state-unknown.svg#pl_icon_order-state-unknown" /></svg>
pl_icon_order-stored
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_order-stored.svg#pl_icon_order-stored" /></svg>
pl_icon_otto-app
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_otto-app.svg#pl_icon_otto-app" /></svg>
pl_icon_pdf
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_pdf.svg#pl_icon_pdf" /></svg>
pl_icon_person
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_person.svg#pl_icon_person" /></svg>
pl_icon_person-access
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_person-access.svg#pl_icon_person-access" /></svg>
pl_icon_person-check
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_person-check.svg#pl_icon_person-check" /></svg>
pl_icon_person-female
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_person-female.svg#pl_icon_person-female" /></svg>
pl_icon_person-info
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_person-info.svg#pl_icon_person-info" /></svg>
pl_icon_person-male
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_person-male.svg#pl_icon_person-male" /></svg>
pl_icon_person-rating
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_person-rating.svg#pl_icon_person-rating" /></svg>
pl_icon_person-switch
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_person-switch.svg#pl_icon_person-switch" /></svg>
pl_icon_phone
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_phone.svg#pl_icon_phone" /></svg>
pl_icon_phone-permission
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_phone-permission.svg#pl_icon_phone-permission" /></svg>
pl_icon_pinch
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_pinch.svg#pl_icon_pinch" /></svg>
pl_icon_pinch-gesture
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_pinch-gesture.svg#pl_icon_pinch-gesture" /></svg>
pl_icon_play
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_play.svg#pl_icon_play" /></svg>
pl_icon_plus
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_plus.svg#pl_icon_plus" /></svg>
pl_icon_price-alert
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_price-alert.svg#pl_icon_price-alert" /></svg>
pl_icon_print
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_print.svg#pl_icon_print" /></svg>
pl_icon_qr-code
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_qr-code.svg#pl_icon_qr-code" /></svg>
pl_icon_question
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_question.svg#pl_icon_question" /></svg>
pl_icon_rating-empty
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_rating-empty.svg#pl_icon_rating-empty" /></svg>
pl_icon_rating-filled
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_rating-filled.svg#pl_icon_rating-filled" /></svg>
pl_icon_rating-half
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_rating-half.svg#pl_icon_rating-half" /></svg>
pl_icon_rating-order
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_rating-order.svg#pl_icon_rating-order" /></svg>
pl_icon_rating-payment
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_rating-payment.svg#pl_icon_rating-payment" /></svg>
pl_icon_sale
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_sale.svg#pl_icon_sale" /></svg>
pl_icon_search-enter
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_search-enter.svg#pl_icon_search-enter" /></svg>
pl_icon_service-info
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_service-info.svg#pl_icon_service-info" /></svg>
pl_icon_settings
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_settings.svg#pl_icon_settings" /></svg>
pl_icon_share
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_share.svg#pl_icon_share" /></svg>
pl_icon_share-ios
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_share-ios.svg#pl_icon_share-ios" /></svg>
pl_icon_smiley-angry
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_smiley-angry.svg#pl_icon_smiley-angry" /></svg>
pl_icon_smiley-happy
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_smiley-happy.svg#pl_icon_smiley-happy" /></svg>
pl_icon_smiley-negative
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_smiley-negative.svg#pl_icon_smiley-negative" /></svg>
pl_icon_smiley-neutral
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_smiley-neutral.svg#pl_icon_smiley-neutral" /></svg>
pl_icon_smiley-positive
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_smiley-positive.svg#pl_icon_smiley-positive" /></svg>
pl_icon_sms-info
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_sms-info.svg#pl_icon_sms-info" /></svg>
pl_icon_sort
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_sort.svg#pl_icon_sort" /></svg>
pl_icon_stationary
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_stationary.svg#pl_icon_stationary" /></svg>
pl_icon_success-hint
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_success-hint.svg#pl_icon_success-hint" /></svg>
pl_icon_sustainable-energy-efficient
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_sustainable-energy-efficient.svg#pl_icon_sustainable-energy-efficient" /></svg>
pl_icon_sustainable-production
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_sustainable-production.svg#pl_icon_sustainable-production" /></svg>
pl_icon_sustainable-recycling
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_sustainable-recycling.svg#pl_icon_sustainable-recycling" /></svg>
pl_icon_sustainable-resource
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_sustainable-resource.svg#pl_icon_sustainable-resource" /></svg>
pl_icon_swipe-gesture
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_swipe-gesture.svg#pl_icon_swipe-gesture" /></svg>
pl_icon_sync-device
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_sync-device.svg#pl_icon_sync-device" /></svg>
pl_icon_test-result
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_test-result.svg#pl_icon_test-result" /></svg>
pl_icon_trusted
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_trusted.svg#pl_icon_trusted" /></svg>
pl_icon_voucher
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_voucher.svg#pl_icon_voucher" /></svg>
pl_icon_warning
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_warning.svg#pl_icon_warning" /></svg>
pl_icon_wishlist
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_wishlist.svg#pl_icon_wishlist" /></svg>
pl_icon_wishlist-active
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_wishlist-active.svg#pl_icon_wishlist-active" /></svg>
pl_icon_zoom-in
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_zoom-in.svg#pl_icon_zoom-in" /></svg>
pl_icon_zoom-out
<svg class="pl_icon" role="img"><use xlink:href="/assets-static/icons/pl_icon_zoom-out.svg#pl_icon_zoom-out" /></svg>

Icons

Über die Icon-Font wird eine Reihe von Symbolen zur Verfügung gestellt, die bei entsprechend gesetzter Schriftart allein durch die Angabe eines entsprechenden Zeichens eingebunden werden kann. Der Vorteil an dieser Variante im Vergleich zum Einsatz von Grafikdateien ist, dass Icon-Fonts aus Vektoren bestehen und so ohne Qualitätsverluste auf jede beliebige Größe skaliert werden können.

Sofern vorhanden, bitte anstelle des Characters die entsprechende HTML-Entität für das Icon verwenden. Andernfalls könnte es in älteren Browsern zu Fehlern in der Darstellung führen. (Symbol wird nicht erkannt und mit einem Fragezeichen ersetzt, das dann wiederrum über die Icon-Font formatiert wird)

&#9899;

&#8264;

w

w

t

t

B

B

L

L

s

s

e

e

#

#

h

h

±

&plusmn;

&lArr;

&#9654;

m

m

z

z

b

b

Φ

&Phi;

g

g

Π

&Pi;

k

k

Ξ

&Xi;

=

=

n

n

Θ

&Theta;

&hearts;

*

*

/

/

o

o

+

+

-

-

p

p

?

?

i

i

!

!

&radic;

ο

&omicron;

&#8853;

&uarr;

&rarr;

&darr;

&empty;

<

&lt;

>

&gt;

^

^

v

v

x

x

X

X

&#8277;

&#10521;

&#8857;

l

l

E

E

»

&raquo;

c

&#99;

&#x2421;

&#59648;

&#59649;

&#59650;

&#59651;

&#59652;

&#59653;

&#59654;

&#59655;

&#59656;

&#59657;

&#59658;

&#59659;

&#59660;

&#59661;

&#59662;

&#59663;

&#59664;

&#59665;

&#59666;

&#59667;

&#59668;

&#59669;

&#59670;

&#59671;

&#59672;

&#59673;

&#59674;

&#59675;

&#59676;

&#59677;

&#59678;

&#59679;

&#59680;

&#xe921;

&#xe922;

&#xe923;

&#xe924;

&#xe925;

&#xe926;

&#xe927;

&#xe928;

&#xe929;

&#xe930;

&#xe931;

&#xe932;

&#xe933;

&#xe934;

&#xe935;

&#xe92a;

&#xe92b;

&#xe92c;

&#xe92d;

&#xe92e;

&#xe92f;

&#xe936;

⭐️ Margin

Die Margins stehen als Utility-Klassen (und auch SASS-Variablen) zur Verfügung.

In der folgenden Tabelle sind die Klassen für jede Ausprägung gelistet.

Margin Wert Klasse CSS Property
$pl_margin25 4px pl_m25 margin
pl_ml25 margin-left
pl_mr25 margin-right
pl_mt25 margin-top
pl_mb25 margin-bottom
pl_mx25 margin-left + margin-right
pl_my25 margin-bottom + margin-top
$pl_margin50 8px pl_m50 margin
pl_ml50 margin-left
pl_mr50 margin-right
pl_mt50 margin-top
pl_mb50 margin-bottom
pl_mx50 margin-left + margin-right
pl_my50 margin-bottom + margin-top
$pl_margin75 12px pl_m75 margin
pl_ml75 margin-left
pl_mr75 margin-right
pl_mt75 margin-top
pl_mb75 margin-bottom
pl_mx75 margin-left + margin-right
pl_my75 margin-bottom + margin-top
$pl_margin100 16px pl_m100 margin
pl_ml100 margin-left
pl_mr100 margin-right
pl_mt100 margin-top
pl_mb100 margin-bottom
pl_mx100 margin-left + margin-right
pl_my100 margin-bottom + margin-top
$pl_margin150 24px pl_m150 margin
pl_ml150 margin-left
pl_mr150 margin-right
pl_mt150 margin-top
pl_mb150 margin-bottom
pl_mx150 margin-left + margin-right
pl_my150 margin-bottom + margin-top
$pl_margin175 32px pl_m175 margin
pl_ml175 margin-left
pl_mr175 margin-right
pl_mt175 margin-top
pl_mb175 margin-bottom
pl_mx175 margin-left + margin-right
pl_my175 margin-bottom + margin-top
$pl_margin200 40px pl_m200 margin
pl_ml200 margin-left
pl_mr200 margin-right
pl_mt200 margin-top
pl_mb200 margin-bottom
pl_mx200 margin-left + margin-right
pl_my200 margin-bottom + margin-top
$pl_margin250 64px pl_m250 margin
pl_ml250 margin-left
pl_mr250 margin-right
pl_mt250 margin-top
pl_mb250 margin-bottom
pl_mx250 margin-left + margin-right
pl_my250 margin-bottom + margin-top
$pl_margin300 80px pl_m300 margin
pl_ml300 margin-left
pl_mr300 margin-right
pl_mt300 margin-top
pl_mb300 margin-bottom
pl_mx300 margin-left + margin-right
pl_my300 margin-bottom + margin-top
Maße Margin
4px
$pl_margin25
8px
$pl_margin50
12px
$pl_margin75
16px
$pl_margin100
24px
$pl_margin150
32px
$pl_margin175
40px
$pl_margin200
64px
$pl_margin250
80px
$pl_margin300

⭐️ Utility classes

.pl_full-bleed Reverts the outer margins and padding set by the current site frame
.gridContainer
via negative margins to the sides, thus enabling the developer to use the full width. This is useful if for example you want to provide your white cards with a grey background that spans all the way across. It works across all breakpoints and also reacts if there is a sidebar present by checking for the presence of the
.contentWithSidebar
CSS class.
.pl_full-bleed--with-padding Like
.pl_full-bleed
but adds the margins back as padding, so that content placed inside is aligned with the normal site-frame margins.
.mo-frame Class that is added to the
.gridContainer
element. It sets the background of the same to
$pl_color-grey25
and removes any margins. It is to be used to convert the site-frame to the new design system*.

*) The header and footer areas are being worked on and are not yet adjusted to the new design.

⭐️ Padding

Die Paddings stehen als Utility-Klassen (und auch SASS-Variablen) zur Verfügung.

In der folgenden Tabelle sind die Klassen für jede Ausprägung gelistet.

Padding Wert Klasse CSS Property
$pl_padding25 4px pl_p25 padding
pl_pl25 padding-left
pl_pr25 padding-right
pl_pt25 padding-top
pl_pb25 padding-bottom
pl_px25 padding-left + padding-right
pl_py25 padding-bottom + padding-top
$pl_padding50 8px pl_p50 padding
pl_pl50 padding-left
pl_pr50 padding-right
pl_pt50 padding-top
pl_pb50 padding-bottom
pl_px50 padding-left + padding-right
pl_py50 padding-bottom + padding-top
$pl_padding75 12px pl_p75 padding
pl_pl75 padding-left
pl_pr75 padding-right
pl_pt75 padding-top
pl_pb75 padding-bottom
pl_px75 padding-left + padding-right
pl_py75 padding-bottom + padding-top
$pl_padding100 16px pl_p100 padding
pl_pl100 padding-left
pl_pr100 padding-right
pl_pt100 padding-top
pl_pb100 padding-bottom
pl_px100 padding-left + padding-right
pl_py100 padding-bottom + padding-top
$pl_padding150 24px pl_p150 padding
pl_pl150 padding-left
pl_pr150 padding-right
pl_pt150 padding-top
pl_pb150 padding-bottom
pl_px150 padding-left + padding-right
pl_py150 padding-bottom + padding-top
$pl_padding175 32px pl_p175 padding
pl_pl175 padding-left
pl_pr175 padding-right
pl_pt175 padding-top
pl_pb175 padding-bottom
pl_px175 padding-left + padding-right
pl_py175 padding-bottom + padding-top
$pl_padding200 40px pl_p200 padding
pl_pl200 padding-left
pl_pr200 padding-right
pl_pt200 padding-top
pl_pb200 padding-bottom
pl_px200 padding-left + padding-right
pl_py200 padding-bottom + padding-top
$pl_padding250 64px pl_p250 padding
pl_pl250 padding-left
pl_pr250 padding-right
pl_pt250 padding-top
pl_pb250 padding-bottom
pl_px250 padding-left + padding-right
pl_py250 padding-bottom + padding-top
$pl_padding300 80px pl_p300 padding
pl_pl300 padding-left
pl_pr300 padding-right
pl_pt300 padding-top
pl_pb300 padding-bottom
pl_px300 padding-left + padding-right
pl_py300 padding-bottom + padding-top
Maße Padding
pl_p25
[Content Placeholder]
$pl_padding25
pl_p50
[Content Placeholder]
$pl_padding50
pl_p75
[Content Placeholder]
$pl_padding75
pl_p100
[Content Placeholder]
$pl_padding100
pl_p150
[Content Placeholder]
$pl_padding150
pl_p175
[Content Placeholder]
$pl_padding175
pl_p200
[Content Placeholder]
$pl_padding200
pl_p250
[Content Placeholder]
$pl_padding250
pl_p300
[Content Placeholder]
$pl_padding300

⭐️ Border Radius

Die Border Radien stehen als Utility-Klassen (und auch SASS-Variablen) zur Verfügung.

Border Radius Wert Klasse CSS Property
$pl_border-radius10 2px pl_radius10 border-radius
$pl_border-radius25 4px pl_radius25 border-radius
$pl_border-radius50 8px pl_radius50 border-radius
$pl_border-radius100 16px pl_radius100 border-radius

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

Technische Hinweise

Für dieses Pattern sind keine technischen Hinweise vorhanden!