LinkCard

A short outlined link with a line of context, such as “Careers” in a footer.

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

Examples

CareersZitLancer assignments or full-time Zitizen roles.

<LinkCard href="/careers" title="Careers" body="ZitLancer assignments or full-time Zitizen roles." />
<LinkCard surface="dark" href="/careers" title="Careers" body="…" />

Through a router’s link, such as Next’s Link, with asChild. See Router links.

CareersZitLancer assignments or full-time Zitizen roles.

import Link from 'next/link';

<LinkCard asChild title="Careers" body="ZitLancer assignments or full-time Zitizen roles.">
  <Link href="/careers" />
</LinkCard>;

Props

Prop	Type	Default	Notes
`title`	`string`	required	Read first in the link’s name.
`body`	`string`	required	The line of context, read after the title.
`surface`	`Surface`	`'light'`	`dark` is the inverse band only; see Theming.
`href`	`string`	—	Required without `asChild`; not allowed with it.
`asChild`	`boolean`	`false`	Renders its one child element (a router’s link) as the card.
`children`	`ReactElement`	—	With `asChild`, the element to render as. Its children are replaced.
`ref`	`Ref<HTMLAnchorElement>`	—	The link.
`className`	`string`	—	Placement.
anything else	`<a>` attributes	—	Except `title`, which is the visible title here.

Exported type: LinkCardProps.

Accessibility

One <a>, whose name is the title followed by the body. The marker is hidden.
The link draws the kit’s focus ring itself.
The link sets no text colour of its own, its spans do, so an app’s a:hover { color } changes nothing.

Use instead: a menu entry → MenuItem; a call to action → Button; a card with its own heading → PillarCard or ResourceCard.

Without JavaScript

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

Theming

The frame is accent at 50%, and full on hover: one of the few places the accent is a frame, so keep the card small. Light: ink and body text, accent-soft on hover. Dark: on-inverse and on-inverse-muted text, on-inverse-quiet at 6% on hover.

surface="dark" means the inverse band: on-inverse-muted reads at 14.9:1 there but only 4.19:1 on the primary band, so do not set the card on the primary band.