PromoCard

A promotion on the inverse field, such as the one inside a services menu.

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

Examples

Managed partnership

One partner. One team. Clear accountability.

Development, IT support, cloud and digital growth in one managed relationship.

Explore managed services

<PromoCard
  kicker="Managed partnership"
  title="One partner. One team. Clear accountability."
  body="Development, IT support, cloud and digital growth in one managed relationship."
  cta={{ label: 'Explore managed services', href: '/services' }}
/>

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

Managed partnership

One partner. One team. Clear accountability.

Development, IT support, cloud and digital growth in one managed relationship.

Explore managed services

import Link from 'next/link';

<PromoCard linkAs={Link} kicker="…" title="…" body="…" cta={{ label: '…', href: '/services' }} />;

Props

Prop	Type	Default	Notes
kicker	string	required
title	string	required	A paragraph, not a heading.
body	string	required
cta	{ label: string; href: string }	required	The card’s only link.
linkAs	LinkComponent	'a'	Renders the call to action: Next’s Link, or any router’s.
ref	Ref<HTMLDivElement>	—	The card.
className	string	—	Placement.
anything else	<div> attributes	—	Except title, which is the visible title here.

Exported type: PromoCardProps.

Accessibility

• The card itself is not a link; its call to action is, named by its own label. The title is a paragraph, since a promotion is not part of the page’s outline.
• The call to action draws the kit’s focus ring itself.

Without JavaScript

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

Theming

surface-inverse, with a primary-inverse kicker, on-inverse title and on-inverse-muted body. The call to action is on-inverse over a primary-inverse rule that turns on-inverse on hover.