Skip to content
MIZU.

LinkCard

A destination with enough context to decide whether to follow it.

Live — this one is real

Usage

import { LinkCard } from "mizu-ui";

export function Example() {
  return (
    <LinkCard
      href="/components/getting-started"
      title="Build with Mizu"
      description="Install the package, bring the styles and compose your first interface."
    />
  );
}

Source & setup

Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.

Inspect content/Typography.tsx

Source is included in the npm package under src/content/Typography.tsx.

Open full source ↗

Props

PropTypeDefaultDescription
href / titlestring—Real destination and visible link title.
description / eyebrowstring—Supporting context.
...propsAnchorHTMLAttributes—Native link behavior.

Accessibility

A single native anchor, no nested interactive elements. Open-in-new-tab behavior remains browser-owned.

Motion

CSS transitions explain state changes. Reduced motion removes travel.

Works alongside

AvatarKbdCodeBlockQuote