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.
Hinweisboxen können optional eine Überschrift 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.
Design
Typografie
Spalte 1 enthält die Ziffern aus der Abbildung zu den nach Elementen gruppierten Regeln in Spalten 2 bis 4.
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--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>
Hinweistyp Erfolg
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--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
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--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. 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 Fehler
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--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
Dies ist der Beginn eines Textes. Wenn ich groß bin, will ich nicht in Vergessenheit geraten.
Optionale Überschrift:
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--inline"> <divclass="toast-body"> <spanclass="toast__icon ds-icon-info-circle"aria-hidden="true"></span> <divclass="toast__text"> <div> <h5class="toast__headline">Optionale Überschrift: </h5> <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>
Text Highlight
Dies ist der Beginn eines Textes. Wenn ich groß bin, will ich nicht in Vergessenheit geraten.
Ich weiß, dass ich nie die Chance haben werde, in einer Zeitung zu erscheinen. Aber bin ich deshalb weniger wichtig?
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 weiß, dass ich nie die Chance haben werde, in einer Zeitung zu erscheinen. Aber bin ich deshalb weniger wichtig?</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.
