Einfache Hinweise
Standard
Dies ist ein Standardbaustein
<div class="note note--default">
<h4 class="note-title">Standard</h4>
<p>Dies ist ein Standardbaustein</p>
</div>
Informationen
Dies ist ein Informationsbaustein.
<div class="note note--info">
<h4 class="note-title">Informationen</h4>
<p>Dies ist ein Informationsbaustein.</p>
</div>
Warnung
Dies ist ein Warnhinweisbaustein.
<div class="note note--warning">
<h4 class="note-title">Warnung</h4>
<p>Dies ist ein Warnhinweisbaustein.</p>
</div>
Erfolg
Dies ist ein Erfolgsmeldungsbaustein.
<div class="note note--success">
<h4 class="note-title">Erfolg</h4>
<p>Dies ist ein Erfolgsmeldungsbaustein.
</p>
</div>
Gefahr
Dies ist ein Gefahrenhinweisbaustein.
<div class="note note--danger">
<h4 class="note-title">Gefahr</h4>
<p>Dies ist ein Gefahrenhinweisbaustein.</p>
</div>
Standard-Callout-Baustein
Dies ist ein Callout.
Ich bin ein graues Callout!
<div class="callout">
<h4 class="callout__title">Dies ist ein Callout.</h4>
<p>Ich bin ein graues Callout!
</p>
</div>
Dies ist ein Callout.
Ich bin ein graues Callout!
<div class="callout callout--dashed">
<h4 class="callout__title">Dies ist ein Callout.</h4>
<p>Ich bin ein graues Callout!
</p>
</div>
Transparent callout
Dies ist ein transparentes Callout.
Ich bin ein transparentes Callout!
<div class="callout callout--transparent">
<h4 class="callout__title">Dies ist ein transparentes Callout.
</h4>
<p>Ich bin ein transparentes Callout!
</p>
</div>
Mit gestricheltem Rahmen:
Dies ist ein Callout.
Ich bin ein transparentes Callout!
<div class="callout callout--transparent callout--dashed">
<h4 class="callout__title">Dies ist ein Callout.</h4>
<p>Ich bin ein transparentes Callout!
</p>
</div>
Erfolgsmeldungs-Callout
Dies ist ein Erfolgsmeldungs-Callout.
Ich bin ein Erfolgsmeldungs-Callout!
<div class="callout callout--success">
<h4 class="callout__title">Dies ist ein Erfolgsmeldungs-Callout.
</h4>
<p>Ich bin ein Erfolgsmeldungs-Callout!</p>
</div>
Dies ist ein Erfolgsmeldungs-Callout.
Ich bin ein Erfolgsmeldungs-Callout!
<div class="callout callout--success callout--dashed">
<h4 class="callout__title">Dies ist ein Erfolgsmeldungs-Callout.
</h4>
<p>Ich bin ein Erfolgsmeldungs-Callout!</p>
</div>
Info-Callout
Dies ist ein Info-Callout.
Ich bin ein neutrales Info-Callout!
<div class="callout callout--info">
<h4 class="callout__title">Dies ist ein Info-Callout.</h4>
<p>Ich bin ein neutrales Info-Callout!</p>
</div>
Dies ist ein Info-Callout.
Ich bin ein neutrales Info-Callout!
<div class="callout callout--info callout--dashed">
<h4 class="callout__title">Dies ist ein Info-Callout.</h4>
<p>Ich bin ein neutrales Info-Callout!</p>
</div>
Warning-callout
Dies ist ein Warnhinweis-Callout.
Und jetzt werde ich Ihnen etwas sehr Wichtiges mitteilen! Achten Sie auf mich!
<div class="callout callout--warning">
<h4 class="callout__title">Dies ist ein Warnhinweis-Callout.</h4>
<p>Und jetzt werde ich Ihnen etwas sehr Wichtiges mitteilen! Achten Sie auf mich!</p>
</div>
Dies ist ein Warnhinweis-Callout.
Ich bin ein Warnhinweis-Callout mit gestricheltem Rahmen!
<div class="callout callout--warning callout--dashed">
<h4 class="callout__title">Dies ist ein Warnhinweis-Callout.</h4>
<p>Ich bin ein Warnhinweis-Callout mit gestricheltem Rahmen!
</p>
</div>
Sicherheitshinweis-Callout
Dies ist ein Sicherheitshinweis-Callout.
Und hier sind ein paar überaus wichtige Informationen, die Sie unbedingt wissen müssen.
<div class="callout callout--danger">
<h4 class="callout__title">Dies ist ein Sicherheitshinweis-Callout.
</h4>
<p>Und hier sind ein paar überaus wichtige Informationen, die Sie unbedingt wissen müssen.
</p>
</div>
Dies ist ein Sicherheitshinweis-Callout.
Ich bin ein Sicherheitshinweis-Callout mit gestricheltem Rahmen!
<div class="callout callout--danger callout--dashed">
<h4 class="callout__title">Dies ist ein Sicherheitshinweis-Callout.
</h4>
<p>Ich bin ein Sicherheitshinweis-Callout mit gestricheltem Rahmen!
</p>
</div>
Callout in Primärfarbe
Dies ist ein Callout.
Ich bin ein Callout in Primärfarbe.
<div class="callout callout--primary">
<h4 class="callout__title">Dies ist ein Callout.</h4>
<p>Ich bin ein Callout in Primärfarbe.</p>
</div>
Dies ist ein Callout.
Ich bin ein Callout in Primärfarbe mit gestricheltem Rahmen!
<div class="callout callout--primary callout--dashed">
<h4 class="callout__title">Dies ist ein Callout.</h4>
<p>Ich bin ein Callout in Primärfarbe mit gestricheltem Rahmen!</p>
</div>
Callout-Bausteine mit Font Awesome-Symbolen
Es ist möglich, Ihre Callouts mit Font Awesome-Symbolen zu kombinieren:
„Abonnieren“-Symbol
Dies ist ein Callout mit dem Symbol.
<div class="callout">
<h4 class="callout__title"><em class="fas fa-send-o"> </em> „Abonnieren“-Symbol</h4>
<p>Dies ist ein Callout mit dem Symbol.</p>
</div>
Schlosssymbol
Dies ist ein Callout mit dem Symbol.
<div class="callout">
<h4 class="callout__title"><em class="fas fa-lock"> </em> Schlosssymbol</h4>
<p>Dies ist ein Callout mit dem Symbol.</p>
</div>
Telefonsymbol
Dies ist ein Callout mit dem Symbol.
<div class="callout">
<h4 class="callout__title"><em class="fas fa-phone"> </em> Telefonsymbol</h4>
<p>Dies ist ein Callout mit dem Symbol.</p>
</div>
Schlosssymbol
Dies ist ein Callout mit dem Symbol.
<div class="callout">
<h4 class="callout__title"><em class="fas fa-clock-o"> </em> Schlosssymbol</h4>
<p>Dies ist ein Callout mit dem Symbol.</p>
</div>
Dateisymbol
Dies ist ein Callout mit dem Symbol.
<div class="callout">
<h4 class="callout__title"><em class="fas fa-file"> </em> Dateisymbol</h4>
<p>Dies ist ein Callout mit dem Symbol.</p>
</div>
Smiley-Symbol
Dies ist ein Callout mit dem Symbol.
<div class="callout">
<h4 class="callout__title"><em class="far fa-smile-o"> </em> Smiley-Symbol</h4>
<p>Dies ist ein Callout mit dem Symbol.</p>
</div>
Zauberstabsymbol
Dies ist ein Callout mit dem Symbol.
<div class="callout">
<h4 class="callout__title"><em class="fas fa-magic"> </em> Zauberstabsymbol
</h4>
<p>Dies ist ein Callout mit dem Symbol.</p>
</div>
Combine colors and icons!
Smiley-Symbol
Dies ist ein Callout mit dem Symbol.
<div class="callout callout--success">
<h4 class="callout__title"><em class="far fa-smile-o"> </em> Smiley-Symbol</h4>
<p>Dies ist ein Callout mit dem Symbol.</p>
</div>
Zauberstabsymbol
Dies ist ein Callout mit dem Symbol.
<div class="callout callout--warning">
<h4 class="callout__title"><em class="fas fa-magic"> </em> Zauberstabsymbol</h4>
<p>Dies ist ein Callout mit dem Symbol.</p>
</div>