Card7

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

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

<ItemGrid0 columns={3} class="bg-stripe">
  <Card7
    title="Card 7.1"
    description="Lorem ipsum dolor sit amet, consectetur adipisicing elit."
    callToAction={{ href: '/', text: 'Read more', size: 'sm', variant: 'primary' }}
  >
    Content
  </Card7>
  <Card7
    icon="tabler:home"
    title="Card 7.2"
    description="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit."
    callToAction={{ href: '/', text: 'Read more', size: 'sm', variant: 'outline' }}
  />
  <Card7 
    icon="tabler:home"
    title="Card 7.3"
    description="Lorem ipsum dolor sit amet, consectetur adipisicing elit."
    classes={{
      icon: 'text-primary'
    }}
  />
</ItemGrid0>

Props