Card1

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 1.1

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Additional link 1 Additional link 2 Additional link 3

Read more

Card 1.2

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Param name

Param value

Param name

Param value

Param name

Param value

Read more

Card 1.3

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Param name

Param value

Param name

Param value

Param name

Param value

Param name

Param value

Param name

Param value

Read more

Card 1.4

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Read more

Card 1.5

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Card 1.6

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Usage

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

<ItemGrid0 columns={4} class="bg-stripe">
  <Card1
    title="Card 1.1"
    description='Lorem ipsum dolor sit amet, consectetur adipisicing elit.'
    image={{ src: '~/assets/images/800x800.svg', alt: 'Lorem Test' }}
    callToAction={{ href: '/', text: 'Read more' }}
    links={[
      { href: '/', text: 'Additional link 1' },
      { href: '/', text: 'Additional link 2' },
      { href: '/', text: 'Additional link 3' },
    ]}
  >
    <Fragment slot="badge">
      <div className="text-green-700 font-semibold text-sm border p-1 rounded">Badge</div>
    </Fragment>
  </Card1>

  <Card1
    title="Card 1.2"
    description='Lorem ipsum dolor sit amet, consectetur adipisicing elit.'
    image={{ src: '~/assets/images/800x800.svg', alt: 'Lorem Ipsum' }}
    callToAction={{ href: '/', text: 'Read more' }}
    data={[
      {name: 'Param name', value: 'Param value'},
      {name: 'Param name', value: 'Param value'},
      {name: 'Param name', value: 'Param value'},
    ]}
  />

  <Card1
    title="Card 1.3"
    description='Lorem ipsum dolor sit amet, consectetur adipisicing elit.'
    icon="tabler:home"
    callToAction={{ href: '/', text: 'Read more' }}
    data={[
      {name: 'Param name', value: 'Param value'},
      {name: 'Param name', value: 'Param value'},
      {name: 'Param name', value: 'Param value'},
      {name: 'Param name', value: 'Param value'},
      {name: 'Param name', value: 'Param value'},
    ]}
  />

  <Card1
    title="Card 1.4"
    description='Lorem ipsum dolor sit amet, consectetur adipisicing elit.'
    image={{ src: '~/assets/images/800x800.svg', alt: 'Lorem Ipsum' }}
    callToAction={{ href: '/', text: 'Read more' }}
    classes={{image: 'h-40'}}
  />

  <Card1
    title="Card 1.5"
    description='Lorem ipsum dolor sit amet, consectetur adipisicing elit.'
    image={{ src: '~/assets/images/800x800.svg', alt: 'Lorem Ipsum' }}
    icon="tabler:home"
    classes={{image: 'h-40'}}
  />

  <Card1
    title="Card 1.6"
    description='Lorem ipsum dolor sit amet, consectetur adipisicing elit.'
    icon="tabler:home"
  />
</ItemGrid0>

Props