Tailwind CSS Cards

Build responsive Tailwind CSS cards with headers, footers, images, overlays, hover animations, horizontal layouts, card groups, alerts, and panels.

Default card

Use a basic card with media, text content, and supporting actions.

Cards assume no specific width to start, so they'll be 100% wide unless otherwise stated.

<div class="flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
                            <img class="w-full h-auto rounded-t-xl" src="https://images.unsplash.com/photo-1680868543815-b8666dba60f7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&q=80" alt="Card Image">
                            <div class="p-4  ">
                              <h3 class="font-semibold text-foreground">
                                Card title
                              </h3>
                              <p class="mt-1 text-muted-foreground-1">
                                Some quick example text to build on the card title and make up the bulk of the card's content.
                              </p>
                              <a class="mt-2 py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                                Go somewhere
                              </a>
                            </div>
                          </div>

Content types

Cards can hold different combinations of text, media, headers, footers, and actions.

Body

Use the card body for the main content area, including text and supporting actions.

Simple card

Use a body-only card when you do not need a separate header or footer.

<div class="flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
                            <div class="p-4  ">
                              <h3 class="font-semibold text-foreground">
                                Card title
                              </h3>
                              <p class="mt-1 text-xs font-medium uppercase text-muted-foreground-1">
                                Card subtitle
                              </p>
                              <p class="mt-1 text-muted-foreground-1">
                                Some quick example text to build on the card title and make up the bulk of the card's content.
                              </p>
                              <a class="mt-3 inline-flex items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent text-primary decoration-2 hover:text-primary-hover hover:underline focus:underline focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                                Card link
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg>
                              </a>
                            </div>
                          </div>

Header and footer

Add a header, footer, or both when the card needs clearer structure.

<div class="flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
                            <div class="bg-surface border-b border-card-line rounded-t-xl py-3 px-4">
                              <p class="text-sm text-muted-foreground-1">
                                Featured
                              </p>
                            </div>
                            <div class="p-4  ">
                              <h3 class="font-semibold text-foreground">
                                Card title
                              </h3>
                              <p class="mt-1 text-muted-foreground-1">
                                Some quick example text to build on the card title and make up the bulk of the card's content.
                              </p>
                              <a class="mt-3 inline-flex items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent text-primary decoration-2 hover:text-primary-hover hover:underline focus:underline focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                                Card link
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg>
                              </a>
                            </div>
                          </div>

Add a footer to separate secondary actions or summary details from the card body.

<div class="flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
                            <div class="p-4  ">
                              <h3 class="font-semibold text-foreground">
                                Card title
                              </h3>
                              <p class="mt-1 text-muted-foreground-1">
                                Some quick example text to build on the card title and make up the bulk of the card's content.
                              </p>
                              <a class="mt-3 inline-flex items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent text-primary decoration-2 hover:text-primary-hover hover:underline focus:underline focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                                Card link
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg>
                              </a>
                            </div>
                            <div class="bg-surface border-t border-card-line rounded-b-xl py-3 px-4">
                              <p class="text-sm text-muted-foreground-1">
                                Last updated 5 mins ago
                              </p>
                            </div>
                          </div>

Sizes

Small

Use a compact card size for denser lists, side panels, or secondary content.

<div class="flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
                            <div class=" p-3 ">
                              <h3 class="font-semibold text-foreground">
                                Card title
                              </h3>
                              <p class="mt-1 text-muted-foreground-1">
                                Some quick example text to build on the card title and make up the bulk of the card's content.
                              </p>
                              <a class="mt-3 inline-flex items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent text-primary decoration-2 hover:text-primary-hover hover:underline focus:underline focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                                Card link
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg>
                              </a>
                            </div>
                          </div>

Default

Use the default card size for most content blocks and everyday layouts.

<div class="flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
                            <div class="p-4  ">
                              <h3 class="font-semibold text-foreground">
                                Card title
                              </h3>
                              <p class="mt-1 text-muted-foreground-1">
                                Some quick example text to build on the card title and make up the bulk of the card's content.
                              </p>
                              <a class="mt-3 inline-flex items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent text-primary decoration-2 hover:text-primary-hover hover:underline focus:underline focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                                Card link
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg>
                              </a>
                            </div>
                          </div>

Large

Increase the card size when the content needs more breathing room or visual emphasis.

<div class="flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
                            <div class="  p-4 sm:p-6">
                              <h3 class="font-semibold text-foreground">
                                Card title
                              </h3>
                              <p class="mt-1 text-muted-foreground-1">
                                Some quick example text to build on the card title and make up the bulk of the card's content.
                              </p>
                              <a class="mt-3 inline-flex items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent text-primary decoration-2 hover:text-primary-hover hover:underline focus:underline focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                                Card link
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg>
                              </a>
                            </div>
                          </div>

