7.2.2.3.1 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)

Übersicht zur Überführung

Wichtig

Dieser Bereich ist noch Diskussionsgrundlage und noch keine finale Empfehlung

Bei der Umstellung von Kursformaten können auch weiterhin die Bereichshervorhebungen des alten Kursdesigns verwendet werden. Sollen die neuen Bereichshervorhebungen verwendet werden, schlagen wir folgende Umformatierung vor:

Altes Kursdesign	Neues Kursdesign	Code
important-purple	hint-box	<div class="hint-box"> <h4>…</h4> <p>…</p> </div>
link-pink	link-box	<div class="link-box"> <h4>…</h4> <p>…</p> </div>
task-blue	exercise-box	<div class="exercise-box"> <h4>…</h4> <p>…</p> </div>
book-grey	info-box	<div class="info-box"> <h4>…</h4> <p>…</p> </div>
cal-green	info-box	<div class="info-box"> <h4>…</h4> <p>…</p> </div>
quest-orange	custom-icon-box	<div class="custom-icon-box" style="--color: #D67E7A; --icon: '\F64E';"> <h4>…</h4> <p>…</p> </div>
example-green	info-box	<div class="info-box"> <h4>…</h4> <p>…</p> </div>
watch-turquoise	info-box	<div class="info-box"> <h4>…</h4> <p>…</p> </div>
zitat-blue	custom-icon-box	<div class="custom-icon-box" style="--color: #6688A6; --icon: '\F6B0';"> <h4>…</h4> <p>…</p> </div>
paragraph-blue	custom-icon-box	<div class="custom-icon-box" style="--color: #6688A6; --icon: '\F6B0';"> <h4>…</h4> <p>…</p> </div>
quiz-green	exercise-box	<div class="exercise-box"> <h4>…</h4> <p>…</p> </div>
download-blue	link-box	<div class="link-box"> <h4>…</h4> <p>…</p> </div>
pay-green	info-box	<div class="info-box"> <h4>…</h4> <p>…</p> </div>
forum-blue	exercise-box	<div class="exercise-box"> <h4>…</h4> <p>…</p> </div>
certificate-yellow	info-box	<div class="info-box"> <h4>…</h4> <p>…</p> </div>
education-orange	info-box	<div class="info-box"> <h4>…</h4> <p>…</p> </div>
docs-grey	info-box	<div class="info-box"> <h4>…</h4> <p>…</p> </div>
math-blue	custom-icon-box	<div class="custom-icon-box" style="--color: #6688A6; --icon: '\F1E0';"> <h4>…</h4> <p>…</p> </div>