CodivDocs

Usage

<LinkCard> is a horizontal card optimized for "what should I read next" links at the end of a tutorial or section. The trailing arrow signals "click me to continue".

<LinkCard
  title="Read the API reference"
  description="Explore all available endpoints"
  href="/api/authentication"
  icon="code"
/>

Read the API reference

Explore all available endpoints

Multiple link cards

Stack several at the end of a page for a "next steps" section:

## Next steps

<LinkCard title="Configure your theme" description="Pick from 3 presets or write custom CSS" href="/configuration/theme" icon="palette" />
<LinkCard title="Set up search" description="Full-text search with pg_trgm" href="/features/search" icon="search" />
<LinkCard title="Connect a custom domain" description="Bring your own docs.yoursite.com" href="/configuration/custom-domain" icon="globe" />

Configure your theme

Pick from 3 presets or write custom CSS

Set up search

Full-text search with pg_trgm

Connect a custom domain

Bring your own docs.yoursite.com

Without an icon

The icon is optional, but the card looks cleaner with one:

<LinkCard
  title="Migrate from Mintlify"
  href="/guides/migrating-from-mintlify"
/>

Differences from Card

	`<LinkCard>`	`<Card>`
Layout	Horizontal: icon \| content \| arrow	Vertical: icon, title, description
Always linkable	Yes — `href` required	No — works without `href`
Visual emphasis	Trailing arrow signals navigation	Self-contained tile
Use case	"Next step" / "see also" CTAs	Feature grids, navigation hubs

For multiple cards in a grid (3-4 across), use <Card> + <CardGroup>. For a single "click here next" CTA at the end of a page, use <LinkCard>.

Props

Prop	Type	Required	Description
`title`	`string`	Yes	Card heading
`href`	`string`	Yes	Link destination
`description`	`string`	No	Subtitle below the heading
`icon`	`string`	No	Lucide icon name or emoji