UI Components

Erstellt: 2025-12-27 | Aktualisiert: 2025-12-27

Wiederverwendbare UI-Komponenten aus admin.css.

Buttons

Basis

<button class="btn btn--primary">Primary</button>
<button class="btn btn--secondary">Secondary</button>
<button class="btn btn--success">Success</button>
<button class="btn btn--danger">Danger</button>
<button class="btn btn--info">Info</button>
<button class="btn btn--light">Light</button>

Größen

<button class="btn btn--primary btn--small">Klein</button>
<button class="btn btn--primary">Normal</button>
<button class="btn btn--primary btn--large">Groß</button>

Block (volle Breite)

<button class="btn btn--primary btn--block">Volle Breite</button>

Badges

Status-Badges

<span class="badge badge--pending">Pending</span>
<span class="badge badge--in_progress">In Progress</span>
<span class="badge badge--completed">Completed</span>
<span class="badge badge--failed">Failed</span>
<span class="badge badge--cancelled">Cancelled</span>

Andere Badges

<span class="badge badge--draft">Entwurf</span>
<span class="badge badge--published">Veröffentlicht</span>
<span class="badge badge--success">Erfolg</span>
<span class="badge badge--warning">Warnung</span>
<span class="badge badge--primary">Primary</span>

Alerts

<div class="alert alert--success">Erfolgreich gespeichert.</div>
<div class="alert alert--warning">Achtung: Ungespeicherte Änderungen.</div>
<div class="alert alert--error">Fehler beim Speichern.</div>
<div class="alert alert--info">Information verfügbar.</div>

Forms

Basis-Form

<form class="form">
    <div class="form-group">
        <label class="form-group__label">Name</label>
        <input type="text" class="form-input">
        <span class="form-group__hint">Hilfetext</span>
    </div>
    
    <div class="form-group">
        <label class="form-group__label">Beschreibung</label>
        <textarea class="form-textarea"></textarea>
    </div>
    
    <div class="form-group">
        <label class="form-group__label">Status</label>
        <select class="form-select">
            <option>Aktiv</option>
            <option>Inaktiv</option>
        </select>
    </div>
    
    <div class="form-actions">
        <button type="submit" class="btn btn--primary">Speichern</button>
        <button type="button" class="btn btn--light">Abbrechen</button>
    </div>
</form>

Form-Row (2 Spalten)

<div class="form-row">
    <div class="form-group">
        <label>Vorname</label>
        <input class="form-input">
    </div>
    <div class="form-group">
        <label>Nachname</label>
        <input class="form-input">
    </div>
</div>

Cards

<div class="card">
    <div class="card__header">
        <h2>Titel</h2>
        <span class="badge badge--success">Aktiv</span>
    </div>
    <p>Card-Inhalt hier...</p>
</div>

Stats

<div class="stats-grid">
    <div class="stat-card">
        <span class="stat-card__value">42</span>
        <span class="stat-card__label">Dokumente</span>
    </div>
    <div class="stat-card stat-card--success">
        <span class="stat-card__value">98%</span>
        <span class="stat-card__label">Erfolgsrate</span>
    </div>
    <div class="stat-card stat-card--warning">
        <span class="stat-card__value">3</span>
        <span class="stat-card__label">Pending</span>
    </div>
</div>

Lists

<div class="list">
    <div class="list-item">
        <div class="list-item__main">
            <h3 class="list-item__title">
                <a href="#">Item Titel</a>
            </h3>
            <div class="list-item__meta">
                <span>Erstellt: 2025-12-27</span>
                <span>5 Einträge</span>
            </div>
        </div>
        <span class="badge badge--completed">Fertig</span>
    </div>
</div>

Empty State

<div class="empty-state">
    <p>Keine Einträge vorhanden.</p>
    <a href="/new" class="btn btn--primary">Erstellen</a>
</div>

<!-- Klein -->
<div class="empty-state empty-state--small">
    <p>Keine Daten.</p>
</div>

Pagination

<div class="pagination">
    <span class="pagination__info">1-10 von 42</span>
    <div class="pagination__buttons">
        <button class="pagination__btn" disabled>&laquo;</button>
        <button class="pagination__btn pagination__btn--active">1</button>
        <button class="pagination__btn">2</button>
        <button class="pagination__btn">3</button>
        <button class="pagination__btn">&raquo;</button>
    </div>
</div>

Action Bar

<div class="action-bar">
    <button class="btn btn--primary">Speichern</button>
    <button class="btn btn--danger">Löschen</button>
    <a href="/back" class="btn btn--light">Zurück</a>
</div>

HTMX-Integration

Loading Indicator

<button class="btn btn--primary">
    <span class="htmx-content">Speichern</span>
    <span class="htmx-indicator">Lade...</span>
</button>

HTMX Messages Container

<div class="htmx-messages" id="messages"></div>

Layout-Helper

Page Container

<div class="page-container">...</div>
<div class="page-container page-container--narrow">...</div>
<div class="page-container page-container--wide">...</div>

Grid Layouts

<div class="grid-2">
    <div>Hauptinhalt</div>
    <div>Sidebar (320px)</div>
</div>

<div class="grid-3">
    <div>Spalte 1</div>
    <div>Spalte 2</div>
    <div>Spalte 3</div>
</div>

<div class="grid-auto">
    <!-- Auto-fit mit min 140px -->
</div>

Verwandte Themen