Content components

The content-oriented subset of the Pennington.UI.Components Razor component library, covering callout cards, numbered steps, syntax-highlighted code, and wide-table overflow handling. Components live in namespace Pennington.UI.Components. All but CodeBlock are pre-registered with Mdazor by DocSiteServiceExtensions.AddDocSite, making them available as tags inside markdown without additional wiring; CodeBlock is Razor-page-only — markdown authors use fenced code blocks instead.

Stylesheet

The components ship as MonorailCSS utility classes; the package contributes no separate stylesheet. There is no _content/Pennington.UI/styles.css to load.

Overview

Each component is listed alphabetically below with a one-line summary, a parameter table, and a minimal usage example.

Badge

Inline pill with ring and tinted background, variant-mapped to a MonorailCSS color palette; renders a <span> and is safe inside flowing prose and table cells.

Parameters

Example

<Badge Text="New" Variant="tip" Size="small" />

BigTable

Overflow wrapper for tables wider than the main column; emits a <div> with horizontal scroll and reduced text size, with the table supplied as ChildContent.

Parameters

Example

<BigTable>
    <table>...</table>
</BigTable>

Card

Static non-clickable callout card; renders a rounded, tinted panel with an optional icon region and bold heading, with not-prose applied inside so surrounding prose styles do not affect card body content.

Parameters

Example

<Card Title="Fast" Color="emerald">
    Pages render in a single SSR pass through the content pipeline.
</Card>

CardGrid

Responsive grid container for Card or LinkCard children; renders one column on small viewports and a Columns-wide grid from the sm breakpoint up, with Columns interpolated into a MonorailCSS class.

Parameters

Example

<CardGrid Columns="3">
    <LinkCard Title="Getting started" Href="/tutorials" />
    <LinkCard Title="How-to guides" Href="/how-to" />
    <LinkCard Title="Reference" Href="/reference" />
</CardGrid>

Checkpoint

Standalone "verify what you should see now" callout for tutorial pages; emits <div class="markdown-alert markdown-alert-checkpoint not-prose"> with a literal Checkpoint label paragraph and the body content beneath it, sharing chrome with GitHub-style alerts. Renders as a <div>, not a heading, so the right-side outline nav skips it.

Parameters

Example

<Checkpoint>
  
Run `dotnet run` and visit `http://localhost:5000/`.
  
- The page renders with the expected H1.
- The right-side outline lists only the real section headings.
  
</Checkpoint>

CodeBlock

Razor-page entry to the shared code-block rendering pipeline. A modifier-bearing Language (for example, csharp:symbol) routes through the registered ICodeBlockPreprocessor implementations — the public extension point that the tree-sitter :symbol family plugs into when AddTreeSitter is wired. Not registered with Mdazor — markdown authors should use a fenced code block (same pipeline, same output) instead.

Parameters

Example

<CodeBlock Language="csharp">
var x = 1;
</CodeBlock>
  
<CodeBlock Language="csharp:symbol,bodyonly">examples/Foo/Program.cs > Program.Main</CodeBlock>

LinkCard

Clickable variant of Card; wraps the entire card body in an <a> bound to Href, with hover states tinting the background using the Color palette.

Parameters

Example

<LinkCard Title="Getting started" Href="/tutorials/getting-started" Color="primary">
    A zero-to-running-site walkthrough.
</LinkCard>

RenderedFixture (DocSite only)

Embeds a fixture file (markdown or HTML) from anywhere in the solution as a captioned <figure>, rendering markdown through the standard MarkdownPipeline. Useful when a how-to page wants to show the actual rendered output of a complete example file (a full alert syntax, a composed configuration) rather than authoring the same content twice. Registered with Mdazor by AddDocSite but not by AddBlogSite.

Parameters

Example

<RenderedFixture Path="examples/DocSitePagesAndLinksExample/snippets/markdown-alert-example.md"
                 Caption="Built-in alert syntax" />

Step

One step inside a Steps list; renders a <section class="step"> with a numbered medallion on the left rail, an optional title, the body content, and an optional Checkpoint slot for a "verify the result" callout. Must be nested directly inside <Steps> for the rail border to align.

Parameters

Example

<Steps>
    <Step StepNumber="1" Title="Install the template">Run the dotnet new install command.</Step>
    <Step StepNumber="2">Run <code>dotnet run</code>.</Step>
</Steps>

Steps

Container for a vertical step list; emits <div class="steps-thread not-prose"> rendering a vertical thread on the left, populated by Step children which punch a numbered medallion onto the thread.

Parameters

Example

<Steps>
    <Step StepNumber="1">First, install.</Step>
    <Step StepNumber="2">Then, run.</Step>
    <Step StepNumber="3">Finally, deploy.</Step>
</Steps>

Mdazor registration

AddDocSite pre-registers nine components with Mdazor (eight content components plus RenderedFixture); AddBlogSite registers eight (everything but RenderedFixture). Sites built on either template can invoke these tags directly inside markdown without calling AddMdazorComponent<T>() manually.

// AddDocSite
services.AddMdazorComponent<Badge>()
        .AddMdazorComponent<BigTable>()
        .AddMdazorComponent<Card>()
        .AddMdazorComponent<CardGrid>()
        .AddMdazorComponent<Checkpoint>()
        .AddMdazorComponent<LinkCard>()
        .AddMdazorComponent<RenderedFixture>() // AddDocSite only
        .AddMdazorComponent<Step>()
        .AddMdazorComponent<Steps>();

Hosts without AddDocSite register the same surface through one AddMdazorComponent<T>() call per component. See Drop a Razor component into a markdown page for the host-by-host recipe.

See also

• How-to: Use UI components inside markdown
• Related reference: Navigation components
• Related reference: Utility components