CardsStable

Navigation Card

Sourcecomponents/cards/NavCard.astro

Overview

A clickable image tile that navigates somewhere. In the default tile variant the big label sits at the top and an "Explore →" CTA at the bottom, over a top-and-bottom shade. The image scales up on hover.

Variants

Tile — the services / help grid card: a big label at the top, an always-visible "Explore →" at the bottom. Showcase — the homepage work-mosaic tile: the label bottom-left, a "View →" bottom-right that reveals on hover.

variant="tile"

Branding Explore

variant="showcase"

Project Title View

Props

Prop	Type	Default	Notes
`title`	string	`—`	The label. Required.
`image`	string	`—`	Background image URL.
`variant`	'tile' \| 'showcase'	`'tile'`	Services / help grid tile, or work-mosaic showcase tile.
`cta`	string	`per variant`	CTA label. Defaults: tile "Explore", showcase "View".
`href`	string	`—`	Makes the whole card a link.
`ratio`	string	`'3 / 4'`	Aspect-ratio.

Usage

Put it in a grid or mosaic. Give it an href and the whole card becomes the link.

<!-- Services / help grid tile — label top, Explore CTA bottom -->
<NavCard image="/img/example.jpg" title="Branding" href="/services" />

<!-- Work-showcase mosaic tile — label bottom-left, View reveals on hover -->
<NavCard variant="showcase" image="/img/example.jpg" title="Project Title" href="#" />

Rules

Use it for navigation — a grid of destinations (services, work, categories).

Keep labels short so they read over the image.

Don't

Use it where the text must sit below the image — that's Work Card.

Pack a paragraph into the overlay — it fights the image.