OsirionContextCardGrid

OsirionContextCardGrid renders a section with a heading, optional intro text and a grid of labeled detail cards. Each card has a label, a short description and an accent color on its top border. Use it to set several short points side by side, such as one point per role or category.

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

@using Osirion.Blazor.Components

@* Sample text, not claims about any product *@
<OsirionContextCardGrid Title="Context by role"
                        Description="Sample cards: each one has a label, a detail and an accent color."
                        Id="demo-context-cards"
                        HeadingId="demo-context-cards-heading"
                        Items="items" />

@code {
    private static readonly OsirionContextCardGrid.ContextCardItem[] items =
    [
        new("Finance", "Sample detail for the first card.", "blue"),
        new("Operations", "Sample detail for the second card."),
        new("Security", "Sample detail for the third card.", "purple")
    ];
}

Usage

@using Osirion.Blazor.Components

<OsirionContextCardGrid Title="Context by role"
                        Description="Each role sees the same data through its own priorities."
                        Id="roles"
                        HeadingId="roles-heading"
                        Items="roleItems" />

@code {
    private readonly OsirionContextCardGrid.ContextCardItem[] roleItems =
    [
        new("Finance", "Cost variance and forecast predictability.", "blue"),
        new("Operations", "Coverage reliability and exception response."),
        new("Security", "Access reviews and audit evidence.", "purple")
    ];
}

Parameters

ContextCardItem is a record nested in the component: OsirionContextCardGrid.ContextCardItem(string Label, string Description, string Accent = "green"). The accent is a string written into a class name, osirion-context-card-grid-item-{accent}. The stylesheet defines blue, purple, indigo, teal and amber; any other value, including the default green, uses --osirion-context-card-grid-accent (default #176b45).

Behavior

• The component is plain markup and CSS and needs no script.
• The section is a landmark named by its heading: aria-labelledby points at the h2. Each grid generates its own heading id unless you set HeadingId, so several grids on a page never repeat an id. Set the parameter when you need a stable id to link to.
• Each card is an article with the label as an h3 and the description as a paragraph, so the headings nest under the section's h2.
• With an empty Title no heading is rendered and the section has no aria-labelledby. With no items, only the heading is rendered.
• Class and Style are not applied; use SectionClass for the section and ContainerClass for the container. Unmatched attributes are written to the section.
• ContainerClass defaults to container, a Bootstrap class. Under another framework set your own value.
• The cards fill the width with repeat(auto-fit, minmax(min(100%, 15rem), 1fr)).

Styling

The section has osirion-context-card-grid; inside are osirion-context-card-grid-container, osirion-context-card-grid-heading, osirion-context-card-grid-items and one osirion-context-card-grid-item per card. Override the look with --osirion-context-card-grid-padding, --osirion-context-card-grid-background, --osirion-context-card-grid-heading-color, --osirion-context-card-grid-description-color, --osirion-context-card-grid-accent, --osirion-context-card-grid-card-background, --osirion-context-card-grid-card-shadow and --osirion-context-card-grid-item-color. The heading and description fall back to the theme's text colors (--osirion-text-primary and --osirion-text-secondary). The component has no animation, so reduced motion changes nothing.

Related

• Cards
• OsirionMetricGrid
• Sections