Card

Card is the visual grouping primitive. A titled panel with an optional description, an optional icon, and optional link behavior : renders as <a> when you set Href, as a plain <div> otherwise.

Basic use

Markdown-first authoring

YAML frontmatter, fenced code blocks with Shiki highlighting, live-rendered `razor:preview` examples.

<Card Title="Markdown-first authoring" Description="YAML frontmatter, fenced code blocks with Shiki highlighting, live-rendered `razor:preview` examples." />

As a link

Setting Href renders the card as an anchor : the whole card becomes clickable.

Installation

Install the CLI, add packages to a Blazor project.

<Card Title="Installation" Description="Install the CLI, add packages to a Blazor project." Href="/docs/getting-started/installation" />

Set External="true" to add target="_blank" and rel="noopener" : safe for outbound links.

Blazor docs

Microsoft's ASP.NET Core Blazor documentation.

<Card Title="Blazor docs" Description="Microsoft's ASP.NET Core Blazor documentation." Href="https://learn.microsoft.com/aspnet/core/blazor/" External="true" />

With an icon

Pass raw SVG markup as IconSvg. It renders inside a .doc-card-icon container above the title.

Fast

Startup nav-graph build is measured in milliseconds even on hundreds of pages.

<Card Title="Fast" IconSvg="&lt;svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'&gt;&lt;path d='M13 2 3 14h9l-1 8 10-12h-9z'/&gt;&lt;/svg&gt;" Description="Startup nav-graph build is measured in milliseconds even on hundreds of pages." />

Escaping SVG in markdown

When authoring in .md, the SVG markup inside IconSvg="..." must be HTML-entity-encoded (<, >) : otherwise the markdown parser sees it as raw tags and eats them. In a .razor page you'd just write IconSvg="<svg …>...</svg>".

With child content

Use ChildContent for anything richer than a description : lists, a code block, another primitive.

Composable

Bring your own component library. Register in one line:

services.AddShellDocs(o => o.RegisterComponentsFromAssembly<TMarker>());

<Card Title="Composable">
Bring your own component library. Register in one line:

`services.AddShellDocs(o =&gt; o.RegisterComponentsFromAssembly&lt;TMarker&gt;());`
</Card>

In a grid

Card's natural habitat is inside CardGrid, which lays out any number of children on a responsive grid.

Auto-wired navigation

File-based routing. Sidebar, breadcrumb, prev/next, TOC : all derived from the tree.

Cmd+K search

Client-side substring scoring. Zero backend.

Composable

Bring your own component library.

Blazor-native

Components render as real Razor components : not iframes, not screenshots.

<CardGrid Columns="2">
<Card Title="Auto-wired navigation" Description="File-based routing. Sidebar, breadcrumb, prev/next, TOC : all derived from the tree." />
<Card Title="Cmd+K search" Description="Client-side substring scoring. Zero backend." />
<Card Title="Composable" Description="Bring your own component library." />
<Card Title="Blazor-native" Description="Components render as real Razor components : not iframes, not screenshots." />
</CardGrid>

Props

Prop	Type	Default	Description
`Title`	`string?`	`—`	Optional title, rendered as `.doc-card-title`.
`Description`	`string?`	`—`	Optional short description below the title.
`External`	`bool`	`false`	When true (and Href set), adds `target='_blank'` and `rel='noopener'`.
`ChildContent`	`RenderFragment?`	`—`	Rich body content, rendered below the description.