Marketing

NavCard

A linking card with an amber icon tile, a serif title and one sentence; the whole card is the link and it glows on hover.

Examples

A feature grid

ArchiveBackup historyAll past runs and per-repository results.InsightsAnalyticsCharts and trends over the last 7 to 90 days.RunStart a backupQueue a run for every tracked repository now.

<div className="metric-grid metric-grid--three">
  <NavCard component={Link} href="/backups" icon={<Archive />} kicker="Archive" title="Backup history" body="All past runs and per-repository results." />
  …
</div>

Guidelines

A functional Lucide icon at 20px, a title of two or three words, one sentence in ink-secondary.
Four in a row at most; pass component={Link} for client navigation.
No button inside it, no decorative icon.

Props

Prop	Type	What it does
icon, kicker, title, body	ReactNode	The tile, the optional eyebrow, the serif title and one sentence.
href, component	string, ElementType	The link target and the element to render.