Add navigation in the card header when the panel needs tabs or quick section switching.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" class="relative min-h-full h-full">
                            <head>
                              <meta charset="utf-8">
                              <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                              <title>Preline UI</title>
                              <link rel="shortcut icon" href="../../favicon.ico">
                              <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                              <link rel="stylesheet" href="../../assets/css/main.min.css">
                            </head>
                            <body class="w-full mx-auto mt-2">
                          <div class="flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
                            <div class="bg-surface border-b border-card-line rounded-t-xl pt-3 px-4 md:pt-4 md:px-5">
                              <nav class="flex gap-x-2">
                                <a class="-mb-px py-3 px-4 text-sm font-medium text-center bg-layer border border-line-2 border-b-transparent text-foreground rounded-t-lg focus:outline-hidden focus:z-10" href="#">
                                  Active
                                </a>
                                <a class="-mb-px py-3 px-4 text-sm font-medium text-center border-b border-line-2 text-muted-foreground-1 rounded-t-lg hover:text-primary-hover focus:outline-hidden focus:text-primary-focus focus:z-10" href="#">
                                  Link
                                </a>
                                <a class="-mb-px py-3 px-4 text-sm font-medium text-center border-b border-line-2 text-muted-foreground-1 rounded-t-lg hover:text-primary-hover focus:outline-hidden focus:text-primary-focus focus:z-10" href="#">
                                  Link
                                </a>
                              </nav>
                            </div>
                            <div class="p-4 sm:py-7 text-center">
                              <h3 class="font-semibold text-foreground">
                                Card title
                              </h3>
                              <p class="mt-2 text-muted-foreground-1">
                                With supporting text below as a natural lead-in to additional content.
                              </p>
                              <a class="mt-3 py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                                Go somewhere
                              </a>
                            </div>
                          </div>
                          
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

<div class="flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
                            <div class="bg-surface border-b border-card-line rounded-t-xl pt-3 px-4 md:pt-4 md:px-5">
                              <nav class="flex gap-x-2">
                                <a class="-mb-px py-3 px-4 text-sm font-medium text-center bg-layer border border-line-2 border-b-transparent text-foreground rounded-t-lg focus:outline-hidden focus:z-10" href="#">
                                  Active
                                </a>
                                <a class="-mb-px py-3 px-4 text-sm font-medium text-center border-b border-line-2 text-muted-foreground-1 rounded-t-lg hover:text-primary-hover focus:outline-hidden focus:text-primary-focus focus:z-10" href="#">
                                  Link
                                </a>
                                <a class="-mb-px py-3 px-4 text-sm font-medium text-center border-b border-line-2 text-muted-foreground-1 rounded-t-lg hover:text-primary-hover focus:outline-hidden focus:text-primary-focus focus:z-10" href="#">
                                  Link
                                </a>
                              </nav>
                            </div>
                            <div class="p-4 sm:py-7 text-center">
                              <h3 class="font-semibold text-foreground">
                                Card title
                              </h3>
                              <p class="mt-2 text-muted-foreground-1">
                                With supporting text below as a natural lead-in to additional content.
                              </p>
                              <a class="mt-3 py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                                Go somewhere
                              </a>
                            </div>
                          </div>

Swap the tab-like navigation for a <select> on mobile when horizontal space is limited.

<div class="hidden sm:block">
                                <nav class="relative z-0 flex rounded-xl divide-x divide-card-divider">
                                  <a class="relative min-w-0 flex-1 bg-layer p-4 border-b-2 border-b-primary text-foreground rounded-ss-xl text-sm font-medium text-center overflow-hidden hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus focus:z-10" aria-current="page" href="#">
                                    My Account
                                  </a>

<a class="relative min-w-0 flex-1 bg-layer p-4 border-b border-b-line-2 text-muted-foreground-1 hover:text-primary-hover text-sm font-medium text-center overflow-hidden hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus focus:z-100" href="#">
                                    Company
                                  </a>

<a class="relative min-w-0 flex-1 bg-layer p-4 border-b border-b-line-2 text-muted-foreground-1 hover:text-primary-hover rounded-se-xl text-sm font-medium text-center overflow-hidden hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus focus:z-100" href="#">
                                    Billing
                                  </a>
                                </nav>
                              </div>

