Card

Content container with multiple layout variants.

Code

components/Card.astro

    
      ---import { Image } from "astro:assets"; interface Props {  variant?: "vertical" | "horizontal" | "bordered" | "shadowed";  imageSrc?: Parameters<typeof Image>[0]["src"];  imageAlt?: string;  imageWidth?: number;  imageHeight?: number;  class?: string;} const {  variant = "vertical",  imageSrc,  imageAlt = "",  imageWidth,  imageHeight,  class: className = "",} = Astro.props;--- <div class={`card card-${variant} ${className}`}>  {    (variant === "vertical" || variant === "horizontal") && imageSrc && (      <div class="card-image">        <Image          src={imageSrc}          alt={imageAlt}          width={imageWidth}          height={imageHeight}          loading="lazy"        />      </div>    )  }  <div class="card-body">    <slot />  </div></div>

Preview

Vertical / Default

MacBook Pro

Powerful laptop for developers with M3 chip and 18-hour battery life.

Horizontal

Horizontal Card

Image on the left, content on the right. Stacks vertically on mobile.

Bordered

Bordered Card

Minimalist card with a thick border and no image.

Shadowed

Shadowed Card

Minimalist card with subtle shadow and no border.

Usage

    
      <Card variant="vertical" imageSrc="https://picsum.photos/seed/laptop/800/400" imageAlt="Laptop" imageWidth={800} imageHeight={400}>  <h3>Card Title</h3>  <p>Card description here.</p></Card>

    
      <Card variant="bordered">  <h3>Bordered Card</h3>  <p>Minimalist card with thick border.</p></Card>

Props

Prop	Type	Default	Description
variant	"vertical" \| "horizontal" \| "bordered" \| "shadowed"	"vertical"	Card layout variant.
imageSrc	ImageMetadata \| string	—	Image source for vertical/horizontal variants.
imageAlt	string	""	Alt text for the image.
imageWidth	number	—	Image width in pixels.
imageHeight	number	—	Image height in pixels.
class	string	—	Additional CSS classes.