Karten & Panels – Framework Docs

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

Administrator

Benutzerinformationen und weitere Details werden hier angezeigt.

Profil ansehen →

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): ?>

<?=$s['value']?>

<?=$s['label']?>

<?=$s['change']?> seit letzter Woche

<?php endforeach; ?>

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.