Link card
An entry point where the whole card is one link: an icon tile, a title, one sentence and the way in — compact, the same on every page, lifting and lighting under the pointer or the focus.
Web only — React, from @krizaka/ui/link-card. Beta: its API may still change in a minor version.
When to use
- The entry points of a hub: a documentation's sections, the products, the next steps of a guide.
- Any link that deserves more than its words: what the reader finds there, in one sentence.
When not to use
- When the card holds several actions: a card that is a link holds no other link.Use instead: Argument card
- For a link inside a sentence or a list of plain links.Use instead: Chip link
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { LinkCard } from "@krizaka/ui/link-card";Examples
A documentation hub
Three compact cards in a grid: a mark, a title, a sentence, Open.
Stacked, with facts
layout="stack", a category above the title and facts under the text.
An external link
An absolute address: a new tab and the external mark.
Props
An entry point: the whole card is one link — icon, title, sentence, the way in. Lifts and lights under the pointer.
| Prop | Type | Default | Description |
|---|---|---|---|
hrefrequired | string | — | Where the card leads. An absolute URL opens in a new tab, with the external mark. |
titlerequired | ReactNode | — | The title: the name of the destination. |
cta | ReactNode | — | The way in, under the text, with an arrow: Open, Read the guide. |
description | ReactNode | — | One sentence: what the reader finds there. |
extra | ReactNode | — | Under the text, before the way in: facts (Facts), badges. Never another link — the card is one. |
icon | ReactNode | — | The icon tile on the left (a product mark, a signature icon): decorative, the title names the link. |
layout | "row" | "stack" | row | row: the icon beside the text (compact, the default); stack: the icon above it. |
linkAs | LinkComponent | — | The app's link component for internal addresses (Next's Link); an <a> otherwise. |
meta | ReactNode | — | A short mono line above the title (a category, a version). |
titleAs | "h2" | "h3" | "h4" | "span" | h3 | The title's element: a heading when the cards are the content of a section (a hub), span inside a list of links. |
Accessibility
- The card is a single link: its accessible name is its whole text — keep it short.
- An absolute address opens in a new tab with
rel="noopener noreferrer"and the external mark. - The icon and the arrow are decorative; the lift and the light stop under
prefers-reduced-motion.
Keyboard
| Keys | Action |
|---|---|
| Tab | Focuses the card, which lights and draws the focus ring like the pointer does. |
Best practices
- One sentence of description; the title names the destination, the way in (
cta) says the action. - Use the product's mark or a signature icon as
icon, never a placeholder. - Pass the app's router link as
linkAs(Next'sLink) so internal links prefetch. - In a hub, keep the default
h3titles under the section'sh2; in a list of links,titleAs="span".
Related components
Generated from the code of @krizaka/ui 2.9.0: its meta.ts, its examples and its types.Edit this documentation on GitHub
Landscape
The Krizaka valley at dusk — peaks, a phoenix over a river of two flames, trees of light and the flock at work: a decorative backdrop in its own colours or in the host brand's.
Mascot quote
A rule, a promise or a decision told by a bird: the sentence in a speech bubble, the bird under its tail and who speaks — inline in a card, callout alone in a section.