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." />

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

<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.

<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="<svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'><path d='M13 2 3 14h9l-1 8 10-12h-9z'/></svg>" Description="Startup nav-graph build is measured in milliseconds even on hundreds of pages." />

Write the SVG with single-quoted attributes so it fits inside the double-quoted IconSvg value.

The same attribute works on a Card written straight into the page:

Composable
An inline card with an icon.

Write the markup itself, not HTML entities : attribute values are not decoded.

With child content

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

Composable
Bring your own component library, register it in one line with RegisterComponentsFromAssembly, and use its tags in markdown. 
<Card Title="Composable">
Bring your own component library, register it in one line with <code>RegisterComponentsFromAssembly</code>, and use its tags in markdown.
</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.
Href string? — When set, the whole card becomes a link pointing here.
IconSvg string? — Raw SVG markup rendered above the title. Use single quotes inside it.
External bool false When true (and Href set), adds target='_blank' and rel='noopener'.
ChildContent RenderFragment? — Rich body content, rendered below the description.

See also

CardGrid
Responsive layout wrapper for a set of cards.
LinkCard
Simpler variant : always a link, with a trailing arrow glyph.