Artikel-Beispiel
Beschreibung des Artikels...
Gelesen
Überschrift 2
Fetter Text Normaler Text.
Fehler/ Nicht gut: Zusammenfassung
Detail 1
Detail 2
Detail 3
Absatz-Text.
Warnung/ Hinweis: Zusammenfassung
Detail 1
Detail 2
Detail 3
Absatz-Text.
Hier kommen alle verfügbaren Gestaltungs-Elemente:
Buttons & Call-to-Actions
Button Blue (Primary) Button Green (Success) Button Gray (Neutral) Button Red (Danger)
Insight Boxes
Success Box: Für positive Nachrichten, Erfolge und Bestätigungen
Error Box: Für Probleme, Fehler und Warnungen
Warning Box: Für Hinweise und wichtige Informationen
Primary Box: Für Hauptinformationen und Zusammenfassungen
Klappbare Insight Boxes
Success mit Details (klicken zum Öffnen)
Detail 1: Weitere Informationen
Detail 2: Zusätzliche Erklärungen
Mit Icon und Flexbox-Layout
Komplexere Layouts mit SVG-Icons für professionelle Darstellung
Textformatierung
Normaler Text mit fetten Hervorhebungen und kursiven Betonungen
Lead-Paragraph für wichtige Einleitungstexte
Text mit durchgestrichenen Bereichen für Vergleiche
Bilder & Logo
Bild einbinden: Bild 'bildname' nicht gefunden
Logo verwenden: oder
Layout-Container
.content: Haupt-Content-Wrapper (wird hier verwendet)
.container: Generischer Container
.text-center: Zentrierte Ausrichtung
.text-left: Linksbündige Ausrichtung
Formulare (echte Beispiele)
Status-Nachrichten (echte Klassen)
Card-Systeme (echte Strukturen)
Bild-Bereich
1
Aktiv
Aktive Zugangsebene
2
Gesperrt
Gesperrte Ebene
Spezial-Status & Animationen
Bestätigung erfolgreich
Wird geladen...
Animierter Text
Utility & Layout
Lead-Paragraph für Einleitungen
Header-Bold Text
Normal mit durchgestrichen
Redirect-Information
Bild-Container mit festen Maßen