CompareCard

One side of a before/after comparison.

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

Examples

Fragmented

• Several hires for different profiles
• Several vendors to coordinate

Managed by ZitDevs

• One accountable partner
• Shared knowledge across the team

As a service page’s comparison, with the kicker as a band and a real heading:

Another agency

• Separate contracts
• A new team for each project

ZitDevs

• One agreement
• The same team, project after project

<CompareCard kicker="Fragmented" items={['Several vendors to coordinate']} />
<CompareCard kicker="Managed by ZitDevs" emphasis="highlight" items={['One accountable partner']} />
<CompareCard kicker="Another agency" band headingLevel={3} items={['Separate contracts']} />

Props

Prop	Type	Default	Notes
kicker	string	required	Heads the card and names its list.
items	readonly string[]	required	Each item is a React key, so no two may be the same.
emphasis	'muted' | 'highlight'	'muted'	muted: the side left behind, with dashes. highlight: the alternative, checks.
band	boolean	false	The kicker as a band across the card, as on a service page.
headingLevel	HeadingLevel	—	Makes the kicker a real heading. Without it the kicker is a label.
ref	Ref<HTMLDivElement>	—	The card.
className	string	—	Placement.
anything else	<div> attributes	—

Exported type: CompareCardProps.

Accessibility

• The list is named by the kicker (aria-label), so a screen reader hears which side it is on before the items.
• The kicker is read once: as a heading with headingLevel, or else hidden, since the list’s name already says it. Never add a screen-reader copy beside it.
• The dashes and checks are hidden; the side’s name carries the meaning.
• Give the pair a heading of its own. band and headingLevel go together on a page whose outline counts the two sides as sections.

Without JavaScript

It needs none: a list, rendered as a Server Component.

Theming

Muted: surface with a border-default frame, muted kicker, body items and border-strong dashes. Highlight: surface-raised with a primary frame (primary-line in the band variant), a primary kicker (on-primary on a primary band), ink items and primary checks.