Gliederung

Linie

Das universell einsetzbare Linien-Pattern dient der vertikalen Abgrenzung von Content-Elementen. Es existiert in zwei Größen, die die Stärke der Linie bestimmen.

line200


line100


⭐️ Expander

Der pl_expander wird genutzt um innerhalb einer pl_table-view ausfahrbaren Content zu ermöglichen.

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.
SpeedPerfect An manchen Tagen muss es einfach schnell gehen. Mit SpeedPerfect können Sie Ihre Waschzeit um bis zu 65%* reduzieren, bei gleichbleibender Waschleistung. Es kann in Kombination mit den meisten Programmen, allen Ladungen und Textilien verwendet werden. Wenn Sie beispielsweise das Programm Pflegeleicht in Kombination mit SpeedPerfect auswählen, können Sie in nur 46 Minuten bis zu 4 Kilogramm Mixbeladung gründlich waschen. *Vergleich zwischen Programm Pflegeleicht 40 °C und Programm Pflegeleicht 40 °C in Kombination mit Option SpeedPerfect.

Expander

Mit Hilfe des Expander-Patterns können Klappelemente realisiert werden. Bestandteil des Patterns sind lediglich die abgebildeten Schaltflächen, die als Interaktionselement dienen. Der Expander steht in zwei Größen sowie drei Ordnungen zur Verfügung. Zusätzlich kann die horizontale Ausrichtung des Buttons auf der Schaltfläche variiert werden.

expander150

1. Ordnung

2. Ordnung

3. Ordnung

expander100

1. Ordnung

2. Ordnung

3. Ordnung

⭐️ Text-Expander

Der Text-Expander kann dazu eingesetzt werden, lange Texte initial nicht in ihrer vollen Länge darzustellen, um für eine bessere Übersichtlichkeit auf der Seite zu sorgen. Über einen Link hat der Nutzer dann die Möglichkeit, den Inhalt aus- und einzuklappen. Dieser Link ist, inklusive der Funktionalität, Bestandteil des Patterns.

mit Verlauf

Beim Laden ausgeklappt:

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.

SpeedPerfect
An manchen Tagen muss es einfach schnell gehen. Mit SpeedPerfect können Sie Ihre Waschzeit um bis zu 65%* reduzieren, bei gleichbleibender Waschleistung. Es kann in Kombination mit den meisten Programmen, allen Ladungen und Textilien verwendet werden. Wenn Sie beispielsweise das Programm Pflegeleicht in Kombination mit SpeedPerfect auswählen, können Sie in nur 46 Minuten bis zu 4 Kilogramm Mixbeladung gründlich waschen. *Vergleich zwischen Programm Pflegeleicht 40 °C und Programm Pflegeleicht 40 °C in Kombination mit Option SpeedPerfect.


Beim Laden eingeklappt:

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.

SpeedPerfect
An manchen Tagen muss es einfach schnell gehen. Mit SpeedPerfect können Sie Ihre Waschzeit um bis zu 65%* reduzieren, bei gleichbleibender Waschleistung. Es kann in Kombination mit den meisten Programmen, allen Ladungen und Textilien verwendet werden. Wenn Sie beispielsweise das Programm Pflegeleicht in Kombination mit SpeedPerfect auswählen, können Sie in nur 46 Minuten bis zu 4 Kilogramm Mixbeladung gründlich waschen. *Vergleich zwischen Programm Pflegeleicht 40 °C und Programm Pflegeleicht 40 °C in Kombination mit Option SpeedPerfect.

VarioTrommel
Ihre Lieblingsstücke oder besonders empfindliche Kleidung können durch häufiges Waschen beschädigt werden. Die einzigartige, patentierte VarioTrommel wäscht jede Art von Kleidung sanft und effizient; das Wasser wird gleichmäßig verteilt, ohne Ihre Lieblingsstücke zu dehnen, zu knittern oder zu beschädigen. Je nach ausgewähltem Waschprogramm befördern die tropfenförmige Trommeloberflächenstruktur und die asymmetrischen Mitnehmer Ihre Wäsche schonend zur Mitte hin. Dies bewirkt nicht nur eine intensive Reinigung von stärker verschmutzten Teilen, sondern sorgt auch für eine schnellere und gründlichere Reinigung der kompletten Waschladung. Gönnen Sie Ihrer Kleidung eine professionelle Qualitätsreinigung!

