Image card

How to use

<Section class="mt-4 md:mt-12" columns={3}>
<Markdown class="md:col-span-3">

# Default card

A default content card with a heading and optional description. It can be centered with a prop and is intended for use in columns or with a carousel wrapper.

</Markdown>

import ImageCard from "~/components/cards/Image.astro";

<ImageCard image={{ src: Image2, alt: "" }} />
<ImageCard image={{ src: Image3, alt: "" }} />
<ImageCard image={{ src: Image4, alt: "" }} />

</Section>

Props

Prop	Type	Description
image	object	(optional) Image data for the component. See below.
layout	object	(optional) Layout data for the component. See below.
class	string	(optional) Additional classes applied to the root <figure>.
(extends)	HTMLAttributes<"figure">	(optional) All standard HTML attributes for a <figure>.

image object

• src — ImageMetadata
  The imported image metadata (output from Astro’s image import).
• alt — string
  (optional) Alt text for the image, defaults to empty string "".

layout object

• aspect — “auto” | “landscape” | “portrait” | “square” | “video”. (optional) Sets the aspect ratio of the image.
• objectFit — “cover” | “contain”
  (optional) Set the object-fit CSS property for the image. Default is cover.

3 Column Carousel

4 Column Carousel

5 Column Marquee