Patronen voor cardcomponenten
Bouw cards met afbeeldingsheaders, contentgedeelten en actiefooters met flex- en gridindelingen binnen een afgeronde container met schaduw.
Patronen voor cardcomponenten is een gratis Tailwind CSS Academy-les op CoddyKit. Dit is les 2 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.
Wat een kaartcomponent kenmerkt
Een kaart is een zelfstandig rechthoekig oppervlak waarin gerelateerde inhoud wordt gegroepeerd. Kaarten bevatten meestal drie zones: een kop (vaak een afbeelding of gekleurde strook), een hoofdgedeelte (titel, beschrijving, metagegevens) en een optionele voettekst (actieknoppen).
In Tailwind gebruikt de basisomhulling van een kaart bg-white rounded-xl shadow-md overflow-hidden om een wit oppervlak met afgeronde hoeken te maken, met een slagschaduw voor diepte en afgeknipte hoeken voor eventuele afbeeldingen aan de binnenkant.
<div class="bg-white rounded-xl shadow-md overflow-hidden max-w-sm">
<!-- Card content goes here -->
</div>Kaart met afbeeldingskop
Het meestgebruikte kaartpatroon heeft een afbeeldingskop die boven de inhoud over de volledige breedte loopt. Gebruik w-full h-48 object-cover op de tag <img> om de breedte te vullen en de hoogte consistent bij te snijden, ongeacht de oorspronkelijke afmetingen van de afbeelding.
Deze aanpak zorgt ervoor dat alle kaarten in een raster er uniform uitzien, zelfs wanneer bronafbeeldingen verschillende beeldverhoudingen hebben.
<div class="bg-white rounded-xl shadow-md overflow-hidden max-w-sm">
<img
src="photo.jpg"
alt="Mountain landscape"
class="w-full h-48 object-cover"
/>
<div class="p-5">
<h3 class="text-lg font-semibold text-gray-900">Card Title</h3>
<p class="mt-1 text-sm text-gray-500">Short description of the card content.</p>
</div>
</div>Typografische hiërarchie in het hoofdgedeelte van een kaart
Breng in het hoofdgedeelte van de kaart een duidelijke typografische hiërarchie aan om de blik van de lezer te sturen. Een vetgedrukte titel met text-lg font-bold text-gray-900 trekt de aandacht, terwijl een subtitel met text-sm text-gray-500 secundaire informatie weergeeft.
Gebruik mt-2 tussen elementen voor een consistent verticaal ritme, en line-clamp-2 (uit de typografieplugin) om lange beschrijvingen af te kappen tot precies twee regels, zodat kaarthoogten in een raster gelijk blijven.
<div class="p-5">
<span class="text-xs font-semibold uppercase tracking-wide text-blue-600">Tutorial</span>
<h3 class="mt-1 text-xl font-bold text-gray-900">Getting Started with Tailwind</h3>
<p class="mt-2 text-sm text-gray-600 line-clamp-2">
Learn how to set up Tailwind CSS and build your first responsive layout using utility classes.
</p>
</div>Kaartvoettekst met acties
De voettekst van de kaart bevat actieknoppen of metagegevens zoals auteur en datum. Gebruik border-t border-gray-100 om de voettekst visueel van de hoofdtekst te scheiden, en flex items-center justify-between px-5 py-3 om de inhoud horizontaal te verdelen.
Deze structuur met drie zones (afbeelding, hoofdtekst en voettekst) vormt de basis van productkaarten, blogberichtkaarten en dashboardwidgets.
<div class="bg-white rounded-xl shadow-md overflow-hidden max-w-sm">
<img src="photo.jpg" alt="" class="w-full h-48 object-cover" />
<div class="p-5">
<h3 class="text-lg font-bold text-gray-900">Card Title</h3>
<p class="mt-2 text-sm text-gray-600">A brief description of this card's content.</p>
</div>
<div class="border-t border-gray-100 flex items-center justify-between px-5 py-3">
<span class="text-xs text-gray-400">June 2026</span>
<button class="text-sm font-semibold text-blue-600 hover:text-blue-700">Read More</button>
</div>
</div>Horizontale kaartindeling
Voor bredere inhoudsgebieden plaatst een horizontale kaart de afbeelding links en de inhoud rechts. Gebruik flex op de kaartcontainer en w-40 flex-shrink-0 op de afbeeldingswrapper om de afbeelding een vaste breedte te geven terwijl de inhoud uitzet.
Dit patroon is uitstekend geschikt voor lijsten met blogberichten, zoekresultaten en meldingenfeeds.
<div class="flex bg-white rounded-xl shadow-md overflow-hidden">
<div class="flex-shrink-0">
<img src="photo.jpg" alt="" class="w-40 h-full object-cover" />
</div>
<div class="p-5">
<h3 class="text-lg font-bold text-gray-900">Horizontal Card</h3>
<p class="mt-2 text-sm text-gray-600">Image on the left, content expanding on the right.</p>
<button class="mt-3 text-sm font-semibold text-blue-600 hover:underline">View Article</button>
</div>
</div>Hovereffecten voor kaarten
Een hovereffect op een kaart geeft aan dat deze interactief is en verbetert de gebruikerservaring. Een veelgebruikt patroon is de kaart bij hover te laten optillen met een grotere schaduw via hover:shadow-xl, gecombineerd met een vloeiende verplaatsing omhoog via hover:-translate-y-1.
De klasse transition-all duration-200 zorgt ervoor dat zowel de schaduw als de transformatie vloeiend worden geanimeerd. Voeg cursor-pointer toe om extra duidelijk te maken dat er op de kaart kan worden geklikt.
<div class="bg-white rounded-xl shadow-md overflow-hidden max-w-sm
cursor-pointer transition-all duration-200
hover:shadow-xl hover:-translate-y-1">
<img src="photo.jpg" alt="" class="w-full h-48 object-cover" />
<div class="p-5">
<h3 class="text-lg font-bold text-gray-900">Hoverable Card</h3>
<p class="mt-2 text-sm text-gray-600">Hover over me to see the lift effect.</p>
</div>
</div>Rasterindeling voor kaarten
Kaarten worden bijna altijd in rasters weergegeven. Gebruik grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 op een wrapper-element om een responsief raster te maken met één kolom op mobiel, twee op een tablet en drie op een desktop.
De utility gap-6 voegt een consistente tussenruimte tussen kaarten toe zonder marges op afzonderlijke kaarten. Zulke marges zouden de uitlijning van het raster verstoren.
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<img src="a.jpg" alt="" class="w-full h-48 object-cover" />
<div class="p-5">
<h3 class="font-bold text-gray-900">Card One</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<img src="b.jpg" alt="" class="w-full h-48 object-cover" />
<div class="p-5">
<h3 class="font-bold text-gray-900">Card Two</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<img src="c.jpg" alt="" class="w-full h-48 object-cover" />
<div class="p-5">
<h3 class="font-bold text-gray-900">Card Three</h3>
</div>
</div>
</div>Profiel- en avatar-kaarten
Een profielkaart centreert een avatar, naam, rol en links naar sociale media. Gebruik een gekleurde headerband met h-24 bg-gradient-to-r from-blue-500 to-purple-600 en plaats de avatar vervolgens gedeeltelijk over de band met een negatieve bovenmarge: -mt-12 mx-auto op een ronde afbeelding.
Met deze verschoven positionering creëer je een gelaagd visueel effect zonder absolute positionering.
<div class="bg-white rounded-xl shadow-md overflow-hidden max-w-xs text-center">
<div class="h-24 bg-gradient-to-r from-blue-500 to-purple-600"></div>
<div class="px-5 pb-5">
<img
src="avatar.jpg"
alt="Profile"
class="w-20 h-20 rounded-full border-4 border-white -mt-10 mx-auto object-cover"
/>
<h3 class="mt-2 text-lg font-bold text-gray-900">Jane Doe</h3>
<p class="text-sm text-gray-500">Frontend Developer</p>
<button class="mt-4 px-6 py-2 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700">
Follow
</button>
</div>
</div>Kaarten voor statistieken en meetwaarden
Statistiekkaarten tonen één belangrijke meetwaarde met een pictogram, getal en label. Houd ze compact met de opvulling p-5 en gebruik flex items-center justify-between om het pictogram rechts en de statistiek links te plaatsen.
Gebruik verschillende kleuren voor de achtergrond van pictogrammen om meetwaarden in één oogopslag van elkaar te onderscheiden. Een groen pictogram voor omzet, blauw voor gebruikers en oranje voor conversies maakt een dashboard direct scanbaar.
<div class="bg-white rounded-xl shadow-md p-5 flex items-center justify-between">
<div>
<p class="text-sm text-gray-500 font-medium">Total Users</p>
<p class="mt-1 text-3xl font-bold text-gray-900">12,489</p>
<p class="mt-1 text-sm text-green-600 font-medium">+8.2% this month</p>
</div>
<div class="p-3 bg-blue-100 rounded-xl">
<svg class="w-7 h-7 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0"/>
</svg>
</div>
</div>Kaartopmaak voor de donkere modus
Kaarten in de donkere modus vereisen omgekeerde achtergronden en aangepaste tekstkleuren. Gebruik dark:bg-gray-800 in plaats van bg-white, dark:text-white voor koppen en dark:text-gray-400 voor secundaire tekst.
Ook scheidingslijnen met randen moeten worden aangepast: dark:border-gray-700 vervangt border-gray-100. Pas alle donkere varianten naast hun lichte tegenhangers toe, zodat de kaart er in beide thema's goed uitziet.
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden max-w-sm">
<div class="p-5">
<h3 class="text-lg font-bold text-gray-900 dark:text-white">Dark-Mode Ready</h3>
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
This card adapts automatically to the user's preferred color scheme.
</p>
</div>
<div class="border-t border-gray-100 dark:border-gray-700 px-5 py-3 flex justify-end">
<button class="text-sm font-semibold text-blue-500 hover:text-blue-400">Action</button>
</div>
</div>Een klikbare kaart als link
Als je een volledige kaart in een <a>-tag plaatst, wordt het hele oppervlak klikbaar. Combineer block met de kaartstijlen zodat het ankerelement zich als een blok-element gedraagt. Gebruik group op het ankerelement om hovereffecten voor onderliggende elementen mogelijk te maken — bijvoorbeeld group-hover:text-blue-600 op de titel, zodat de kleur verandert wanneer je ergens op de kaart hovert.
Met dit patroon vermijd je geneste interactieve elementen (knoppen in links) en blijft de kaart toegankelijk als één eenheid die focus kan krijgen.
<a href="/post/tailwind-tips" class="group block bg-white rounded-xl shadow-md overflow-hidden
hover:shadow-xl transition-shadow duration-200">
<img src="photo.jpg" alt="" class="w-full h-48 object-cover" />
<div class="p-5">
<h3 class="text-lg font-bold text-gray-900 group-hover:text-blue-600 transition-colors">
Tailwind Tips and Tricks
</h3>
<p class="mt-2 text-sm text-gray-500">Click anywhere on this card to navigate.</p>
</div>
</a>Snelle controle
Test je begrip van de concepten uit Tailwind CSS Mastery in deze les.
Samenvatting van de les
In deze les heb je geleerd hoe je een kaartstructuur met drie zones (afbeeldingsheader, hoofdtekst en voettekst) maakt met afgeronde hoeken en schaduwutilities; hoe je hovereffecten waarbij een kaart omhoogkomt combineert met hover:shadow-xl hover:-translate-y-1 transition-all; en hoe je responsieve kaartrasters maakt met grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6. Hierna verkennen we badge- en tagcomponenten.
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 “Patronen voor cardcomponenten” gratis?
Ja — de volledige tekst van “Patronen voor cardcomponenten” 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 “Patronen voor cardcomponenten”?
Bouw cards met afbeeldingsheaders, contentgedeelten en actiefooters met flex- en gridindelingen binnen een afgeronde container met schaduw. 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 2 van 4.
Hoe lang duurt de les “Patronen voor cardcomponenten”?
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
- Buttonvarianten en -statussen
- Patronen voor cardcomponenten
- Badge- en tagcomponenten
- Componenten combineren in een UI