Library · Listings & Cards

Card

Versatile card with image, title, meta, description and footer areas; supports astro:assets Image via imageComponent for optimized local images.

Figma: Primitives / Card ↗

Live preview — edit theme bottom-right

---
import Card from "../components/primitives/card/Card.astro";
---
<Card
  img="https://images.unsplash.com/photo-1449824913935-59a10b8d2000?w=800&q=60"
  width={640}
  height={360}
  title="Modern family home"
  footer="Read more"
>
  <span slot="meta">Listed 3 July 2026</span>
  Bright, open-plan living with north-facing views over the reserve.
</Card>
<Card title="Minimal title-only card" />

Props

Name	Type	Required	Description
`class`	`string`	—	Additional classes to apply to the card
`title`	`string`	—	Card's title (default: "Default title")
`img`	`string`	—	URL for the card's image (default: "https://placehold.co/640x360")
`imageComponent`	`ImageMetadata \| Promise<{ default: ImageMetadata }>`	—	Optional Astro Image component to use instead of a regular img Can be a direct ImageMetadata object or a Promise from import() (default: undefined)
`imageAlt`	`string`	—	Alt text for the image (default: "")
`width`	`number`	—	Width of the image (required for remote images with Image component) (default: 640)
`height`	`number`	—	Height of the image (required for remote images with Image component) (default: 360)
`inferSize`	`boolean`	—	Whether to infer the image size (for remote images) (default: false)
`url`	`string`	—	URL for the card's link (default: "#")
`headingLevel`	`'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'`	—	Heading level for the title (h1-h6) (default: "h3")
`headingSize`	`'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'`	—	Visual size of the heading (can differ from semantic level) (default: 'h6')
`footer`	`string`	—	Footer content (default: "")
`fullHeight`	`boolean`	—	Whether the card should take full height (useful for equal height card grids) (default: false)

Example with all props

<Card
  class="project-card"
  title="Elevated living in Newstead"
  img="https://example.com/apartment.jpg"
  imageAlt="Apartment exterior at dusk"
  width={640}
  height={360}
  inferSize={false}
  url="/projects/newstead"
  headingLevel="h3"
  headingSize="h5"
  footer="From $650,000"
  fullHeight
>
  Card body copy goes in the default slot.
</Card>

<!-- For optimised local images pass imageComponent instead of img:
     imageComponent={import("../assets/apartment.jpg")} -->