Fertig 

Boxen und Notizen

• Box mit Text
• Große Boxen mit Absätzen
• Aufeinander folgende Boxen
• Farbvarianten
• Arten von Boxen
  • Hinweise
  • Notizen
  • Warnungen
  • Aufgaben
• Notizen mit Code

---

Box mit Text

Ein Text ist von einer Box umgeben, wenn der Text eine spezielle Klasse hat (z.B. .box-green). Die Klasse muss direkt in der Zeile darunter stehen.

Beispieltext in einer Box.

Beispieltext in einer Box.
{: .box-green }

↑

---

Große Boxen mit Absätzen

Wenn mehrere Elemente untereinander stehen, wie Überschriften und Absätze, kann eine farbige Box mit Inhalt erstellt werden, in dem jedes Element die gleiche box-Klasse erhält (z.B. .box-green)

Überschrift in einer Box

Erster Absatz in einer Box.

Zweiter Absatz in einer Box.

#### Überschrift in einer Box
{: .box-green }

Erster Absatz in einer Box.
{: .box-green }

Zweiter Absatz in einer Box.
{: .box-green }

↑

---

Aufeinander folgende Boxen

Verschiedene aufeinander folgende Boxen sind problemlos möglich. Sie sind aber immer durch eine Leerzeile getrennt.

Erste Box in grün.

Zweite Box in gelb.

Erste Box in grün.
{: .box-green }
Zweite Box in gelb.
{: .box-yellow }

Gleiche aufeinander folgende Boxen sind möglich, müssen aber durch einen HTML-Absatz getrennt sein.

Erste Box in grün.

Zweite Box in grün.

Erste Box in grün.
{: .box-green }
<p></p>
Zweite Box in grün.
{: .box-green }

↑

---

Farbvarianten

↑

---

Arten von Boxen

Hinweise

Hinweis: Dies ist eine Hinweis-Box. Hier stehen Erklärungen, die zum Verständnis beitragen.

**Hinweis:** Dies ist eine Hinweis-Box. Hier stehen Erklärungen, die zum Verständnis beitragen.
{: .box-green }

Notizen

Notiz: Dies ist eine Notiz-Box. Hier stehen Ergänzungen, was noch beachtet werden sollte.

**Notiz:** Dies ist eine Notiz-Box. Hier stehen Ergänzungen, was noch beachtet werden sollte.
{: .box-yellow }

Warnungen

Warnung: Dies ist eine Warnung. Hier stehen Dinge, die erhöhter Aufmerksamkeit bedürfen.

**Warnung**: Dies ist eine Warnung. Hier stehen Dinge, die erhöhter Aufmerksamkeit bedürfen.
{: .box-red }

Aufgaben

TODO: Dies ist eine Aufgaben-Box. Hier stehen Dinge, die noch zu erledigen sind.

**TODO:** Dies ist eine Aufgaben-Box. Hier stehen Dinge, die noch zu erledigen sind.
{: .box-blue }

Warnung: Seiten mit einem TODO sollten nicht den Status F (Fertig) bekommen.

↑

---

Notizen mit Code

Notiz: Dies ist eine Notiz mit Code-Beispiel

**Notiz**: Dies ist eine Notiz mit Code-Beispiel
{: .box-yellow }
<code>
Hier steht der Code.
</code>

> Besonderheiten

---