ResourceCard

A guide, template or tool in a resources grid.

import { ResourceCard } from '@zitdevs/ui';

Examples

Guide12 min

How to plan an MVP without overbuilding

A method to decide what goes into the first version.

Read the guide

TemplateDOCX

Project brief

The questions a good brief answers.

Get the template

Case study

A logistics portal in eight weeks

From spreadsheets to one system.

Read the case

<ResourceCard
  href="/resources/plan-an-mvp"
  kind="guide"
  typeLabel="Guide"
  meta="12 min"
  title="How to plan an MVP without overbuilding"
  body="A method to decide what goes into the first version."
  cta="Read the guide"
/>

Its title link through a router’s link, such as Next’s Link, with linkAs. See Router links.

Tool

Cloud cost estimator

What your current setup would cost on each provider.

Open the tool

import Link from 'next/link';

<ResourceCard linkAs={Link} href="/resources/plan-an-mvp" kind="guide" … />;

Props

Prop	Type	Default	Notes
href	string	required	Carried by the title link, whose hit area covers the card.
kind	ResourceKind	required	Picks the TypeTag’s colour.
typeLabel	string	required	The kind’s name in the page’s language.
meta	string	—	Reading time or format, such as “12 min”.
title	string	required	A real heading, and the link’s whole name.
body	string	required
cta	string	required	Visible only; the title link is what screen readers follow.
cover	ResourceCover	'inverse'	'inverse' | 'primary' | 'soft': the field and its pattern.
compact	boolean	false	Shortens the cover from 132px to 108px.
headingLevel	HeadingLevel	3
linkAs	LinkComponent	'a'	Renders the title link: Next’s Link, or any router’s.
ref	Ref<HTMLDivElement>	—	The card.
className	string	—	Placement.
anything else	<div> attributes	—	Except title, which is the heading here.

Exported types: ResourceCardProps, ResourceCover. The website’s covers map as navy → inverse, blue → primary, soft → soft.

Accessibility

• The whole card is clickable through the title link’s stretched hit area, so the link’s name is the title alone.
• The cover is decoration and the visible call to action repeats the link: both are hidden.
• The card draws the focus ring while its link has focus; the link draws none.
• A linkAs component must pass className to its <a>, or the stretched hit area is lost.

Without JavaScript

It needs none: a heading with a link, rendered as a Server Component, through a router’s link too.

Theming

surface-raised with a border-default frame that turns primary on hover; ink title, body text, muted meta, primary call to action. Covers: surface-inverse with an accent triangle, primary with an on-primary one, primary-soft with a primary one.

The cover patterns (--pattern-marks-blue, --pattern-lines-blue, --pattern-marks-cream) are brand artwork in ZitDevs blue and cream: they do not follow --ui-primary. A product re-themes them by overriding those --pattern-* variables.