Hinweisboxen sind Texte mit einem besonderen Styling, um Aufmerksamkeit auf sich zu ziehen. Sie können zur Hervorhebung wichtiger Inhalte fast überall eingesetzt werden, wo Fließtexte stehen können, inklusive Marginalspalten.
Bei Inhalten von hoher Wichtigkeit, wo eine Kommunikation an die Nutzenden sichergestellt werden muss, sind Hinweisboxen das bessere Muster im Vergleich zu Tooltips, die eine zusätzliche Interaktion benötigen, um wahrgenommen zu werden.
Hinweisboxen können optional einen Hinweis in hervorgehobenem Schriftschnitt und ein Symbol enthalten und bestehen darüberhinaus ausschließlich aus Textelementen.
Hinweisboxen als rein statischer Content sind ungeeignet für Formularelemente – wenn Nutzereingaben erwartet werden, dann soll hierfür ein herkömmliches Formular oder ein Modaler Dialog benutzt werden.
Das Design System hält verschiedene Varianten vor, die im Design-Tab dokumentiert sind.
Design
Typografie
Spalte 1 enthält die Ziffern aus der Abbildung zu den nach Elementen gruppierten Regeln in Spalten 2 bis 4.
<divclass="toast show toast--inline"> <divclass="toast-body"> <spanclass="toast__icon ds-icon-info-circle"aria-hidden="true"></span> <divclass="toast__text"> <div> <p>Ich bin nur eine kleine Hinweisbox.</p> </div> </div> </div> </div>
Hinweistyp Erfolg
Ich bin nur eine kleine Hinweisbox. Wenn ich groß bin, will ich Ulysses von James Joyce werden. Aber jetzt lohnt es sich noch nicht, mich weiterzulesen.
<divclass="toast show toast--success toast--inline"> <divclass="toast-body"> <spanclass="toast__icon ds-icon-check-circle"aria-hidden="true"></span> <divclass="toast__text"> <div> <p>Ich bin nur eine kleine Hinweisbox. Wenn ich groß bin, will ich Ulysses von James Joyce werden. Aber jetzt lohnt es sich noch nicht, mich weiterzulesen.</p> </div> </div> </div> </div>
Hinweistyp Warnung
Ich bin nur eine kleine Hinweisbox.
<divclass="toast show toast--warning toast--inline"> <divclass="toast-body"> <spanclass="toast__icon ds-icon-alert-circle"aria-hidden="true"></span> <divclass="toast__text"> <div> <p>Ich bin nur eine kleine Hinweisbox.</p> </div> </div> </div> </div>
Hinweistyp Fehler
Ich bin nur eine kleine Hinweisbox. Wenn ich groß bin, will ich Ulysses von James Joyce werden. Aber jetzt lohnt es sich noch nicht, mich weiterzulesen.
<divclass="toast show toast--error toast--inline"> <divclass="toast-body"> <spanclass="toast__icon ds-icon-error-circle"aria-hidden="true"></span> <divclass="toast__text"> <div> <p>Ich bin nur eine kleine Hinweisbox. Wenn ich groß bin, will ich Ulysses von James Joyce werden. Aber jetzt lohnt es sich noch nicht, mich weiterzulesen.</p> </div> </div> </div> </div>
Mit Überschrift
Optionale Überschrift:
Ich bin nur eine kleine Hinweisbox.
<divclass="toast show toast--inline"> <divclass="toast-body"> <spanclass="toast__icon ds-icon-info-circle"aria-hidden="true"></span> <divclass="toast__text"> <div> <strongclass="toast__headline">Optionale Überschrift: </strong> <p>Ich bin nur eine kleine Hinweisbox.</p> </div> </div> </div> </div>
Text Highlight
Dies ist der Beginn eines Textes. Wenn ich groß bin, will ich nicht in Vergessenheit geraten.
Ich bin nur eine kleine Hinweisbox. Wenn ich groß bin, will ich Ulysses von James Joyce werden. Aber jetzt lohnt es sich noch nicht, mich weiterzulesen.
Und wenn ich bisher gelesen wurde, ist das bereits ein großartiger Achtungserfolg.
<divclass="toast show toast--text-highlight toast--inline"> <divclass="toast-body"> <divclass="toast__text"> <div> <p>Ich bin nur eine kleine Hinweisbox. Wenn ich groß bin, will ich Ulysses von James Joyce werden. Aber jetzt lohnt es sich noch nicht, mich weiterzulesen.</p> </div> </div> </div> </div>
Hinweisbox mit im Layout begrenzter Breite
Ich bin nur eine kleine Hinweisbox. Wenn ich groß bin, will ich Ulysses von James Joyce werden. Aber jetzt lohnt es sich noch nicht, mich weiterzulesen.
<divclass="max-w-lg"> <divclass="toast show toast--inline"> <divclass="toast-body"> <spanclass="toast__icon ds-icon-info-circle"aria-hidden="true"></span> <divclass="toast__text"> <div> <p>Ich bin nur eine kleine Hinweisbox. Wenn ich groß bin, will ich Ulysses von James Joyce werden. Aber jetzt lohnt es sich noch nicht, mich weiterzulesen.</p> </div> </div> </div> </div>
Der Schriftgrad kann Browser- oder Systemseitig um bis zu 200 % vergrößert werden, ohne dass Informationen verloren gehen. Bis zu 400 % müssen Inhalte so umbrechen, dass sie ohne horizontales Scrollen verfügbar sind.