ActiveWater Plus
Dank ActiveWater Plus müssen Sie sich keine Gedanken um den effizienten Einsatz von Energie und Wasser machen. Die stufenlose Mengenautomatik erkennt mit ihren intelligenten Sensoren die Textilart und die jeweilige Beladungsmenge und bestimmt präzise die tatsächlich erforderliche Wassermenge. So werden die Umwelt und Ihr Geldbeutel auf intelligente Art geschont.


Mit wenig Content (Mehr Anzeigen wird ausgeblendet):

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.


Mit selbst gesetzter Höhe:

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.

Text-Expander

Der Text-Expander kann dazu eingesetzt werden, lange Texte initial nicht in ihrer vollen Länge darzustellen, um für eine bessere Übersichtlichkeit auf der Seite zu sorgen. Über einen Link hat der Nutzer dann die Möglichkeit, den Inhalt aus- und einzuklappen. Dieser Link ist, inklusive der Funktionalität, Bestandteil des Patterns.

Optional kann ein Transparenzverlauf aktiviert werden, der für ein weiches Auslaufen des Textes sorgt.

textExpander100

ohne Verlauf

Mit der WAE282V7 präsentiert BOSCH eine leistungsstarke Waschmaschine. Ausgezeichnete Werte im Hinblick auf den Energieverbrauch liefert dieses Modell mit der Energieeffizienzklasse A+++. Gerade Haushalte mit drei Personen sind mit dem Fassungsvermögen von 7 kg der WAE282V7 Waschmaschine bestens ausgestattet. Im Schleudergang bringt es die Waschmaschine auf 1400 Umdrehungen pro Minute. Zusätzlich bietet das Gerät unter anderem das Top-Feature AquaStop: Sollte es zu einem Defekt kommen, wird die Wasserzufuhr umgehend unterbrochen, um Schäden zu vermeiden. VarioPerfect sorgt für eine Zeitersparnis von bis zu 65% oder für eine Energieersparnis von bis zu 50% - ganz einfach durch zuschaltbare Programmoptionen. Und wenn es einmal besonders schnell gehen soll: Dank Schnellwaschfunktion wird die Wäsche sogar in 15 Minuten wieder sauber. Die Maße der Waschmaschine betragen 60 cm x 84,8 cm x 59 cm (BxHxT).

mit Verlauf

Mit der WAE282V7 präsentiert BOSCH eine leistungsstarke Waschmaschine. Ausgezeichnete Werte im Hinblick auf den Energieverbrauch liefert dieses Modell mit der Energieeffizienzklasse A+++. Gerade Haushalte mit drei Personen sind mit dem Fassungsvermögen von 7 kg der WAE282V7 Waschmaschine bestens ausgestattet. Im Schleudergang bringt es die Waschmaschine auf 1400 Umdrehungen pro Minute. Zusätzlich bietet das Gerät unter anderem das Top-Feature AquaStop: Sollte es zu einem Defekt kommen, wird die Wasserzufuhr umgehend unterbrochen, um Schäden zu vermeiden. VarioPerfect sorgt für eine Zeitersparnis von bis zu 65% oder für eine Energieersparnis von bis zu 50% - ganz einfach durch zuschaltbare Programmoptionen. Und wenn es einmal besonders schnell gehen soll: Dank Schnellwaschfunktion wird die Wäsche sogar in 15 Minuten wieder sauber. Die Maße der Waschmaschine betragen 60 cm x 84,8 cm x 59 cm (BxHxT).

⭐️ Accordion