<div class="p-4 sm:py-7 text-center">
                                <h3 class="font-semibold text-foreground">
                                  Card title
                                </h3>
                                <p class="mt-2 text-muted-foreground-1">
                                  With supporting text below as a natural lead-in to additional content.
                                </p>
                                <a class="mt-3 py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                                  Go somewhere
                                </a>
                              </div>
                            </div>
                            
                                <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                              </body>
                            </html>

<div class="flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
                              
                              <div class="sm:hidden">
                                <label for="hs-card-nav" class="sr-only">Select a nav</label>
                                <select name="hs-card-nav" id="hs-card-nav" class="block w-full border-t-0 border-x-0 border-line-2 rounded-t-xl focus:outline-hidden focus:ring-0 disabled:opacity-50 disabled:pointer-events-none">
                                  <option selected>My Account</option>
                                  <option>Company</option>
                                  <option>Team Members</option>
                                  <option>Billing</option>
                                </select>
                              </div>

Images

Cards include a few options for working with images. Choose from appending “image caps” at either end of a card, overlaying images with card content, or simply embedding the image in a card.

Top image

Place an image at the top to create a classic media card layout.

<div class="flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
                            <img class="w-full h-auto rounded-t-xl" src="https://images.unsplash.com/photo-1680868543815-b8666dba60f7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&q=80" alt="Card Image">
                            <div class="  p-4 sm:p-6">
                              <h3 class="font-semibold text-foreground">
                                Card title
                              </h3>
                              <p class="mt-1 text-muted-foreground-1">
                                Some quick example text to build on the card title and make up the bulk of the card's content.
                              </p>
                              <p class="mt-5 text-xs text-muted-foreground-1">
                                Last updated 5 mins ago
                              </p>
                            </div>
                          </div>

Bottom image

Place the image at the bottom when the content should lead before the media.

<div class="flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
                            <div class="  p-4 sm:p-6">
                              <h3 class="font-semibold text-foreground">
                                Card title
                              </h3>
                              <p class="mt-1 text-muted-foreground-1">
                                Some quick example text to build on the card title and make up the bulk of the card's content.
                              </p>
                              <p class="mt-5 text-xs text-muted-foreground-1">
                                Last updated 5 mins ago
                              </p>
                            </div>
                            <img class="w-full h-auto rounded-b-xl" src="https://images.unsplash.com/photo-1680868543815-b8666dba60f7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&q=80" alt="Card Image">
                          </div>

Image overlays

Use the image as the card background and layer text on top when you need a more visual layout.

<div class="relative bg-card border border-card-line shadow-2xs rounded-xl">
                              <img class="w-full h-auto rounded-xl" src="https://images.unsplash.com/photo-1680868543815-b8666dba60f7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=560&q=80" alt="Card Image">
                              <div class="absolute top-0 inset-s-0 inset-e-0">
                                <div class="p-4">
                                  <h3 class="font-semibold text-foreground">
                                    Card title
                                  </h3>
                                  <p class="mt-1 text-muted-foreground-1">
                                    Some quick example text to build on the card title and make up the bulk of the card's content.
                                  </p>
                                  <p class="mt-5 text-xs text-muted-foreground-1">
                                    Last updated 5 mins ago
                                  </p>
                                </div>
                              </div>
                            </div>

Attention needed

Note that content should not be larger than the height of the image. If content is larger than the image the content will be displayed outside the image.

Animations

Image scaling animation on hover

Scale the card image on hover to add motion without changing the card layout.

<a class="flex flex-col group bg-card border border-card-line shadow-2xs rounded-xl overflow-hidden hover:shadow-lg focus:outline-hidden focus:shadow-lg transition" href="#">
                            <div class="relative pt-[50%] sm:pt-[60%] lg:pt-[80%] rounded-t-xl overflow-hidden">
                              <img class="size-full absolute top-0 inset-s-0 object-cover group-hover:scale-105 group-focus:scale-105 transition-transform duration-500 ease-in-out rounded-t-xl" src="https://images.unsplash.com/photo-1680868543815-b8666dba60f7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=560&q=80" alt="Card Image">
                            </div>
                            <div class="p-4">
                              <h3 class="font-semibold text-foreground">
                                Card title
                              </h3>
                              <p class="mt-1 text-muted-foreground-1">
                                Some quick example text to build on the card title and make up the bulk of the card's content.
                              </p>
                            </div>
                          </a>

Transition on hover

Animate the card shadow on hover to give the whole surface a stronger interactive feel.

Horizontal

Use a responsive horizontal layout when the image and content should sit side by side on larger screens.

