Card2

The Card component provides a versatile container for displaying related content. It uses semantic HTML and ensures proper heading structure and content organization.

Basic Usage

https://

Badge

Card 2.1

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Card 2.2

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Card 2.3

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

---
import { Card2, ItemGrid0 } from '@yatoday/astro-ui/astro';
---

<ItemGrid0 columns={3}>
  <Card2
    title="Card 2.1"
    description="Lorem ipsum dolor sit amet, consectetur adipisicing elit."
    image={{src: '~/assets/images/800x800.svg', alt: ''}}
    url="/"
  >
    <Fragment slot="badge">
      <div className="text-green-700 font-semibold animate-pulse">Badge</div>
    </Fragment>
  </Card2>
  <Card2
    title="Card 2.2"
    description="Lorem ipsum dolor sit amet, consectetur adipisicing elit."
    icon="tabler:home"
    url="/"
  />
  <Card2 title="Card 2.3" description="Lorem ipsum dolor sit amet, consectetur adipisicing elit." />
</ItemGrid0>

Multi-Image Gallery

Card2 supports multiple images with an interactive hover gallery. When you pass an array of images to the image prop, the card displays invisible vertical hover zones. Moving your mouse across the image area switches between images, similar to Instagram or Tinder photo galleries.

Multi-image hover gallery

https://

Product with Gallery

Hover over the image and move left to right to see all photos.

Sale

Two Images

Card with two images in the gallery.

Single Image

Falls back to standard single image display.

---
import { Card2, ItemGrid0 } from '@yatoday/astro-ui/astro';
---

<ItemGrid0 columns={3}>
  <Card2
    title="Product with Gallery"
    description="Hover over the image and move left to right to see all photos."
    image={[
      {src: '/images/product-1.jpg', alt: 'View 1'},
      {src: '/images/product-2.jpg', alt: 'View 2'},
      {src: '/images/product-3.jpg', alt: 'View 3'},
    ]}
    url="/product"
  />
  <Card2
    title="Two Images"
    description="Card with two images in the gallery."
    image={[
      {src: '/images/front.jpg', alt: 'Front view'},
      {src: '/images/back.jpg', alt: 'Back view'},
    ]}
    url="/product"
  >
    <Fragment slot="badgeTopRight">
      <div className="bg-red-500 text-white text-xs px-2 py-1 rounded">Sale</div>
    </Fragment>
  </Card2>
</ItemGrid0>

How it works

• The image area is divided into equal vertical sections (one per image)
• Hovering over each section shows the corresponding image
• Small indicator dots at the bottom show which image is active
• Images transition with a smooth 200ms opacity animation
• When the mouse leaves the card, it resets to the first image
• The first image loads eagerly, subsequent images lazy-load for performance

Svelte Usage

<script>
  import { Card2 } from '@yatoday/astro-ui/svelte';
</script>

<Card2
  title="Product Gallery"
  description="Interactive image gallery on hover."
  image={[
    {src: '/images/view-1.jpg', alt: 'View 1'},
    {src: '/images/view-2.jpg', alt: 'View 2'},
    {src: '/images/view-3.jpg', alt: 'View 3'},
  ]}
  url="/product"
/>

Props

Both callToAction and URL are supported. The button will not be displayed.

Notes

• Pass a single Image object for a single image, or an array of Image objects for a gallery
• If the array has only one item, it behaves like a single image
• The multi-image gallery works with Astro page transitions (View Transitions API)
• Gallery feature is also available in Card1, Card3, and Card6 components