Das Accordion ist eine Kombination mehrerer Klappelemente. Es besteht sowohl aus den Schaltflächen als auch aus den Container-Elementen für die Inhalte.

Die Funktion zum Aus- und Einklappen einzelner Elemente ist ebenfalls Bestandteil des Patterns. Welche Elemente initial aus- und welche eingeklappt dargestellt werden sollen, kann für jedes Element separat eingestellt werden.

Ein Accordion mit nur einem einzigen Ausklappelement ist zu vermeiden, da sonst die Funktion vom Nutzer nicht eindeutig erkannt werden würde.

WICHTIG: Das pl_accordion-Pattern darf ausschließlich innerhalb eines Table Views benutzt werden; nicht eigenständig! Bitte auf das Code-Beispiel achten. Das SVG innerhalb des Headers gehört ebenso zum Pattern dazu.

Empty Variant

Label
[Content Placeholder]
Label
[Content Placeholder]
Label
[Content Placeholder]

With Example Content

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

Akkordeon

Das Akkordeon ist eine Kombination mehrerer Klappelemente. Es steht in zwei Größen und drei Ordnungen zur Verfügung und besteht sowohl aus den Schaltflächen als auch aus den Container-Elementen für die Inhalte.

Die Funktion zum Aus- und Einklappen einzelner Elemente ist ebenfalls Bestandteil des Patterns. Welche Elemente initial aus- und welche eingeklappt dargestellt werden sollen, kann für jedes Element separat eingestellt werden.

Ein Akkordeon darf den gesamten Content einer Seite beinhalten. Ein Akkordeon mit nur einem einzigen Ausklappelement ist zu vermeiden, da sonst die Funktion vom Nutzer nicht eindeutig erkannt werden würde.

accordion150

1. Ordnung

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.

2. Ordnung

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.

3. Ordnung

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.

accordion100

1. Ordnung

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.

2. Ordnung

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.

3. Ordnung

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.

⭐️ Block

Blocks sind strukturgebende Elemente. Sie verfügen über vorgegebene Innenabstände. Sollen Inhalte über die gesamte Breite gehen kann pl_block--full-bleed als CSS Klasse verwendet werden. Werden mehrere Blocks neben- oder übereinander verwendet so haben sie einen Abstand von 4px zueinander zu wahren. Dies ist durch den Anwender sicherzustellen.

Block

Block full-bleed

Block with no padding

⭐️ Grid Layout

We have 2 grid systems, that are nested into each other. The first grid system contains the lanes to align the Blocks - we call it lane grid. The second grid can be placed inside the lanes to align the content and Cards - we call it content grid.

Usage



Lane grid

The lanes can be placed on the 12-column lane grid, eg. 3 - 9 | 4 - 8 | 3 - 6 - 3. On breakpoints S (360px) & M (448px), there can only be one lane spanning all 12 columns.

Content grid

The content grid helps to align components within the lanes. It is optional.

How to use the grid on desktop

Step 1: We have an empty artboard with grey background.
Step 2: We place the lane grid.
Step 3: We place the blocks in the lane grid.
Step 4: We place the content grid on the col-9 lane.
Step 5: We place cards in the content grid.
Step 6: We place content in the content grid.


How to use the grid on mobile

Step 1: We have an empty artboard with grey background.
Step 2: We place the lane grid.
Step 3: We place the blocks in the lane grid.
Step 4: We place the content grid on the col-9 lane.
Step 5: We place cards in the content grid.
Step 6: We place content in the content grid.


Anatomy



Lane grid.



Content grid.


  1. column
  2. gutter
  3. margin


Specifications





Lane grid

Columns: 12
Gutter: 4px
Margin: 0px
Width: 100%
Max-width: 1104px





Content grid

Columns: 12
Gutter: 16px
Margin: 16px
Width: 100%

Kategorieeinstiegsseite

Header
Content
Content
Content
Footer

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

Technische Hinweise

Für dieses Pattern sind keine technischen Hinweise vorhanden!