Callout-Bausteine

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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</em> Zauberstabsymbol</h4>
  <p>Dies ist ein Callout mit dem Symbol.</p>
</div>