Card3

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

https://

NEW

Card 3.1

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Read more

Card 3.2

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Read more

Card 3.3

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Read more

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

<ItemGrid0 columns={3} class="bg-stripe">
  <Card3
    title="Card 3.1"
    description="Lorem ipsum dolor sit amet, consectetur adipisicing elit."
    image={{ src: '~/assets/images/800x800.svg', alt: 'Card 3.1' }}
    callToAction={{ href: '/', text: 'Read more', size: 'sm', variant: 'primary' }}
    badge="QWERT"
  >
    <Fragment slot="badge">
      <div className="text-green-700 font-semibold">NEW</div>
    </Fragment>
  </Card3>
  <Card3
    title="Card 3.2"
    image={{ src: '~/assets/images/800x800.svg', alt: 'Card 3.2' }}
    description="Lorem ipsum dolor sit amet, consectetur adipisicing elit."
    icon="tabler:home"
    callToAction={{ href: '/', text: 'Read more', size: 'sm', variant: 'outline' }}
  />
  <Card3 
    title="Card 3.3"
    image={{ src: '~/assets/images/800x800.svg', alt: 'Card 3.3' }}
    description="Lorem ipsum dolor sit amet, consectetur adipisicing elit."
    callToAction={{ href: '/', text: 'Read more', size: 'sm', variant: 'outline' }}
  />
</ItemGrid0>

Props