Prototype Library

Card

Surface container with an optional header (icon, title, subtitle, actions), body, and footer. Variants, header tints, and padding scales.

Inherited .astro import EsaCard from '@esa/ecology/esa-card.astro';

Preview

Report

Q3 summary

Body content for the card.

<Card title="Report" subtitle="Q3 summary">
  <p>Body content for the card.</p>
</Card>

Variants

Default

Bordered surface

Default card.

Elevated

Shadow, no border

Elevated card.

Filled

Sunken background

Filled card.

<Card title="Default" subtitle="Bordered surface">…</Card>
<Card variant="elevated" title="Elevated" subtitle="Shadow, no border">…</Card>
<Card variant="filled" title="Filled" subtitle="Sunken background">…</Card>

Header variants

Primary header

Inverted text

Tinted header band.

Muted header

Subtle sunken header.

<Card headerVariant="primary" title="Primary header" subtitle="Inverted text">…</Card>
<Card headerVariant="muted" title="Muted header">…</Card>

Padding

Compact

Tighter body.

Default

Standard body.

Spacious

Roomy body.

<Card padding="compact" title="Compact">…</Card>
<Card padding="default" title="Default">…</Card>
<Card padding="spacious" title="Spacious">…</Card>

Actions & footer

The actions slot sits at the right of the header; the footer slot renders a bottom band.

Report

Q3 summary

The actions slot sits at the right of the header; the footer slot renders a bottom band.

Last updated 2 hours ago 
<Card title="Report" subtitle="Q3 summary" icon="info">
  <button slot="actions" type="button">Edit</button>
  <p>Body content.</p>
  <span slot="footer">Last updated 2 hours ago</span>
</Card>

API

PropTypeDefaultDescription
title string — Header title. Presence (or a header/actions slot) renders the header band.
subtitle string — Secondary line under the title.
icon string — Lucide icon name shown left of the title.
variant 'default' | 'outlined' | 'elevated' | 'filled' 'default' Surface treatment: bordered, shadowed, or sunken.
headerVariant 'default' | 'primary' | 'muted' 'default' Header band tint.
padding 'none' | 'compact' | 'default' | 'spacious' 'default' Body and header padding scale.

Slots

PropTypeDefaultDescription
default slot — Card body content.
header slot — Replaces the title block entirely with custom markup.
actions slot — Right-aligned controls in the header band.
footer slot — Bottom band below the body.

Accessibility

  • Renders a plain <div> — add role/landmarks at the call site if the card is interactive or a region.
  • The title is an <h3>; keep heading order sensible within the surrounding page.
  • The header icon is aria-hidden — it decorates the title, not replaces it.