Card2

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

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>

Props

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