OsirionMetricGrid

OsirionMetricGrid lays out several metric cards as a responsive list: one column on phones, two from 576px wide, and two, three or four from 992px. Describe each metric with a MetricGridItem; the grid needs no child markup.

Package Osirion.Blazor.Core, namespace Osirion.Blazor.Components. Source on GitHub.

@using Osirion.Blazor.Components

@* Sample metrics, not facts about anything *@
<OsirionMetricGrid Columns="MetricGridColumns.Three"
                   AriaLabel="Sample shop metrics"
                   Metrics="metrics" />

@code {
    private static readonly IReadOnlyList<OsirionMetricGrid.MetricGridItem> metrics =
    [
        new("1250", "Orders this month", Kicker: "Sample", Animate: true),
        new("2-4 days", "Delivery time", Kicker: "Sample", Accent: MetricCardAccent.Blue),
        new("98%", "Delivered on time", "Sample figure", MetricCardAccent.Purple, Elevated: true)
    ];
}

Usage

@using Osirion.Blazor.Components

<OsirionMetricGrid Columns="MetricGridColumns.Three"
                   AriaLabel="Service reliability metrics"
                   Metrics="metrics" />

@code {
    private readonly IReadOnlyList<OsirionMetricGrid.MetricGridItem> metrics =
    [
        new("99.9%", "Availability", "Measured over twelve months", MetricCardAccent.Teal, Animate: true),
        new("24/7", "Monitoring", Kicker: "Operations"),
        new("15 min", "Response target", Accent: MetricCardAccent.Amber, Elevated: true)
    ];
}

The figures above are placeholders; show only numbers you can stand behind.

Parameters

MetricGridItem is a record nested in the component: OsirionMetricGrid.MetricGridItem(string Value, string? Label = null, string? Description = null, MetricCardAccent Accent = MetricCardAccent.Green, string? Kicker = null, bool Elevated = false, bool Animate = false). Each member goes to the parameter of the same name on OsirionMetricCard; the card's Border and Shadow keep their defaults. MetricGridColumns has Two, Three and Four; Two stays at two columns on wide screens.

Behavior

• The grid is plain markup and CSS. Only a card with Animate loads the count-up script, through BlazorJSComponents, which AddOsirion registers; see OsirionMetricCard.
• The grid is a ul named by AriaLabel, and each metric is an li holding a card, so screen readers announce the number of metrics. With no metrics nothing is rendered.
• Class, CssClass and Style are applied to the ul, as are unmatched attributes. The list has role="list", which keeps its list semantics where the browser drops them for an unstyled list.
• Each card fills its cell with its own CSS, not a framework class, so the cards of a row are equally tall with or without Bootstrap.

Styling

The list has osirion-metric-grid and osirion-metric-grid-columns-{2|3|4}. The gap between cards is --osirion-metric-grid-gap (default 1rem). The cards keep their own classes and tokens; see the metric card page.

Related

• OsirionMetricCard
• Cards
• Sections