Bereichshervorhebungen

 Abb. 38: Bereichshervorhebungen

Hint-Box (❗ in türkis)

Code

<div class="hint-box">
<h4>…</h4>
<p>…</p>
</div>

Info-Box (ℹ in dunkelblau)

Code

<div class="info-box">
<h4>…</h4>
<p>…</p>
</div>

Link-Box (🔗 in gelb)

Code

<div class="link-box">
<h4>…</h4>
<p>…</p>
</div>

Important-Box (🚩 in rot)

Code

<div class="important-box">
<h4>…</h4>
<p>…</p>
</div>

Excercise-Box (🖊 in grün)

Code

<div class="exercise-box">
<h4>…</h4>
<p>…</p>
</div>

Custom-Box

Code

<div class="custom-icon-box" style="--color: #FF8000; --icon: '\F189';">
    <h4>Custom Box</h4>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr[...]</p>
</div>

Websource

zur Icon-Übersicht in Booststrap (CSS-Code)