Prototype Library

Card

The inherited Ecology card, wearing the Biochar Atlas skin. Header (icon + title + subtitle + actions), body, and optional footer; the primary header variant fills with forest green from --color-primary.

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

Variants

Default

Border on the surface color.

Elevated

Soft shadow, no border.

Filled

Sunken background, no border. 
<EsaCard title="Default">…</EsaCard>
<EsaCard title="Elevated" variant="elevated">…</EsaCard>
<EsaCard title="Filled" variant="filled">…</EsaCard>

A title (with optional subtitle) renders the header row; the actions slot puts controls on its right. headerVariant="primary" fills the header with the brand green.

Soil context

Auto-derived from SSURGO

Willamette silt loam, 0–3% slopes. pH 6.2, moderate available water capacity.

Suitability summary

Ruleset v0.3

Douglas-fir slash at 550°C scores 78 of 100 for the selected goals. 
<EsaCard title="Soil context" subtitle="Auto-derived from SSURGO" headerVariant="muted">
  Willamette silt loam, 0–3% slopes.
  <EsaButton slot="actions" color="ghost" size="sm">Edit</EsaButton>
</EsaCard>

Padding

Compact

Dense body padding.

Default

Standard body padding.

Spacious

Generous body padding. 
<EsaCard padding="compact">…</EsaCard>
<EsaCard padding="spacious">…</EsaCard>

The named footer slot renders a sunken strip under the body — meta, totals, or secondary actions.

Assessment

Scores, rationale, and limitations for the selected field.
Generated Jun 11, 2026 · OR039 
<EsaCard title="Assessment">
  Scores, rationale, and limitations.
  <span slot="footer">Generated Jun 11, 2026 · OR039</span>
</EsaCard>

API

PropTypeDefaultDescription
title string — Card heading. A header row renders when a title, header slot, or actions slot is present.
subtitle string — Supporting line under the title.
icon string — Any truthy value renders the built-in info glyph before the title (the glyph is fixed, not name-resolved).
variant 'default' | 'outlined' | 'elevated' | 'filled' 'default' Surface treatment — border, shadow, or sunken fill.
headerVariant 'default' | 'primary' | 'muted' 'default' Header chrome: transparent, forest-green fill, or sunken tint.
padding 'none' | 'compact' | 'default' | 'spacious' 'default' Body padding scale.

Slots: default (body) · header (replaces the built-in title row) · actions (right side of the header) · footer (sunken strip below the body).