StepCard

One numbered cell: a stage of the engagement, with what it hands over at the end, or any other card that counts its place in a set.

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

Examples

01

Discover

Your business, systems, goals and constraints.

Discovery notes

In a sequence, as compact cells in a grid whose 1px gaps draw the dividers (hairlines from @zitdevs/ui), inside an <ol> that states their order:

1. 01

   Discover

   We learn your business.

2. 02

   Scope

   Agreed in writing.

3. 03

   Build

   In short, visible steps.

On the inverse field, in hairlinesInverse:

01

Plain language

The technical detail backs a decision.

Discovery notes

02

One team

The people you meet are the people who build.

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

<StepCard number="01" title="Discover" body="Your business, systems, goals." output="Discovery notes" />

<ol className={`m-0 grid list-none p-0 ${hairlines}`}>
  {stages.map((stage) => (
    <li key={stage.number}>
      <StepCard {...stage} size="sm" framed={false} sequence />
    </li>
  ))}
</ol>

Props

Prop	Type	Default	Notes
number	string	required	Shown as written, such as “01”.
title	string	required	A real heading at headingLevel.
body	string	required
output	string	—	The deliverable of the stage. Omit it for no foot.
framed	boolean	true	Off inside a grid whose 1px gaps draw the dividers.
headingLevel	HeadingLevel	3
size	'md' | 'sm'	'md'	sm: the compact cell of a page’s grids.
surface	Surface	'light'	dark is a cell of the inverse band, its number in accent.
sequence	boolean	false	One of a series read in order: the rule ends in a triangle.
ref	Ref<HTMLDivElement>	—	The card.
className	string	—	Placement.
anything else	<div> attributes	—	Except title, which is the heading here.

Exported type: StepCardProps.

Accessibility

• Not a link. The title is a real heading at headingLevel; the card reads as the number, the title and the body.
• sm drops the rule beside the number; sequence puts it back and ends it in a triangle. Both are hidden: an <ol> around the cells states the order.
• On dark every text reaches AA on the inverse field; the component tests measure each one.

Without JavaScript

It needs none: a heading and paragraphs, rendered as a Server Component.

Theming

Light: surface-raised, border-default frame and rule, primary number and marker, ink title and output, body text. Dark: surface-inverse, primary-inverse at 24% for the frame, rule and output line, accent number, on-inverse title and output, on-inverse-muted body, primaryInverse marker. hairlines and hairlinesInverse draw the same rules a framed card does.