<div class="sm:flex bg-card border border-card-line rounded-xl shadow-2xs">
                            <div class="shrink-0 relative w-full rounded-t-xl overflow-hidden pt-[40%] sm:rounded-s-xl sm:max-w-60 sm:rounded-se-none sm:max-w-20">
                              <img class="size-full absolute top-0 inset-s-0 object-cover" src="https://images.unsplash.com/photo-1680868543815-b8666dba60f7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=560&q=80" alt="Card Image">
                            </div>
                            <div class="flex flex-wrap">
                              <div class="p-4 flex flex-col h-full sm:p-7">
                                <h3 class="font-semibold text-foreground">
                                  Card title
                                </h3>
                                <p class="mt-1 text-muted-foreground-1">
                                  Some quick example text to build on the card title and make up the bulk of the card's content.
                                </p>
                                <div class="mt-5 sm:mt-auto">
                                  <p class="text-xs text-muted-foreground-1">
                                    Last updated 5 mins ago
                                  </p>
                                </div>
                              </div>
                            </div>
                          </div>

Card layout

Card group

Use card groups to render cards as a single, attached element with equal width and height columns.

<div class="flex flex-col flex-1 bg-card">
                              <img class="w-full h-auto" src="https://images.unsplash.com/photo-1680868543815-b8666dba60f7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&q=80" alt="Card Image">
                              <div class="p-4 flex-1 md:p-5">
                                <h3 class="font-semibold text-foreground">
                                  Card title
                                </h3>
                                <p class="mt-1 text-muted-foreground-1">
                                  This card has supporting text below as a natural lead-in to additional content.
                                </p>
                              </div>
                              <div class="p-4 border-t border-card-footer">
                                <p class="text-xs text-muted-foreground-1">
                                  Last updated 5 mins ago
                                </p>
                              </div>
                            </div>

<div class="flex flex-col flex-1 bg-card">
                              <img class="w-full h-auto sm:rounded-se-xl" src="https://images.unsplash.com/photo-1680868543815-b8666dba60f7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&q=80" alt="Card Image">
                              <div class="p-4 flex-1 md:p-5">
                                <h3 class="font-semibold text-foreground">
                                  Card title
                                </h3>
                                <p class="mt-1 text-muted-foreground-1">
                                  This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
                                </p>
                              </div>
                              <div class="p-4 border-t border-card-footer">
                                <p class="text-xs text-muted-foreground-1">
                                  Last updated 5 mins ago
                                </p>
                              </div>
                            </div>
                            
                          </div>
                          
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

<div class="grid border border-card-line rounded-xl shadow-2xs divide-y overflow-hidden sm:flex sm:divide-y-0 sm:divide-x divide-card-divider">
                            
                            <div class="flex flex-col flex-1 bg-card">
                              <img class="w-full h-auto rounded-t-xl sm:rounded-se-none" src="https://images.unsplash.com/photo-1680868543815-b8666dba60f7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&q=80" alt="Card Image">
                              <div class="p-4 flex-1 md:p-5">
                                <h3 class="font-semibold text-foreground">
                                  Card title
                                </h3>
                                <p class="mt-1 text-muted-foreground-1">
                                  This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
                                </p>
                              </div>
                              <div class="p-4 border-t border-card-footer">
                                <p class="text-xs text-muted-foreground-1">
                                  Last updated 5 mins ago
                                </p>
                              </div>
                            </div>

Top bordered card

Add a colored top border to create a stronger status or category accent on the card.

<div class="flex flex-col bg-card border border-card-line border-t-4 border-t-primary shadow-2xs rounded-xl">
                            <div class="p-4 md:p-5">
                              <h3 class="font-semibold text-foreground">
                                Card title
                              </h3>
                              <p class="mt-2 text-muted-foreground-1">
                                With supporting text below as a natural lead-in to additional content.
                              </p>
                              <a class="mt-3 inline-flex items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent text-primary decoration-2 hover:text-primary-hover hover:underline focus:underline focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                                Card link
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                              </a>
                            </div>
                          </div>

Panel actions

Place quick panel actions in the card header for things like filters, menus, or settings.

Requires JS

Note that this component requires the use of our Tooltip plugin, else you can skip this message if you are already using Preline UI as a bundle.

Learn more

<div class="flex items-center gap-x-1">
                                <div class="hs-tooltip inline-block">
                                  <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-muted-foreground-1 hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/></svg>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md" role="tooltip">
                                      Refresh
                                    </span>
                                  </button>
                                </div>
                                <div class="hs-tooltip inline-block">
                                  <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-muted-foreground-1 hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-6-6m6 6v-4.8m0 4.8h-4.8"/><path d="M3 16.2V21m0 0h4.8M3 21l6-6"/><path d="M21 7.8V3m0 0h-4.8M21 3l-6 6"/><path d="M3 7.8V3m0 0h4.8M3 3l6 6"/></svg>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md" role="tooltip">
                                      Fullscreen
                                    </span>
                                  </button>
                                </div>
                                <div class="hs-tooltip inline-block">
                                  <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-muted-foreground-1 hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md" role="tooltip">
                                      Close
                                    </span>
                                  </button>
                                </div>
                              </div>
                              
                            </div>

