0.17.0

Card3

Source code

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

NEW
Card 3.1

Card 3.1

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Card 3.2

Card 3.2

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Card 3.3

Card 3.3

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
---
import { Card3, ItemGrid0 } from '@yatoday/astro-ui/astro';
---

<ItemGrid0 columns={3} class="bg-stripe">
  <Card3
    title="Card 3.1"
    description="Lorem ipsum dolor sit amet, consectetur adipisicing elit."
    image={{ src: '~/assets/images/800x800.svg', alt: 'Card 3.1' }}
    callToAction={{ href: '/', text: 'Read more', size: 'sm', variant: 'primary' }}
    badge="QWERT"
  >
    <Fragment slot="badge">
      <div className="text-green-700 font-semibold">NEW</div>
    </Fragment>
  </Card3>
  <Card3
    title="Card 3.2"
    image={{ src: '~/assets/images/800x800.svg', alt: 'Card 3.2' }}
    description="Lorem ipsum dolor sit amet, consectetur adipisicing elit."
    icon="tabler:home"
    callToAction={{ href: '/', text: 'Read more', size: 'sm', variant: 'outline' }}
  />
  <Card3 
    title="Card 3.3"
    image={{ src: '~/assets/images/800x800.svg', alt: 'Card 3.3' }}
    description="Lorem ipsum dolor sit amet, consectetur adipisicing elit."
    callToAction={{ href: '/', text: 'Read more', size: 'sm', variant: 'outline' }}
  />
</ItemGrid0>

Props

PropTypeDefaultDescription
titlestring-Title text for the card
descriptionstring-Content for the card
imagestring | Image-Image for the card
badgestring-badge slot contents
badgeTopRightstring-badgeTopRight slot contents
badgeBottomRightstring-badgeBottomRight slot contents
badgeBottomLeftstring-badgeBottomLeft slot contents
callToActionToAction | string | ToAction[] | string[]-Action button or link. See the ToAction for details.
asstringarticleHTML tag name for the wrapper
asHeaderstringh3HTML tag name for the title
classes.containerstringbg-transparent border-transparentAdditional CSS classes to apply to the card wrapper
classes.titlestring-Additional CSS classes to apply to the title
classes.contentstringtext-muted-foregroundAdditional CSS classes to apply to the content container
classes.imagestring-Additional CSS classes to apply to the image container
classes.imageLayoutstringcoverAdditional CSS classes to apply to the image
classes.badgestringtop-2 left-2Additional CSS classes to apply to the badge