CropWatch User Interface

CwCard

Title, subtitle, elevated, actions, and custom header.

Simple card with a title and body content.

Card with title and subtitle rendered in the header.

This card has a raised shadow for emphasis.

Actions rendered in the card header row.

Center-aligned title support.

Right-aligned title support.

No padding variant — useful for full-bleed content.

<CwCard title="Device Summary" subtitle="Greenhouse 7">
	{#snippet children()}
		<p>All systems nominal.</p>
	{/snippet}
</CwCard>

Documentation Upgrade

Start here

CwCard gives you a consistent container for summaries, forms, charts, and lists. Use the simple title props first, then switch to snippets only when the header needs custom layout.

How to think about it

Start with title and subtitle Most cards only need `title`, optional `subtitle`, and body content in the default snippet.
Add actions before replacing the header If you only need buttons on the right side, use the `actions` snippet instead of fully overriding the header.
Disable padding only for full-bleed content Charts, tables, or media blocks sometimes need edge-to-edge layout. Everything else should usually keep the default padding.

Props and callbacks

API	Type	Details
`title`	`string`	Header title text.
`subtitle`	`string`	Secondary text under the title.
`titleAlign` Default: `left`	`'left' \| 'center' \| 'right'`	Alignment for the built-in title/subtitle block.
`padded` Default: `true`	`boolean`	Controls the built-in inner padding.
`elevated` Default: `false`	`boolean`	Adds stronger shadow treatment for emphasis.
`children`	`Snippet`	Main body content rendered in the card.
`header`	`Snippet`	Fully custom header markup. Replaces the built-in title block.
`subtitleSlot`	`Snippet`	Extra inline content rendered inside the subtitle area.
`actions`	`Snippet`	Right-aligned header actions such as buttons or status pills.

Copy-paste examples

These snippets intentionally show the full public API surface the live demo relies on.

Simple summary card

Use this version for most dashboard tiles.

<CwCard title="Device summary" subtitle="Greenhouse 7" elevated>
	{#snippet actions()}
		<CwButton size="sm" variant="ghost">Refresh</CwButton>
	{/snippet}
	{#snippet children()}
		<p>All irrigation zones reported in the last 5 minutes.</p>
	{/snippet}
</CwCard>

Custom header and full-bleed body

Switch to snippets when the header layout needs custom composition.

<CwCard padded={false}>
	{#snippet header()}
		<div style="padding:1rem 1rem 0;display:flex;justify-content:space-between;gap:1rem">
			<div>
				<h3 style="margin:0">Reservoir trend</h3>
				<p style="margin:0.35rem 0 0">24 hour water level</p>
			</div>
			<CwBadge value="Live" tone="success">
				<span />
			</CwBadge>
		</div>
	{/snippet}
	{#snippet children()}
		<div style="height:14rem;background:var(--cw-bg-muted)"></div>
	{/snippet}
</CwCard>

CwCard

Basic Card

With Subtitle

Elevated

With Actions