Card4

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

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

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

Props