Cards — Vanilla

Card component with vanilla HTML. Ensure Rizzo CSS is loaded.

Card component

The Card component provides a flexible container for organizing content with variants, sections, and image support.

Basic usage

The simplest card usage:

Live example

Card Title

This is a basic card with default styling. It uses semantic theme variables and adapts to all themes.

Card variants

Cards support four variants for different visual styles:

Default

Live example

Default Card

Standard card with border and background.

Elevated

Live example

Elevated Card

Card with shadow effect. Hover to see it lift up.

Outlined

Live example

Outlined Card

Transparent background with border. Hover to see accent border.

Filled

Live example

Filled Card

Uses main background color instead of alt background.

Card sections

Use card sections for structured layouts with header, body, and footer:

Live example

Card Title

Card subtitle or description

This is the main content area of the card. It can contain any content you need.

Multiple paragraphs, lists, or other elements work great here.

Section classes

  • card__header — Header section with bottom border
  • card__body — Main content area (flexible, takes remaining space)
  • card__footer — Footer section with top border
  • card__title — Title styling for header
  • card__subtitle — Subtitle styling for header

Card with image

Add an image to your card using the card__image class:

Live example
Image Placeholder

Card with Image

This card includes an image at the top. The image automatically adjusts to the card's border radius.

Complete example

Live example
Featured Image

Complete Card Example

With image, header, body, and footer

This is a complete card example showcasing all features:

  • Image at the top
  • Structured header with title and subtitle
  • Flexible body content
  • Footer with actions

HTML

html html 
<div class="card">
  <h3>Card Title</h3>
  <p>Card content goes here</p>
</div>

<div class="card card--elevated">
  <div class="card__header">
    <h3 class="card__title">Card Title</h3>
    <p class="card__subtitle">Card subtitle or description</p>
  </div>
  <div class="card__body">
    <p>Main content area</p>
  </div>
  <div class="card__footer">
    <button type="button" class="btn btn-primary">Action</button>
    <button type="button" class="btn btn-outline">Cancel</button>
  </div>
</div>

Astro / Svelte: Astro · Svelte