Card6

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 6.1

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Card 6.2

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Bg: Top-Right

Bg: Bottom-Right

Bg: Bottom-Left

Card 6.3

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

---
import { ItemGrid0, Card6 } from '@yatoday/astro-ui/astro';
---
<ItemGrid0 columns={3} class="bg-stripe ">
  <div className="text-white">
    <Card6
      title="Card 6.1"
      description="Lorem ipsum dolor sit amet, consectetur adipisicing elit."
      image={{ src: '~/assets/images/800x800.svg', alt: 'Card 6.1' }}
      callToAction={{ href: '/' }}
      badge="Badge"
    >
      <!-- or -->
      <Fragment slot="badge">
        <Badge>Badge</Badge>
      </Fragment>
    </Card6>
  </div>
  <div className="text-white">
    <Card6
      title="Card 6.2"
      description="Lorem ipsum dolor sit amet, consectetur adipisicing elit."
      image={{ src: '~/assets/images/800x800.svg', alt: 'Card 6.2' }}
    />
  </div>
  <Card6
    title="Card 6.3"
    description="Lorem ipsum dolor sit amet, consectetur adipisicing elit."
    callToAction={{ href: '/' }}
    classes={{container: 'dark:text-white text-slate-800'}}
    badgeBottomLeft="Bg: Bottom-Left"
    badgeTopRight="Bg: Top-Right"
    badgeBottomRight="Bg: Bottom-Right" 
  />
</ItemGrid0>

Props