Work with us
BlocksStable

NavCard Grid

Sourcecomponents/blocks/NavCardGrid.astro

The block

The "we help you with" section — a heading with a serif accent over a row of clickable image tiles. Each tile is a Nav Card (tile variant): label top, "Explore →" bottom, image that scales on hover. The heading and cards reveal on scroll (staggered).

Scroll inside the preview — the title fades up, then the cards stagger in.

We help you with

Built from

  • Nav Card — each image tile (tile variant): label, "Explore →", hover-zoom.
  • The shared reveal driver — the title is .reveal, the grid is .reveal-stagger.

Behaviour

  • Reveal on scroll — the title slides up, then the cards stagger in (0.12s apart) as the block enters the viewport. Fires once; respects prefers-reduced-motion.
  • Responsive — two-up on tablet, one row of N (up to four) on desktop.
  • Rounded top — laps over the section above it (negative top margin), so it reads as a light panel rising over the hero.

Props

PropTypeDefaultNotes
cards Card[] — 1–4 tiles — { label, href, image, cta? }. Required.
titleHtml string the "we help you with" line Section heading (inline HTML; wrap the accent in <em class="t-serif">).

Usage

Pass up to four cards. It needs the shared reveal driver on the page (<Reveal />, already in the site layout) for the scroll animation.

<NavCardGrid
  titleHtml='We don’t just give you a brandkit and fuck off – <em class="t-serif">we help you with:</em>'
  cards={[
    { label: 'Branding', href: '/services', image: '/img/branding.jpg' },
    { label: 'Software Intelligence', href: '/solutions', image: '/img/software.jpg' },
    { label: 'Marketing', href: '/services', image: '/img/marketing.jpg' },
    { label: 'Security', href: '/work', image: '/img/security.jpg' },
  ]}
/>

Rules

Do

Keep to four tiles or fewer — one clean row.

Use dark, high-contrast imagery so the white label reads.

Don't

Put a paragraph on a tile — it's a label plus a link.

Rebuild the card markup — use the Nav Card.