0.9.0

Card6

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.

Card 6.2

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Card 6.2
---
import { ItemGrid0, Card6 } from '@yatoday/astro-ui/astro';
---
<ItemGrid0 columns={3} class="bg-stripe ">
  <div className="text-white">
    <Card6
      title="Card 6.1"
      description="Lorem ipsum dolor sit amet, consectetur adipisicing elit."
      image={{ src: '~/assets/images/800x800.svg', alt: 'Card 6.1' }}
      callToAction={{ href: '/' }}
      badge="Badge"
    >
      <!-- or -->
      <Fragment slot="badge">
        <Badge>Badge</Badge>
      </Fragment>
    </Card6>
  </div>
  <div className="text-white">
    <Card6
      title="Card 6.2"
      description="Lorem ipsum dolor sit amet, consectetur adipisicing elit."
      image={{ src: '~/assets/images/800x800.svg', alt: 'Card 6.2' }}
    />
  </div>
  <Card6
    title="Card 6.3"
    description="Lorem ipsum dolor sit amet, consectetur adipisicing elit."
    callToAction={{ href: '/' }}
    classes={{container: 'dark:text-white text-slate-800'}}
  />
</ItemGrid0>

Props

PropTypeDefaultDescription
titlestring-Title text for the card
descriptionstring-Content for the card
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.contentstringbg-gradient-to-b from-transparent to-black/80Additional CSS classes to apply to the content wrapper
classes.titlestring-Additional CSS classes to apply to the title
classes.descriptionstringtext-muted-foregroundAdditional CSS classes to apply to the description
classes.imagestring-Additional CSS classes to apply to the image
classes.badgestringtop-2 left-2Additional CSS classes to apply to the badge
classes.aspectstringpb-[100%]Additional CSS classes to customize aspect ratio behavior. Examples: - 16/9: pb-[56%], 4/3: pb-[75%], 1/1: pb-[100%] - default, 6/7: pb-[116%], 4/5: pb-[125%], 3/4: pb-[133%], 9/16: pb-[177%]