Statistiekkaarten en KPI-widgets
Maak een rij statistiekkaarten met kerngegevens, gekleurde pictogrammen, trendindicatoren en vergelijkingspercentages met grid- en flex-utilities.
Statistiekkaarten en KPI-widgets is een gratis Tailwind CSS Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Tailwind CSS Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Tailwind CSS Academy bevat in totaal 4 lessen.
Doel en plaatsing van KPI-kaarten
KPI-kaarten (Key Performance Indicator), ook wel statistiekkaarten of metriekwidgets genoemd, tonen bovenaan een dashboard belangrijke cijfers op hoofdlijnen. Ze geven gebruikers direct een overzicht van de belangrijkste metrieken — omzet, actieve gebruikers en conversiepercentage — zonder dat ze hoeven te scrollen of tabellen te openen. Ze zijn altijd het eerste wat gebruikers op een dashboardpagina zien.
<!-- Stat cards positioned at the top of dashboard main content -->
<main class="flex-1 overflow-y-auto bg-gray-100 p-6">
<!-- KPI cards row -->
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 xl:grid-cols-4">
<!-- Card 1: Total Revenue -->
<!-- Card 2: Active Users -->
<!-- Card 3: Conversion Rate -->
<!-- Card 4: Open Tickets -->
</div>
<!-- Charts and tables below -->
</main>Basisstructuur van een statistiekkaart
Elke statistiekkaart heeft vier elementen: een label (de naam van de metriek), een waarde (het grote getal), een trendindicator (de procentuele verandering) en een optioneel pictogram. Plaats al deze elementen in een witte, afgeronde kaart: rounded-xl bg-white p-6 shadow-sm. Gebruik in de kaart een flexkolom of flexrij, afhankelijk van de vraag of het pictogram naast of boven de waarde staat.
<div class="rounded-xl bg-white p-6 shadow-sm">
<div class="flex items-center justify-between">
<!-- Label -->
<p class="text-sm font-medium text-gray-500">Total Revenue</p>
<!-- Icon -->
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-blue-100">
<svg class="h-5 w-5 text-blue-600"><!-- currency icon --></svg>
</div>
</div>
<!-- Value -->
<p class="mt-4 text-3xl font-bold tracking-tight text-gray-900">$48,295</p>
<!-- Trend -->
<p class="mt-1 text-sm text-green-600">
<span class="font-semibold">+12.5%</span> vs last month
</p>
</div>Trendindicatoren met kleurcodering
Maak trends visueel scanbaar met kleurcodering: groen voor positieve veranderingen en rood voor negatieve. Gebruik text-green-600 met een pijl omhoog voor stijgingen en text-red-500 met een pijl omlaag voor dalingen. Gebruik voor neutrale of ongewijzigde metrieken text-gray-500. Toon naast het percentage altijd het onbewerkte getal voor context.
<!-- Positive trend -->
<div class="mt-2 flex items-center gap-1 text-sm text-green-600">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/>
</svg>
<span class="font-semibold">+12.5%</span>
<span class="text-gray-500">from last month</span>
</div>
<!-- Negative trend -->
<div class="mt-2 flex items-center gap-1 text-sm text-red-500">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/>
</svg>
<span class="font-semibold">-3.2%</span>
<span class="text-gray-500">from last month</span>
</div>Kleurthema's per metriekpictogram
Geef elke statistiekkaart een eigen kleurthema voor het pictogram, zodat gebruikers de kaarten beter kunnen scannen. Omzet krijgt blauw, gebruikers paars, conversie groen en supporttickets oranje of rood. Elk pictogram staat in een afgeronde cirkel met een lichte variant van de kleur als achtergrond en de volle kleur als vulling van het pictogram. Deze kleurcodering blijft overal hetzelfde waar de metriek in het dashboard voorkomt.
<!-- Revenue: blue -->
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-blue-100">
<svg class="h-5 w-5 text-blue-600"><!-- icon --></svg>
</div>
<!-- Users: purple -->
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-purple-100">
<svg class="h-5 w-5 text-purple-600"><!-- icon --></svg>
</div>
<!-- Conversion: green -->
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-green-100">
<svg class="h-5 w-5 text-green-600"><!-- icon --></svg>
</div>
<!-- Tickets: orange -->
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-orange-100">
<svg class="h-5 w-5 text-orange-600"><!-- icon --></svg>
</div>Mini-grafiek als sparkline in een statistiekkaart
Door onder de metriekwaarde een mini-grafiek als sparkline toe te voegen, geef je in één oogopslag trendgegevens weer zonder dat je een volledige grafiek hoeft te openen. Een eenvoudige SVG-polyline werkt als een lichte sparkline. Je kunt ook een kleine staafgrafiek maken met een container flex gap-0.5 items-end, waarin elke staaf een w-1-div met een verschillende hoogte is. Zo krijg je alleen met Tailwind een sparkline-effect.
<!-- CSS bar sparkline -->
<div class="mt-4">
<div class="flex h-10 items-end gap-0.5">
<div class="w-2 rounded-sm bg-blue-200" style="height: 40%"></div>
<div class="w-2 rounded-sm bg-blue-200" style="height: 55%"></div>
<div class="w-2 rounded-sm bg-blue-200" style="height: 35%"></div>
<div class="w-2 rounded-sm bg-blue-200" style="height: 65%"></div>
<div class="w-2 rounded-sm bg-blue-200" style="height: 80%"></div>
<div class="w-2 rounded-sm bg-blue-400" style="height: 70%"></div>
<div class="w-2 rounded-sm bg-blue-600" style="height: 90%"></div>
</div>
</div>Statistiekkaart met voortgangsbalk
Voor doelen en quota laat een voortgangsbalk in een statistiekkaart visueel zien hoe dicht de metriek bij het doel ligt. Gebruik een grijze achtergrondtrack h-2 rounded-full bg-gray-100 met daarin een gekleurde gevulde balk. Stel de breedte van de vulling in met een percentage in een inline stijl of met willekeurige Tailwind-waarden zoals w-[73%]. Plaats het doellabel en het percentage onder of boven de balk.
<div class="rounded-xl bg-white p-6 shadow-sm">
<p class="text-sm font-medium text-gray-500">Monthly Goal</p>
<p class="mt-4 text-3xl font-bold text-gray-900">$36,450</p>
<p class="mt-1 text-sm text-gray-500">of $50,000 goal</p>
<!-- Progress bar -->
<div class="mt-4">
<div class="h-2 rounded-full bg-gray-100">
<div class="h-2 w-[73%] rounded-full bg-blue-600"></div>
</div>
<p class="mt-1 text-right text-xs text-gray-400">73% complete</p>
</div>
</div>Responsief raster met statistiekkaarten
Statistiekkaarten moeten zich soepel aanpassen aan verschillende schermformaten. Begin op mobiel met één kolom (grid-cols-1), schakel op middelgrote schermen over naar twee kolommen (sm:grid-cols-2) en breid op extra grote schermen uit naar vier (xl:grid-cols-4). Op tablets met twee kolommen kunnen kaarten hoger worden. Zorg dat de kaartindeling ook in twee kolommen goed leesbaar blijft.
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 xl:grid-cols-4">
<!-- On mobile: 1 card per row (full width) -->
<!-- On sm (640px): 2 cards per row -->
<!-- On xl (1280px): 4 cards per row -->
<div class="rounded-xl bg-white p-6 shadow-sm"><!-- Revenue --></div>
<div class="rounded-xl bg-white p-6 shadow-sm"><!-- Users --></div>
<div class="rounded-xl bg-white p-6 shadow-sm"><!-- Conversion --></div>
<div class="rounded-xl bg-white p-6 shadow-sm"><!-- Tickets --></div>
</div>Statistiekkaart met vergelijkingsperiode
Geef gebruikers context bij de metriek door een keuzelijst voor een vergelijkingsperiode in of bij de statistiekkaart te tonen. Met een kleine gesegmenteerde keuzeregel in de vorm van pillen kunnen gebruikers wisselen tussen Vandaag, 7 dagen, 30 dagen en Alle tijd. Dit voegt interactiviteit toe zonder de kaart onoverzichtelijk te maken: de keuzeregel kan een gedeelde functie boven alle kaarten zijn die de hele rij tegelijk beïnvloedt.
<!-- Period selector above stat cards -->
<div class="mb-6 flex items-center justify-between">
<h2 class="text-lg font-bold text-gray-900">Overview</h2>
<div class="flex rounded-lg border border-gray-200 bg-white">
<button class="rounded-l-lg border-r border-gray-200 px-3 py-1.5 text-xs
font-medium text-gray-500 hover:bg-gray-50">Today</button>
<button class="border-r border-gray-200 px-3 py-1.5 text-xs
font-medium text-blue-600 bg-blue-50">7D</button>
<button class="border-r border-gray-200 px-3 py-1.5 text-xs
font-medium text-gray-500 hover:bg-gray-50">30D</button>
<button class="rounded-r-lg px-3 py-1.5 text-xs
font-medium text-gray-500 hover:bg-gray-50">All time</button>
</div>
</div>Laadskelet voor statistiekkaarten
Toon tijdens het laden van KPI-gegevens vanuit een API skeletplaatshouders om verspringen van de indeling te voorkomen en aan te geven dat de inhoud eraan komt. Vervang het getal en label door grijze geanimeerde blokken met Tailwinds animate-pulse. Skeletelementen gebruiken rounded bg-gray-200 met vaste hoogtes om de afmetingen van de echte kaartindeling na te bootsen.
<!-- Skeleton stat card -->
<div class="rounded-xl bg-white p-6 shadow-sm animate-pulse">
<div class="flex items-center justify-between">
<div class="h-4 w-24 rounded bg-gray-200"></div>
<div class="h-10 w-10 rounded-full bg-gray-200"></div>
</div>
<div class="mt-4 h-8 w-32 rounded bg-gray-200"></div>
<div class="mt-2 h-3 w-28 rounded bg-gray-200"></div>
</div>Klikbare statistiekkaarten
Maak statistiekkaarten klikbaar, zodat gebruikers naar de detailweergave van die metriek kunnen navigeren. Plaats de kaart in een anker of voeg onderaan een subtiele link Details bekijken toe. Gebruik group op de container van de kaart en group-hover:underline op de detaillink om de link alleen bij aanwijzen te tonen. Dit is een nette vorm van progressieve onthulling die de kaart in rust niet onoverzichtelijk maakt.
<a href="/analytics/revenue"
class="group block rounded-xl bg-white p-6 shadow-sm
transition hover:shadow-md">
<div class="flex items-center justify-between">
<p class="text-sm font-medium text-gray-500">Total Revenue</p>
<!-- Icon -->
</div>
<p class="mt-4 text-3xl font-bold text-gray-900">$48,295</p>
<p class="mt-1 text-sm text-green-600 font-semibold">+12.5%</p>
<!-- Hover-revealed detail link -->
<p class="mt-3 text-xs text-blue-600 opacity-0 transition group-hover:opacity-100">
View full report →
</p>
</a>Statistiekkaarten in donkere modus
Pas statistiekkaarten aan voor de donkere modus door de kleuren van oppervlakken en tekst om te keren. De achtergrond van de kaart verandert van bg-white in dark:bg-gray-800, de tekst van de waarde van text-gray-900 in dark:text-white en de containers van pictogrammen van lichte in donkere varianten. De trendkleuren (groen/rood) zien er over het algemeen in beide modi goed uit, maar controleer de contrastverhoudingen, omdat lichtgroen op een donkere achtergrond niet aan de WCAG-normen kan voldoen.
<div class="rounded-xl bg-white p-6 shadow-sm dark:bg-gray-800">
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Revenue</p>
<p class="mt-4 text-3xl font-bold text-gray-900 dark:text-white">$48,295</p>
<!-- Icon container -->
<div class="flex h-10 w-10 items-center justify-center
rounded-full bg-blue-100 dark:bg-blue-900">
<svg class="h-5 w-5 text-blue-600 dark:text-blue-400"><!-- icon --></svg>
</div>
</div>Snelle controle
Test je begrip van de concepten uit deze les over Tailwind CSS Mastery.
Samenvatting van de les
In deze les heb je geleerd hoe je: KPI-statistiekkaarten bouwt met pictogrammen, trendindicatoren en kleurcodering, voortgangsbalken en sparklines toevoegt voor een uitgebreidere visualisatie van metrieken, en skeletladers maakt met animate-pulse voor nette laadstatussen. Hierna bouwen we de gegevenstabel en widgets met plaatshouders voor grafieken.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 30
- Lessen
- 120
Veelgestelde vragen
Is de les “Statistiekkaarten en KPI-widgets” gratis?
Ja — de volledige tekst van “Statistiekkaarten en KPI-widgets” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Tailwind CSS Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Tailwind CSS Academy bevat in totaal 4 lessen.
Wat leer ik in “Statistiekkaarten en KPI-widgets”?
Maak een rij statistiekkaarten met kerngegevens, gekleurde pictogrammen, trendindicatoren en vergelijkingspercentages met grid- en flex-utilities. Je oefent met Tailwind CSS Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Tailwind CSS Academy te beginnen?
Ervaring vooraf is niet nodig. Tailwind CSS Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.
Hoe lang duurt de les “Statistiekkaarten en KPI-widgets”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Tailwind CSS Academy?
Ja. Elke les over Tailwind CSS Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Dashboardstructuur en sidebar
- Topbalk en broodkruimelnavigatie
- Statistiekkaarten en KPI-widgets
- Gegevenstabel en plaatshouders voor grafieken