HeroCard

Usage

<HeroCard> is the largest, most visual card in the library. Use it as a hero anchor at the top of a landing page or section overview — one per page maximum.

<HeroCard
  title="Welcome to CodivDocs"
  description="Build documentation sites in minutes."
  icon="rocket"
  href="/quickstart"
>
  Connect a GitHub repo, push MDX files, and your docs site is live
  in 30 seconds. No build configuration needed.
</HeroCard>

Visual treatment

HeroCard ships with three visual touches that the smaller card components don't have:

1. Subtle grid pattern in the background, faded toward the top-right corner via a radial mask

2. Larger icon plate (16x16 pixels with primary tint background) compared to Card / Tile / LinkCard

3. Gradient background — defaults to a primary-color gradient that matches the tenant theme

The total visual weight is roughly 3x a Card — appropriate for a single hero spot, too loud if you stack multiple on one page.

Without href

The card works as a non-clickable hero too. Omit href to render it as a static promotional block:

<HeroCard title="What's new in v1.2" icon="sparkles">
  Hybrid search, new theme tokens, and 36 component library.
</HeroCard>

Custom gradient

Override the default primary gradient with any CSS gradient string:

<HeroCard
  title="Get Pro"
  icon="zap"
  href="/pricing"
  gradient="linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)"
>
  Unlimited projects, AI search, custom domains.
</HeroCard>

When NOT to use

HeroCard is the page-level anchor — exactly one per page, exactly at the top.

Props