Card

Flexible content container with image and body sections

Overview

The Card element provides a structured container with image and body sections, perfect for displaying featured content, products, team members, or blog post previews. Cards offer a consistent visual pattern for grouping related information.

When you add a Card to the canvas, it automatically creates two child elements: a card-image container and a card-body container. This structure gives you flexibility to customize each section while maintaining a cohesive card layout.

Cards support three image position variants: top (default vertical layout), left, or right (horizontal layouts). The canHaveChildren: true property allows you to add, remove, or rearrange content within each section.

Settings

Configure the Card element using these Inspector options:

Setting Description Default
Image Position Position of the image relative to the body content. Options: top (stacked), left (horizontal), right (horizontal reversed). top

Default Classes

Cards are created with these default Tailwind classes:

card overflow-hidden

The overflow-hidden class ensures images with rounded corners don't overflow the card boundaries.

Child Elements

Cards automatically create two child elements when added to the canvas. Each can be customized independently.

card-image

Container for the card's image content.

Property Value
Default Classes card-image
Auto-created Child Image element with w-full aspect-video object-cover
Can Have Children Yes – replace or add to the default image

The card-image container automatically includes an Image element with responsive sizing. You can replace this image, add overlays, or include multiple images.

card-body

Container for the card's text content and actions.

Property Value
Default Classes card-body
Auto-created Children Heading (h3), Text, and Button elements
Can Have Children Yes – add, remove, or rearrange content

The card-body includes a pre-configured content structure:

  • Heading (h3) – card-heading font-semibold text-lg
  • Text – card-paragraph mt-2
  • Button – mt-4 inline-block text-blue-600 hover:text-blue-800

Examples

Standard Card with Top Image

The default card layout with image above the content body.

<div class="card overflow-hidden bg-white rounded-lg shadow">
  <div class="card-image">
    <img src="image.jpg" alt="Featured" class="w-full aspect-video object-cover">
  </div>
  <div class="card-body p-6">
    <h3 class="card-heading font-semibold text-lg">Card Title</h3>
    <p class="card-paragraph mt-2 text-gray-600">Card description text.</p>
    <a href="#" class="mt-4 inline-block text-blue-600">Learn More</a>
  </div>
</div>

Card with Left-positioned Image

Set Image Position to "left" for a horizontal card layout, ideal for featured posts or product listings.

<div class="card overflow-hidden bg-white rounded-lg shadow flex flex-row">
  <div class="card-image w-1/3">
    <img src="image.jpg" alt="Product" class="w-full h-full object-cover">
  </div>
  <div class="card-body p-6 flex-1">
    <h3 class="font-semibold text-lg">Horizontal Card</h3>
    <p class="mt-2 text-gray-600">Content beside the image.</p>
  </div>
</div>

Card with Custom Content

Add icons, multiple buttons, or other elements to the card body.

<div class="card overflow-hidden bg-white rounded-lg shadow">
  <div class="card-image">
    <img src="image.jpg" alt="Feature" class="w-full aspect-video object-cover">
  </div>
  <div class="card-body p-6">
    <div class="flex items-center gap-2 mb-2">
      <span class="text-yellow-500"><i class="fas fa-star"></i></span>
      <span class="text-sm text-gray-500">Featured</span>
    </div>
    <h3 class="font-semibold text-lg">Premium Feature</h3>
    <p class="mt-2 text-gray-600">Description with custom icon badge.</p>
    <div class="mt-4 flex gap-2">
      <a href="#" class="btn btn-primary">Get Started</a>
      <a href="#" class="btn btn-outline">Learn More</a>
    </div>
  </div>
</div>
Quick Tip

Use Grid Columns or Flex Columns to display multiple cards in a responsive grid layout. Cards work great in 2, 3, or 4-column arrangements.

Next Steps