PillarCard

One of the service pillars — Build, Operate, Grow, Advise.

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

Examples

In a grid whose 1px gaps draw the dividers (hairlines from @zitdevs/ui):

Build

Digital products

Platforms and products designed from your process.

• Custom software
• Web and mobile
• Product design

Operate

Managed IT

Support, security and cloud run as one service.

• IT support
• Cloud operations

import { PillarCard, hairlines } from '@zitdevs/ui';

<div className={`grid page-md:grid-cols-2 page-lg:grid-cols-4 ${hairlines}`}>
  <PillarCard
    href="/services"
    framed={false}
    kicker="Build"
    title="Digital products"
    body="Platforms and products designed from your process."
    items={['Custom software', 'Web and mobile']}
  />
</div>;

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

Grow

Digital growth

Search, content and campaigns measured against the pipeline.

• SEO
• Paid media

import Link from 'next/link';

<PillarCard
  linkAs={Link}
  href="/services/growth"
  kicker="Grow"
  title="Digital growth"
  body="…"
  items={[]}
/>;

Props

Prop	Type	Default	Notes
href	string	required	Carried by the title link, whose hit area covers the card.
kicker	string	required	An Eyebrow with a marker.
title	string	required	A real heading at headingLevel, and the link’s whole name.
body	string	required
items	readonly string[]	required	Listed at the foot; an empty list draws nothing. Each is a key, so unique.
marker	PillarMarker	'primary'	'primary' | 'ink' | 'accent' | 'primaryInverse': the kicker’s marker.
framed	boolean	true	Off inside a grid whose 1px gaps draw the dividers.
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: PillarCardProps, PillarMarker. The website’s marker names map as blue → primary, navy → ink, orange → accent, blueLight → primaryInverse.

Accessibility

• The whole card is clickable, but only the title is the link: its hit area is stretched over the card, so a screen reader hears “Digital products, link” rather than every line of the card read as one link name.
• The card draws the focus ring while its link has focus (has-focus-visible:); the link draws none, and turns off an app’s own outline, so there is never a second ring.
• A linkAs component must pass className to its <a>, or the stretched hit area is lost.

Use instead: a process stage → StepCard; a guide or tool → ResourceCard.

Without JavaScript

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

Theming

surface-raised, primary-soft on hover, a border-default frame; ink kicker, title and items, body text, a primary arrow and a border-subtle rule above the items; the focus ring.