Changelog

Deprecated This Design System is deprecated!
To ensure that all user interface elements remain cohesive and align with the OTTO front-end and design guidelines, and to enable consistency and efficiency in development, we decided to renew our Design System. Thus we are happy to introduce OTTO Components! Currently, we are in a transition phase. This means that not all pattern have a substitute in OTTO Components yet. Nevertheless, we recommend that you use OTTO components whenever possible. This pattern-library will not be updated anymore and will be shut down in the future.

28.11.2022 Carousel & Cinema Mode

With this release, the Carousel has been adapted, now providing both a Carousel and Cinema Mode.
You can find all relevant information here!

17.10.2022 Release of the new Chip Variations

With this release, new chip variations (pl_chip100, pl_chip200) have been added. Chips are available in two colors and can contain an icon or image next to the label. The chip is an interactive element offering all essential states e.g. selected, hover, active, disabled and focused. Selectable chips offer the option to be "checked if selected". In this case a checkmark is shown when the chip is selected. Chips can also be "removable".
When this is activated, a "close" icon is added to the left side of the label.
Various patterns are updated, documentations adjusted and bugs fixed across certain browsers.
You can find all relevant information here!

28.07.2022 Separation of Cinema and Carousel

With this release, the cinema and carousel have been separated and added to their own tab in the Design System.

25.04.2022 Release of the new Media Object Card Variations

With this release, new Media Object Card Variations (100, 75, 50, 25) have been added.
Various patterns are updated, documentations adjusted and bugs fixed across certain browsers.
You can find all relevant information here!

28.03.2022 Release of the new Tooltip

With this release, the new Tooltip celebrates its official release.
You can find all relevant information here!

23.12.2021 Breakpoint Utilities for pl_headline & pl_tag

With this release, CSS utility classes are added to allow breakpoint-dependent control of headline and tag sizes.
Various patterns are updated, documentations adjusted and bugs fixed across certain browsers.

16.12.2021 Bugfix for iOS Zoom Bug with pl_input

This update fixes the 'bug' on iOS that zoomed into the pl_input element when being used. The font-size within pl_input, pl_dropdown and pl_textarea has been increased to 16px.
Various patterns are updated, documentations adjusted and bugs fixed across certain browsers.

18.11.2021 Release of Sliding Carousel and Slider

This update marks the official release of the sliding carousel and the slider for the use in a productive environment.
Various patterns are updated, documentations adjusted and bugs fixed across certain browsers.

21.10.2021 Sheet Release

This update marks the official release of the sheet for use in the productive environment.
Various patterns are updated, documentations adjusted and bugs fixed across certain browsers.
  • Sheet is now live and released. Please note the documentation!

25.08.2021 Harmonization Part 7

This update mainly contains additions to existing harmonized patterns.
Various patterns are updated, documentations adjusted and bugs fixed across certain browsers.
  • Tooltip supports the tracking of hover events.
  • Disabled states are added to all Formular Material inputs
    I am a note.
  • Input field with placeholder input added.
  • Grid Pattern 🚀 added.

03.08.2021 Harmonization Part 6

This update mainly contains additions to existing harmonized patterns.
Various patterns are updated, documentations adjusted and bugs fixed across certain browsers.

06.07.2021 Harmonization Part 5

This update mainly contains additions to existing harmonized patterns.
Various patterns are updated, documentations adjusted and bugs fixed across certain browsers.
  • Table View with additional options (without separator, expander & accordion)
  • Cards added.
  • Expander added.
    Label
    EcoSilence Drive Abgesehen von seiner hohen Leistung ist der EcoSilence Drive in jeder Beziehung äußerst zurückhaltend. Der bürstenlose Motor reduziert Reibungsgeräusche optimal und läuft daher besonders leise. Sie können sogar Wäsche waschen, wenn Ihr Baby schläft oder Sie mit Ihrer Familie gemütlich zu Abend essen. Er ist besonders energieeffizient, was sich gerade bei vielen Wäschen lohnt. Schön, dass die intelligente Technologie auch für eine besonders hohe Lebensdauer sorgt.
    AllergiePlus AllergiePlus ist das ideale Programm für ein hygienisches Waschergebnis. Bestens geeignet für alle direkt auf der Haut getragenen Kleidungsstücke, und zwar insbesondere für Menschen mit empfindlicher, leicht gereizter Haut. Ein speziell gestalteter Waschzyklus bei definierter Wassertemperatur, höherem Wasserstand und zusätzlichen Spülgängen reduziert allergene Rückstände auf ein Minimum. Das heißt: weniger Pollen, Partikel, Tierhaare und Staubmilben. Für höchste hygienische Ansprüche wählen Sie mindestens 60 °C Waschtemperatur.
  • Accordion added.
    Lorem ipsum dolor sit amet
    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
    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.
  • Block added.
  • Focused Dialog updated.
    Focused Dialog

21.06.2021 Harmonization Part 4

This update mainly contains additions to existing harmonized patterns.
Various patterns are updated, documentations adjusted and bugs fixed across certain browsers.

10.06.2021 Harmonization Part 3

This update mainly contains additions to existing harmonized patterns.
Various patterns are updated, documentations adjusted and bugs fixed across certain browsers.

19.05.2021 Harmonization Part 2

For the course of harmonization additional new patterns were designed.
New CSS-Classes und SCSS-Variables start with the prefix "pl_".

27.04.2021 Harmonization

For the course of harmonization additional new patterns were designed.
All new CSS-Classes und SCSS-Variables start with the prefix "pl_".
The OTTO Design System is a modular system with which the front ends of digital products are developed at OTTO. The design system consists of fragments, components and modules.
Impressum © OTTO