Typografie

Überschrift H1 – Die Hauptüberschrift

Überschrift H2 – Abschnittstitel

Überschrift H3 – Unterabschnitt

Überschrift H4 – Detailüberschrift

Überschrift H5 – Klein
Überschrift H6 – Sehr klein

Dies ist ein Lead-Absatz. Er hebt sich durch eine etwas größere Schrift und leicht abweichende Farbe vom normalen Fließtext ab und dient als Einleitung zu einem Abschnitt.

Dies ist normaler Fließtext. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Text kann fett, kursiv, unterstrichen oder durchgestrichen sein. Auch Links sehen so aus. Inline-Code: const x = 42;

„Design ist nicht nur, wie etwas aussieht und sich anfühlt – Design ist, wie es funktioniert." — Steve Jobs 
// Codeblock
function greet(name) {
  return `Hallo, ${name}!`;
}
console.log(greet("Welt")); // → Hallo, Welt!

Buttons

Varianten

Outlined

Ghost & Link

Größen

Zustände

Button-Gruppe

Formulare

050100

Cards

Einfache Card

Eine einfache Card ohne Bild — Titel, Text und Footer.

Card mit Bild

Platzhalter für ein Titelbild oben.

Neu

Hervorgehobene Card

Stärkerer Schatten, hebt sich besser ab.

  • Feature Alpha
  • Feature Beta
  • Feature Gamma

Akzent-Card

Farbiger linker Rand als visueller Akzent. Gut für Hinweise.

Zuletzt bearbeitet: heute
📊
1.234
Besucher heute
▲ +12% seit gestern

Horizontal

Bild links, Text rechts.

Tabelle

#NameRolleStatusPunkteAktion
1Alice MüllerAdmin Aktiv4.892
2Bob SchmidtModerator Inaktiv2.341
3Clara WeberSpieler Aktiv9.114
4Dieter KochSpieler Gesperrt455
5Eva FischerVIP Premium21.007

Alerts & Hinweise

ℹ️
Info: Dies ist eine Informations-Meldung mit nützlichem Hinweis.
✅
Erfolg: Die Aktion wurde erfolgreich ausgeführt!
⚠️
Warnung: Bitte beachte diesen Hinweis, bevor du fortfährst.
❌
Fehler: Ein Fehler ist aufgetreten. Bitte versuche es erneut.

Badges & Tags

Eckige Badges

Primary Secondary Success Danger Warning Info

Runde Badges (Pill)

Primary Neu 42 Beta 7

Tags

HTML CSS JavaScript Node.js Design Typografie Featured

Badges in Text

Nutzer Alice Aktiv hat 3 neue Nachrichten und 1 Warnung.

Sonstiges

Fortschrittsbalken

Primär72%
Erfolg45%
Warnung88%
Gefahr23%

Breadcrumbs

Trennlinien

oder

Tooltips

Avatare

AM
BS
CW
DK
EF
GH

Spinner & Loading

Listengruppen

  • Einfacher Eintrag
  • Aktiver Eintrag
  • Mit Badge 3
  • Erfolg-Eintrag
  • Fehler-Eintrag
  • Deaktivierter Eintrag