Karten & Panels
Cards sind vielseitige Container für Inhalte, Statistiken und Dashboard-Widgets.
UIkit Card-Varianten
Default Card
Ein einfacher Inhaltscontainer mit weißem Hintergrund und Schatten.
Primary Card
Hervorgehobene Karte in der Primärfarbe des Themes.
Secondary Card
Dunkle Karte für Kontrast auf hellem Hintergrund.
Hover Card
Mit Hover-Effekt – ideal für klickbare Elemente.
HTML
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Default Card</h3>
<p>Inhalt...</p>
</div>
<div class="uk-card uk-card-primary uk-card-body uk-light">...</div>
<div class="uk-card uk-card-secondary uk-card-body uk-light">...</div>
<div class="uk-card uk-card-default uk-card-hover uk-card-body">...</div>
Größen
Small Card
Kompaktes Padding für dichte Layouts.
Default Card
Standard-Padding für die meisten Anwendungsfälle.
Large Card
Großes Padding für prominente Inhalte.
HTML
<div class="uk-card uk-card-default uk-card-body uk-card-small">...</div>
<div class="uk-card uk-card-default uk-card-body">...</div>
<div class="uk-card uk-card-default uk-card-body uk-card-large">...</div>
Mit Header & Footer
Max Mustermann
Benutzerinformationen und weitere Details werden hier angezeigt.
HTML
<div class="uk-card uk-card-default">
<div class="uk-card-header">
<h3 class="uk-card-title">Titel</h3>
</div>
<div class="uk-card-body">
<p>Inhalt...</p>
</div>
<div class="uk-card-footer">
<a href="#" class="uk-button uk-button-text">Mehr →</a>
</div>
</div>
Statistik-Karten (Dashboard-Style)
Typisches Dashboard-Widget-Muster mit Icon, Wert und Beschriftung:
<?php
$stats = [
['icon'=>'fa-users','color'=>'#3d5af1','bg'=>'#eff6ff','value'=>'1.248','label'=>'Benutzer','change'=>'+12%','up'=>true],
['icon'=>'fa-arrow-right-to-bracket','color'=>'#22c55e','bg'=>'#f0fdf4','value'=>'342','label'=>'Anfragen/h','change'=>'+5%','up'=>true],
['icon'=>'fa-gauge-high','color'=>'#f59e0b','bg'=>'#fffbeb','value'=>'89 ms','label'=>'Antwortzeit','change'=>'-8ms','up'=>false],
['icon'=>'fa-circle-exclamation','color'=>'#ef4444','bg'=>'#fef2f2','value'=>'3','label'=>'Fehler','change'=>'+1','up'=>false],
];
foreach($stats as $s): ?>
<?php endforeach; ?>
<?=$s['value']?>
<?=$s['label']?>
<?=$s['change']?> seit letzter Woche
HTML
<div class="uk-card uk-card-default uk-card-body uk-card-small">
<div style="display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem;">
<div class="stat-icon">
<i class="fa-solid fa-users"></i>
</div>
<div>
<div class="stat-value">1.248</div>
<div class="stat-label">Benutzer</div>
</div>
</div>
<div class="stat-change positive">
<i class="fa-solid fa-arrow-trend-up"></i> +12%
</div>
</div>
Muted Panel (Info-Bereich)
Hinweis
Dieser Abschnitt kann für Hinweise, Tipps oder zusammenfassende Informationen verwendet werden.