Card

Container component with image, body, and footer sections. Works for product cards, article previews, or any rectangular content with image + text layout. Available in plain and hover-scale variants.

Live Demo

Lorem Ipsum

Magna magna mollit esse incididunt deserunt eiusmod ad id ullamco cupidatat laborum enim nostrud. Irure officia occaecat adipisicing amet labore et incididunt exercitation.

€599.00

Lorem Ipsum

Magna magna mollit esse incididunt deserunt eiusmod ad id ullamco cupidatat laborum enim nostrud.

€599.00

Lorem Ipsum

Magna magna mollit esse incididunt deserunt eiusmod ad id ullamco cupidatat laborum enim nostrud.

€599.00

<div class="bg-white border border-gray-200 rounded-lg shadow overflow-hidden">
<a href="#" class="aspect-ratio-video block relative">
  <img src="https://placehold.co/826x620" alt="Image Alt" class="h-full w-full object-cover" />
</a>
<div class="p-5">
  <h5 class="mb-2 text-2xl font-bold leading-none">Lorem Ipsum</h5>
  <p class="mb-3 text-gray-700">Magna magna mollit esse incididunt deserunt eiusmod ad id ullamco cupidatat laborum enim nostrud.</p>
  <div class="flex items-center justify-between my-4">
    <span class="text-2xl font-bold">€599.00</span>
  </div>
  <a href="#" class="btn-tertiary btn-xs btn-medium-hover">
    Read more
    <span class="i-flowbite-arrow-right-outline ml-2 text-2xl leading-none"></span>
  </a>
</div>
</div>

Grid example

Brand

Product Name

€149

~~€199~~

Brand

Product Name

€149

~~€199~~

Brand

Product Name

€149

~~€199~~

Brand

Product Name

€149

~~€199~~

Brand

Product Name

€149

~~€199~~

Brand

Product Name

€149

~~€199~~

<div class="w-fit mx-auto grid grid-cols-1 lg:grid-cols-3 md:grid-cols-2 justify-items-center justify-center gap-y-20 gap-x-14 mt-10 mb-5 ">
  <div class="w-72 bg-white shadow-md rounded-xl duration-500 hover:scale-105 hover:shadow-xl">
      <a href="#">
          <img src="https://picsum.photos/600/500/?random" alt="Product" class="img--1/1 rounded-t-xl" />
          <div class="px-4 py-3 w-72">
              <span class="text-gray-400 mr-3 uppercase text-xs">Brand</span>
              <p class="text-lg font-bold text-black truncate block capitalize">Product Name</p>
              <div class="flex items-center">
                  <p class="text-lg font-semibold text-black cursor-auto my-3">€149</p>
                  <del>
                      <p class="text-sm text-gray-600 cursor-auto ml-2">€199</p>
                  </del>
                  <Icon name="octicon:info-24" class="ml-auto" />
              </div>
          </div>
      </a>
  </div>
</div>

Card with skewed background

Skewed background with CSS & SVG.

Officia deserunt commodo sit eiusmod
Ullamco qui minim anim aliqua ex sunt irure aliqua irure ullamco tempor laborum non sit. Fugiat ipsum cillum deserunt proident esse elit.

Generic Card Shortcuts

Simple card layout using SDS shortcut classes — works in any HTML environment.

Card title

Card description text goes here. Add any content you need inside the body.

Footer infoRead more

Hover card

This card scales on hover. Uses card-hover which composes from card.

<div class="card">
<img class="card-image" src="..." alt="..." />
<div class="card-body">
  <h3 class="text-xl font-bold">Card title</h3>
  <p class="text-slate-light text-sm">Description text.</p>
</div>
<div class="card-footer">
  <span class="text-sm text-slate-light">Footer info</span>
  <a href="#" class="btn-tertiary btn-xs">Read more</a>
</div>
</div>

<div class="card-hover">
<img class="card-image" src="..." alt="..." />
<div class="card-body">
  <h3 class="text-xl font-bold">Hover card</h3>
  <p class="text-slate-light text-sm">Scales up on hover.</p>
</div>
</div>

Alerts

Notification banners — pure CSS, no JavaScript.

This is an informational message.

Operation completed successfully.

Please review your input before continuing.

An error occurred. Please try again.

<div class="alert-info">
<span class="i-lucide-info text-lg shrink-0"></span>
<span>This is an informational message.</span>
</div>

<div class="alert-success">
<span class="i-lucide-check-circle text-lg shrink-0"></span>
<span>Operation completed successfully.</span>
</div>

<div class="alert-warning">
<span class="i-lucide-triangle-alert text-lg shrink-0"></span>
<span>Please review your input before continuing.</span>
</div>

<div class="alert-error">
<span class="i-lucide-x-circle text-lg shrink-0"></span>
<span>An error occurred. Please try again.</span>
</div>

Props

Prop	Type	Default	Description
`href`	`string`	`—`	Link URL. If provided, wraps entire card in an anchor tag.
`imgSrc`	`string`	`—`	Image source URL. Displays at the top of the card with object-fit coverage.
`imgAlt`	`string`	`—`	Alt text for the card image. Important for accessibility.
`class`	`string`	`—`	Additional CSS classes to apply to the card root element.

Slot

The card body accepts a default slot. Typically contains:

<h5> or <h6> title
<p> description text
<div> with price or metadata
<Button> or other interactive elements

<Card href="#" imgSrc="..." imgAlt="...">
  <h5 class="mb-2 font-bold">Product Name</h5>
  <p class="mb-3">Product description</p>
  <div class="flex justify-between">
    <span class="font-bold">€99.00</span>
    <Button>View</Button>
  </div>
</Card>

CSS Shortcuts

For non-Vue/Astro projects, use these CSS shortcut classes:

Class	Purpose
`card`	Base card container with image, body, footer layout
`card-hover`	Card that scales up on hover (extends `card`)
`card-image`	Image container with object-fit coverage
`card-body`	Content area with padding
`card-footer`	Bottom section with flex layout
`alert-info`	Information banner with icon area
`alert-success`	Success notification banner
`alert-warning`	Warning notification banner
`alert-error`	Error notification banner