<div class="p-4">
                              <p class="mt-2 text-muted-foreground-1">
                                With supporting text below as a natural lead-in to additional content.
                              </p>
                              <a class="mt-3 inline-flex items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent text-primary decoration-2 hover:text-primary-hover hover:underline focus:underline focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                                Card link
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                              </a>
                            </div>
                            
                          </div>
                          
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

<div class="flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
                            
                            <div class="py-3 px-4 flex justify-between items-center border-b border-card-header rounded-t-xl">
                              <h3 class="font-semibold text-foreground">
                                Card action
                              </h3>

With alert

Embed an alert inside a card to surface important status or feedback inline.

<div class="flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
                              <div class="py-3 px-4 border-b border-card-header rounded-t-xl">
                                <p class="mt-1 text-sm text-muted-foreground-1">
                                  Featured
                                </p>
                              </div>
                              <div class="py-3 px-4 bg-surface border-b border-card-divider text-sm text-foreground">
                                <span class="font-semibold">Attention needed!</span> This is an alert box.
                              </div>
                              <div class="p-4">
                                <h3 class="font-semibold text-foreground">
                                  Card title
                                </h3>
                                <p class="mt-2 text-muted-foreground-1">
                                  With supporting text below as a natural lead-in to additional content.
                                </p>
                                <a class="mt-3 inline-flex items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent text-primary decoration-2 hover:text-primary-hover hover:underline focus:underline focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                                  Card link
                                  <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                                </a>
                              </div>
                            </div>

Centered body content

Center the card body content for confirmation states, promotions, or compact summaries.

<div class="min-h-60 flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
                            <div class="flex flex-auto flex-col justify-center items-center p-4 md:p-5">
                              <h3 class="font-semibold text-foreground">
                                Card title
                              </h3>
                              <p class="mt-2 text-muted-foreground-1">
                                With supporting text below as a natural lead-in to additional content.
                              </p>
                              <a class="mt-3 inline-flex items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent text-primary decoration-2 hover:text-primary-hover hover:underline focus:underline focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                                Card link
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                              </a>
                            </div>
                          </div>

Empty state

Use an empty state card when there is no data yet and the interface needs guidance or next steps.

<div class="min-h-60 flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
                            <div class="p-4 flex flex-auto flex-col justify-center items-center">
                              <svg class="size-10 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
                                <line x1="22" x2="2" y1="12" y2="12"/>
                                <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/>
                                <line x1="6" x2="6.01" y1="16" y2="16"/>
                                <line x1="10" x2="10.01" y1="16" y2="16"/>
                              </svg>
                              <p class="mt-2 text-sm text-foreground">
                                No data to show
                              </p>
                            </div>
                          </div>

Scrollable body

Make the card body scrollable when the content should stay contained within a fixed-height panel.

<!DOCTYPE html>
                            <html lang="en" dir="ltr" class="relative min-h-full h-full">
                              <head>
                                <meta charset="utf-8">
                                <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                                <title>Preline UI</title>
                                <link rel="shortcut icon" href="../../favicon.ico">
                                <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                                <link rel="stylesheet" href="../../assets/css/main.min.css">
                              </head>
                              <body class="w-full max-w-2xl mx-auto mt-4">
                            <div class="flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
                              <div class="p-4 my-1.5 me-1.5 h-80 overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                                <h3 class="font-semibold text-foreground">
                                  Card title
                                </h3>
                                <p class="mt-3 text-muted-foreground-1">
                                  This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
                                </p>
                                <p class="mt-3 text-muted-foreground-1">
                                  This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
                                </p>
                                <p class="mt-3 text-muted-foreground-1">
                                  This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
                                </p>
                              </div>
                            </div>
                            
                                <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                              </body>
                            </html>

<div class="flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
                              <div class="p-4 my-1.5 me-1.5 h-80 overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                                <h3 class="font-semibold text-foreground">
                                  Card title
                                </h3>
                                <p class="mt-3 text-muted-foreground-1">
                                  This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
                                </p>
                                <p class="mt-3 text-muted-foreground-1">
                                  This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
                                </p>
                                <p class="mt-3 text-muted-foreground-1">
                                  This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
                                </p>
                              </div>
                            </div>