OsirionSteps

OsirionSteps renders numbered steps, each with a title and an optional description, for a "how it works" or "getting started" section. The steps sit side by side on wide screens and stack on narrow ones, or always stack with a line joining their numbers.

Available from 4.1.

Usage

Steps are StepItem records from Osirion.Blazor.Core.Models:

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

<OsirionSteps Items="@steps" />

@code {
    private readonly StepItem[] steps =
    [
        new("Install the package", "dotnet add package Osirion.Blazor"),
        new("Point it at your content", "A GitHub repository or a local folder of Markdown files."),
        new("Publish", "Static SSR pages that need no client script."),
    ];
}

For a longer process, or a narrow column, stack them:

<OsirionSteps Items="@steps" Vertical="true" />

Parameters

Unmatched attributes are written to the <ol>.

StepItem(string Title, string? Description = null) is a record: Title names the step and Description adds a sentence or two of plain text.

Behavior

• The component renders plain HTML and needs no script.
• The steps are an <ol>, so screen readers announce how many steps there are and the position of each. The visible numbers are drawn from a CSS counter and hidden from assistive technology, so they always match the list order and are not read twice.
• The title and description are paragraphs, not headings, so the steps do not add entries to the page outline. Put a heading for the whole section above the list.
• Title and description are HTML-encoded.

Styling

Side by side, the list is a grid of columns at least 12rem wide that wraps as the width shrinks. Classes: osirion-steps (with osirion-steps-vertical when stacked), osirion-step for each item, osirion-step-marker for the number, and osirion-step-body, osirion-step-title and osirion-step-description.

The number is a 2.5rem circle in --osirion-action-primary with text in --osirion-action-primary-text. The title uses --osirion-text-primary, the description --osirion-text-secondary, and the joining line --osirion-border-color.

Related

• Pricing table and feature comparison
• Base section
• Core section components