Frontend Demo Page

Seitengliederung

Seiten können durch Divider oder unterschiedliche Hintergrundfarben einfach gegliedert werden. Welche Gliederung Sinn ergibt, hängt von der Menge und Struktur des Inhalts ab.

Einfache Gliederung auf Primary Background:

• Der Inhalt wird auf Primary Background platziert.
• Der Primary Background wird standardmäßig für einfachen Inhalt genutzt.
• Auf langen Seiten können Divider als Gliederungselement eingesetzt werden. Sie dürfen aber nicht in Kombination mit Tabellen auf einer Seite genutzt werden.

Starke Gliederung durch farblich unterschiedliche Flächen

Dieses Designprinzip wird mit der Komponente Card umgesetzt.

• Der Inhalt kann sowohl auf der Card wie auch auf dem (grauen) Secondary Background platziert werden. Die Zuordnung muss sinnhaft und logisch sein.
• Wird auf langen Seiten mit komplexem Inhalt eingesetzt z. B., wenn mehrere Tabellen oder Formulare aufeinander folgen.

Color Picker

Um die richtigen Farbvariablen zu wählen, kann der Bosch Color Picker genutzt werden.

Bosch Color Picker

Benachrichtigungstypen

Feedback kann über Benachrichtigungen mit drei verschiedenen Prioritäten gegeben werden:

Niedrige Priorität:

Toast

• Der Toast wird temporär angezeigt und wird selbständig und ohne Nutzerinteraktion ausgeblendet.
• Enthält kein Close Button.
• Der Inhalt kann z. B. eine Anzeige, dass eine Interaktion erfolgreich durchgeführt wurde (z. B. das Speichern von Daten), sein.

Mittlere Priorität:

Notification

• Die Notification zeigt an, ob die Aktion des Nutzers erfolgreich war.
• Können weiterführende Informationen über Text Links abbilden.
• Kann einen Close Button enthalten.
• Der Inhalt kann z. B. ein Hinweis sein, dass eine Eingabe falsch oder korrekt war.

Hohe Priorität:

Dialog

• Der Dialog erfordert eine Nutzereingabe mittels Buttons.
• Kann im Nonmodal-Dialog einen Close Button enthalten.
• Der Inhalt kann z. B. die Durchführung einer Interaktion durch Bestätigung auslösen (z. B. Delete).

Digitale Typografie

Im digitalen Bereich stehen die Schriften "Bosch Sans Regular" und "Bosch Sans Bold" zur Verfügung. Beide Schnitte sollen vorwiegend Schwarz auf Weiß gesetzt werden. Lediglich funktionale Elemente, wie z.B. URLs/Hyperlinks, oder punktuelle Highlights, wie z.B. Zitate, können in Bosch Blau gesetzt werden.
Bosch Sans ist für sämtliche lateinisch-basierten Alphabete verfügbar und umfasst westeuropäische Sprachen, zentraleuropäische Sprachen, Baltisch, Türkisch, Griechisch und Kyrillisch.

Textkategorie	CSS Klasse	Anwendung	Schriftschnitte	Schriftgröße	Zeilenabstand
Text S	text-bosch-s text-xs	Bildunterschriften, kurze kleine Absätze, Labels	Regular	0.75rem	1.5
Text M	text-bosch-m text-base	lange und kurze Texte, Labels, Meldungen	Regular	1rem	1.5
Text L	text-bosch-l text-xl	Überschriften, Hervorhebungen, lange Texte	Regular	1.25rem	1.5
Text XL	text-bosch-xl text-2xl	Überschriften	Regular	1.5rem	1.4
Text 2XL	text-bosch-2xl	Überschriften, Hervorhebungen	Regular	2rem	1.35
Text 3XL	text-bosch-3xl	Überschriften, Hervorhebungen	Regular	2.5rem	1.3
Text 4XL	text-bosch-4xl	Überschriften, Hervorhebungen	Regular	3rem	1.25
Text 5XL	text-bosch-5xl	Überschriften, Hervorhebungen	Regular	4rem	1.2
Text 6XL	text-bosch-6xl	Überschriften, Hervorhebungen	Regular	5rem	1.15

Font Styles sind in diesen verschiedenen Varianten möglich

Style Suffix	CSS Klasse	Eigenschaft	Beschreibung
Regular	font-normal	regular / 400	Standard
Regular Unterstrichen	font-normal underline	regular / 400 underlined	Regular und Unterstrichen
Regular Durchgestrichen	font-normal line-through	regular / 400 strikethrough	Regular und Durchgestrichen
Bold	font-bold	bold / 700	Fett
Bold Unterstrichen	font-bold underline	bold / 700 underlined	Bold und Unterstrichen
Bold Durchgestrichen	font-bold line-through	bold / 700 strikethrough	Bold und Durchgestrichen
Emphasis	font-bold	bold / 700	Dieser Style ist eine spezielle Font-Style-Gruppe zur semantischen Hervorhebung von Texten.
Emphasis Unterstrichen	font-bold underline	bold / 700 underlined	Emphasis und Unterstrichen
Emphasis Durchgestrichen	font-bold line-through	bold / 700 strikethrough	Emphasis und Durchgestrichen

Icons und Typographie

Icons die in Kombination mit Text auftreten sollen an die Typografie angepasst sein. Ihre Größe und der Abstand zum text sollen sich harmonisch angepasst sein. Icons dürfen links und rechts vom Text plaziert werden.

Text-Style	Icongröße	Iconabstand
Text S	1.125rem	0.38rem
Text M	1.5rem	0.5rem
Text L	1.875rem	0.63rem
Text XL	2.1rem	0.7rem
Text 2XL	2.7rem	0.9rem
Text 3XL	3.25rem	1.08rem
Text 4XL	3.75rem	1.25rem
Text 5XL	4.8rem	1.6rem
Text 6XL	5.75rem	1.92rem