LinkCard

Full-card navigation tile — title, optional description, trailing arrow. The entire card is the click target. Use inside CardGrid for page-link overviews.

<LinkCard> is a whole-card link: the border, title, description, and trailing arrow are all part of one clickable surface. Drop it inside a <CardGrid> to build section-index pages (this site’s /docs/components uses them) or next-step grids.

Single card

InstallationInstall the CLI and scaffold your first site in under a minute.

import { LinkCard } from '@publier/shell/components';

<LinkCard
  title="Installation"
  href="/docs/get-started/installation"
  description="Install the CLI and scaffold your first site in under a minute."
/>

Grid of link cards

Get startedWhat Publier is and how to ship your first site.

Theming14 built-in themes plus any CSS variable you want to override.

DeployShip to Vercel, Cloudflare, Netlify, or any static host.

External linkOpens an external resource in a new tab.

import { CardGrid, LinkCard } from '@publier/shell/components';

<CardGrid>
  <LinkCard
    title="Get started"
    href="/docs/get-started/introduction"
    description="What Publier is and how to ship your first site."
  />
  <LinkCard
    title="Theming"
    href="/docs/customize/theming"
    description="14 built-in themes plus any CSS variable you want to override."
  />
  <LinkCard
    title="Deploy"
    href="/docs/deploy/deployment"
    description="Ship to Vercel, Cloudflare, Netlify, or any static host."
  />
  <LinkCard
    title="External link"
    href="https://example.com"
    description="Opens an external resource in a new tab."
    target="_blank"
    rel="noopener noreferrer"
  />
</CardGrid>

Without a description

Omit description for a title-only card — useful when the destination URL is self-explanatory:

<CardGrid>
  <LinkCard title="Callouts" href="/docs/components/callouts" />
  <LinkCard title="Badge" href="/docs/components/badge" />
  <LinkCard title="Steps" href="/docs/components/steps" />
  <LinkCard title="Tabs" href="/docs/components/tabs" />
</CardGrid>

Props

Prop	Type	Default	Description
`title`	`string`	—	Card heading. Required.
`href`	`string`	—	Destination URL. Required.
`description`	`string`	—	Secondary text below the title.
`rel`	`string`	—	`rel` attribute (e.g. `"noopener noreferrer"` for external links).
`target`	`'_blank' \| '_self' \| '_parent' \| '_top'`	—	Link target.
`class`	`string`	—	Extra CSS class.

Behaviour

The entire card is one <a> — the border, title, description, and trailing arrow all share the same click target.
External links (target="_blank") render a small “(opens in new tab)” hint via aria-label for accessibility.
Zero JavaScript.

Non-link card with a variant accent → Card.
Button-style anchor for CTAs → LinkButton.
Compact icon-led grid → Tiles.