OsirionChecklist

OsirionChecklist renders short phrases, each behind a check mark and with an optional line of description, such as what a plan includes or what a product does. It renders a plain <ul> without script, under an optional heading that names the list.

Package Osirion.Blazor.Core, namespace Osirion.Blazor.Components. Source on GitHub. Available from 4.3.

@using Osirion.Blazor.Components
@using Osirion.Blazor.Core.Models

<OsirionChecklist Title="Included in every plan" Items="items" />

@code {
    private static readonly ChecklistItem[] items =
    [
        new("Static SSR", "Every page arrives as complete HTML."),
        new("Light and dark themes", "Colors come from the theme tokens."),
        new("No client script required"),
    ];
}

Usage

Items are ChecklistItem records from Osirion.Blazor.Core.Models:

@using Osirion.Blazor.Components
@using Osirion.Blazor.Core.Models

<OsirionChecklist Title="Included in every plan" Items="@items" />

@code {
    private readonly ChecklistItem[] items =
    [
        new("Static SSR", "Every page arrives as complete HTML."),
        new("Light and dark themes"),
    ];
}

The heading is an h3, which fits a list inside a section that has its own h2. Set HeadingLevel to keep the outline in order elsewhere. HeroSection shows its Highlights and OsirionFeatureCard its Items through this component.

Parameters

Unmatched attributes are written to the root <div>.

ChecklistItem(string Title, string? Description = null) is a record: Title is the phrase and Description an optional line of plain text under it.

Behavior

• The component renders plain HTML and needs no script.
• The items are a <ul> with role="list", which keeps the list semantics that some browsers drop from a list without bullets, so screen readers announce how many items there are.
• With a Title, the list has aria-labelledby pointing at the heading. Each instance generates the heading's id, so two lists on a page never repeat one.
• Each check mark is an inline <svg> with aria-hidden="true" and focusable="false": the phrase alone carries the meaning.
• HeadingLevel sets h1 to h6. A value outside 1 to 6 moves to the nearest level, and the heading looks the same at every level.
• With no title and no items, the component renders nothing. Title, phrases and descriptions are HTML-encoded.

Styling

Classes: osirion-checklist (the root), osirion-checklist-title, osirion-checklist-list, osirion-checklist-item, osirion-checklist-mark, osirion-checklist-text, osirion-checklist-item-title and osirion-checklist-item-description.

The check mark is drawn in --osirion-link-color (CanvasText in forced colors mode), the phrase inherits the text color around it and the description uses --osirion-text-secondary. The items stay left-aligned inside a centered block.

Related

• Hero section, whose Highlights render as a checklist
• Feature card, whose Items render as a checklist
• Steps, for numbered steps