Mönster för kortkomponenter
Bygg kort med bildhuvuden, innehåll och åtgärdsfält med flex- och gridlayouter i en rundad container med skugga.
Mönster för kortkomponenter är en gratis lektion i Tailwind CSS Academy på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Tailwind CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Tailwind CSS Academy innehåller totalt 4 lektioner.
Vad kännetecknar en card-komponent
Ett card är en fristående rektangulär yta som grupperar relaterat innehåll. Cards innehåller vanligtvis tre zoner: en header (ofta en bild eller en färgad remsa), en body (rubrik, beskrivning och metadata) samt en valfri footer (åtgärdsknappar).
I Tailwind använder cardens grundskal bg-white rounded-xl shadow-md overflow-hidden för att skapa en vit yta med rundade hörn, en skugga som ger djup och beskurna hörn för eventuella inre bilder.
<div class="bg-white rounded-xl shadow-md overflow-hidden max-w-sm">
<!-- Card content goes here -->
</div>Card med bildheader
Det vanligaste card-mönstret har en bildheader som sträcker sig över hela bredden ovanför innehållet. Använd w-full h-48 object-cover på <img>-taggen för att fylla bredden och beskära höjden konsekvent, oavsett originalbildens mått.
Detta säkerställer att alla cards i ett rutnät ser enhetliga ut även när källbilderna har olika bildförhållanden.
<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>Typografisk hierarki i cardens brödtext
Skapa en tydlig typografisk hierarki i cardens body för att leda läsarens blick. En fet rubrik med text-lg font-bold text-gray-900 drar till sig uppmärksamhet, medan en underrubrik använder text-sm text-gray-500 för sekundär information.
Använd mt-2 mellan elementen för en konsekvent vertikal rytm och line-clamp-2 (från typography-pluginet) för att korta långa beskrivningar till exakt två rader, så att cardens höjd förblir enhetlig i ett rutnät.
<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>Card-footer med åtgärder
kortets sidfot innehåller åtgärdsknappar eller metadata som författare och datum. Använd border-t border-gray-100 för att visuellt skilja sidfoten från innehållet och flex items-center justify-between px-5 py-3 för att fördela innehållet horisontellt.
Den här strukturen med tre zoner (bild, innehåll, sidfot) utgör grunden för produktkort, blogginläggskort och widgetar i kontrollpaneler.
<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>Horisontell kortlayout
För bredare innehållsområden placerar ett horisontellt kort bilden till vänster och innehållet till höger. Använd flex på kortets behållare och w-40 flex-shrink-0 på bildens omslag för att hålla bilden på en fast bredd medan innehållet expanderar.
Det här mönstret passar utmärkt för listor med blogginlägg, sökresultat och aviseringsflöden.
<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>Hovereffekter för kort
En hovereffekt på ett kort signalerar interaktivitet och förbättrar användarupplevelsen. Ett vanligt mönster är att lyfta kortet med en större skugga vid hover med hjälp av hover:shadow-xl, kombinerat med en mjuk förflyttning uppåt med hover:-translate-y-1.
Klassen transition-all duration-200 ser till att både skuggan och transformeringen animeras mjukt. Lägg till cursor-pointer för att förstärka att kortet går att klicka på.
<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>Kortlayout i rutnät
Kort visas nästan alltid i rutnät. Använd grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 på ett omslagselement för att skapa ett responsivt rutnät med en kolumn på mobiler, två på surfplattor och tre på datorer.
Verktygsklassen gap-6 lägger till ett konsekvent mellanrum mellan korten utan att marginaler behöver användas på enskilda kort, vilket annars skulle störa rutnätets justering.
<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>Profil- och avatarkort
Ett profilkort centrerar en avatar, ett namn, en roll och sociala länkar. Använd ett färgat band i sidhuvudet med h-24 bg-gradient-to-r from-blue-500 to-purple-600 och placera sedan avataren så att den överlappar bandet med en negativ toppmarginal: -mt-12 mx-auto på en rund bild.
Den här förskjutningstekniken skapar en skiktad visuell effekt utan någon absolut 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>Kort för statistik och mätvärden
Statistikkort visar ett enda viktigt mätvärde med en ikon, ett tal och en etikett. Håll dem kompakta med utfyllnaden p-5 och använd flex items-center justify-between för att placera ikonen till höger och statistiken till vänster.
Färgkoda ikonens bakgrund för att skilja mätvärden åt vid en snabb blick. En grön ikon för intäkter, blå för användare och orange för konverteringar skapar en kontrollpanel som går att överblicka direkt.
<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>Kortdesign för mörkt läge
Kort i mörkt läge kräver inverterade bakgrunder och justerade textfärger. Använd dark:bg-gray-800 i stället för bg-white, dark:text-white för rubriker och dark:text-gray-400 för sekundär text.
Avdelare som bygger på kantlinjer behöver också justeras: dark:border-gray-700 ersätter border-gray-100. Tillämpa alla mörka varianter tillsammans med deras ljusa motsvarigheter så att kortet ser bra ut i båda temana.
<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>Klickbart kort som länk
Om ett helt kort omsluts av en <a>-tagg blir hela ytan klickbar. Kombinera block med kortets stilar så att ankaret fungerar som ett blockelement. Använd group på ankaret för att aktivera hovereffekter på underordnade element – till exempel ändrar group-hover:text-blue-600 på titeln färg när muspekaren hålls över valfri del av kortet.
Det här mönstret undviker nästlade interaktiva element (knappar inuti länkar) och gör kortet till en enda åtkomlig fokuserbar enhet.
<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>Snabbtest
Testa dina kunskaper om koncepten i Tailwind CSS Mastery från den här lektionen.
Sammanfattning av lektionen
I den här lektionen lärde du dig: kortets struktur med tre zoner (bildhuvud, innehåll och sidfot), byggd med verktygsklasser för rundade hörn och skuggor; lyfteffekter vid hover som kombinerar hover:shadow-xl hover:-translate-y-1 transition-all; samt responsiva kortrutnät med grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6. Härnäst utforskar vi brick- och taggkomponenter.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 30
- Lektioner
- 120
Vanliga frågor
Är lektionen ”Mönster för kortkomponenter” gratis?
Ja – hela texten till ”Mönster för kortkomponenter” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Tailwind CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Tailwind CSS Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Mönster för kortkomponenter”?
Bygg kort med bildhuvuden, innehåll och åtgärdsfält med flex- och gridlayouter i en rundad container med skugga. Ni övar på Tailwind CSS Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Tailwind CSS Academy?
Du behöver inga förkunskaper. Utbildningen i Tailwind CSS Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.
Hur lång tid tar lektionen ”Mönster för kortkomponenter”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Tailwind CSS Academy-lektionen?
Ja. Varje Tailwind CSS Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Knappvarianter och tillstånd
- Mönster för kortkomponenter
- Badge- och taggkomponenter
- Kombinera komponenter i ett användargränssnitt