Card5

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

https://

Card 5.1

« Lorem ipsum dolor sit amet, consectetur adipisicing elit. »

---

Elena Ruzanda. New York

Sep. 12 2024

« Lorem ipsum dolor sit amet, consectetur adipisicing elit. »

---

Elena Ruzanda. New York

Sep. 12 2024

« Lorem ipsum dolor sit amet, consectetur adipisicing elit. »

Custom Content

---

Elena Ruzanda. New York

Sep. 12 2024

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

<ItemGrid0 columns={3} class="bg-stripe">
  <Card5
    author='Elena Ruzanda. New York'
    authorDescription='Sep. 12 2024'
    image={{
      src: '~/assets/images/avatar-01.jpeg',
      alt: 'Elena Ruz'
    }}
    title="Card 5.1"
    description="Lorem ipsum dolor sit amet, consectetur adipisicing elit."
    callToAction={{
      variant: 'outline',
      size: 'icon',
      icon: 'tabler:arrow-right',
      href: '/',
    }}
  />
  <Card5
    description="Lorem ipsum dolor sit amet, consectetur adipisicing elit."
    author='Elena Ruzanda. New York'
    authorDescription='Sep. 12 2024'
    icon="tabler:home"
    callToAction={{
      variant: 'outline',
      size: 'icon',
      icon: 'tabler:arrow-right',
      href: '/',
    }}
  />
  <Card5
    description="Lorem ipsum dolor sit amet, consectetur adipisicing elit."
    author='Elena Ruzanda. New York'
    authorDescription='Sep. 12 2024'
    callToAction={{
      variant: 'outline',
      size: 'icon',
      icon: 'tabler:arrow-right',
      href: '/',
    }}
  >
    Custom Content
  </Card5>
</ItemGrid0>

Props