Cards

Cards are flexible containers for displaying content in a clear and organized way. They support various content types and can be composed of multiple sections including headers, footers, media, and more.

Basic Usage

The simplest card contains a body section with content. You can add titles and subtitles for better content hierarchy.

Basic Card

100%

Simple Card

Supporting text below the title

This is a basic card with just a body section.

<byte-card class="max-w-2xl">
    <byte-card-body>
      <byte-card-title>Simple Card</byte-card-title>
      <byte-card-subtitle>Supporting text below the title</byte-card-subtitle>
      <p class="text-zinc-600 dark:text-zinc-400 mt-4">
        This is a basic card with just a body section.
      </p>
    </byte-card-body>
  </byte-card>

Variants

Cards come in different variants to suit various use cases and interactions.

Card Variants

100%

Basic Card

Default card with subtle shadow

Hover Card

Elevates on hover for interactive content

Flat Card

No shadow, just borders

<div class="space-y-4">
    <byte-card variant="basic" class="max-w-2xl">
      <byte-card-body>
        <byte-card-title>Basic Card</byte-card-title>
        <p>Default card with subtle shadow</p>
      </byte-card-body>
    </byte-card>

    <byte-card variant="hover" class="max-w-2xl">
      <byte-card-body>
        <byte-card-title>Hover Card</byte-card-title>
        <p>Elevates on hover for interactive content</p>
      </byte-card-body>
    </byte-card>

    <byte-card variant="flat" class="max-w-2xl">
      <byte-card-body>
        <byte-card-title>Flat Card</byte-card-title>
        <p>No shadow, just borders</p>
      </byte-card-body>
    </byte-card>
  </div>

Media Content

Cards can include media content like images or videos at the top or bottom.

Card with Media

100%

Media Card

Cards support various media types including images and videos.

<byte-card class="max-w-2xl">
    <byte-card-media 
      src="https://byteui.dev/assets/andrea-fomera-8411cac6.jpg" 
      alt="Card image">
    </byte-card-media>
    <byte-card-body>
      <byte-card-title>Media Card</byte-card-title>
      <p class="mt-2">Cards support various media types including images and videos.</p>
    </byte-card-body>
  </byte-card>

Complete Example

Combine all card components to create rich content containers.

Complete Card

100%

Featured Content

With all card components

This example shows a card with all possible sections: media, header, body, and footer.

Cancel

Save Changes

<byte-card variant="hover" class="max-w-2xl">
    <byte-card-media src="https://byteui.dev/assets/andrea-fomera-8411cac6.jpg" alt="Card image"></byte-card-media>
    <byte-card-header>
      <byte-card-title>Featured Content</byte-card-title>
      <byte-card-subtitle>With all card components</byte-card-subtitle>
    </byte-card-header>
    <byte-card-body>
      <p class="text-zinc-600 dark:text-zinc-400">
        This example shows a card with all possible sections: media, header, body, and footer.
      </p>
    </byte-card-body>
    <byte-card-footer>
      <div class="flex gap-2">
        <byte-button variant="outline">Cancel</byte-button>
        <byte-button>Save Changes</byte-button>
      </div>
    </byte-card-footer>
  </byte-card>

API Reference

Card Container

Property

Type

Default

Description

variant

string

'basic'

'basic', 'hover', 'flat'

href

string

Makes the entire card clickable

Card Media

Property

Type

Default

Description

src

string

URL of the media content

alt

string

Alt text for images

position

string

'top'

'top' or 'bottom'

Best Practices

Use consistent spacing within cards
Keep content concise and focused
Use appropriate variants for interactive content
Include clear calls-to-action in footers
Optimize media content for performance

Pro tip: Make entire cards clickable by adding the href attribute when the card represents a single action.