OsirionCardGrid

OsirionCardGrid lays cards out in equal columns: the number you ask for on wide screens, at most two on tablets and one on phones. It renders a plain <div> grid without script and takes any content, such as feature cards with icons.

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

@using Osirion.Blazor.Components

<OsirionCardGrid Columns="3">
    <OsirionFeatureCard Title="Fast pages"
                        Description="HTML on the first request."
                        Items="@(["No client script", "Cache friendly"])">
        <Icon>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" /></svg>
        </Icon>
    </OsirionFeatureCard>
    <OsirionFeatureCard Title="Themed by tokens"
                        Description="One set of colors for every framework."
                        Items="@(["Light and dark", "Six palettes"])">
        <Icon>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9" /><path d="M12 3v18" /></svg>
        </Icon>
    </OsirionFeatureCard>
    <OsirionFeatureCard Title="Accessible markup"
                        Description="Landmarks, headings and labels in place."
                        Items="@(["Keyboard friendly", "Readable contrast"])">
        <Icon>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="5" r="2" /><path d="M5 9h14M12 9v12M8 21l4-6 4 6" /></svg>
        </Icon>
    </OsirionFeatureCard>
</OsirionCardGrid>

Usage

@using Osirion.Blazor.Components

<OsirionCardGrid Columns="3">
    <OsirionFeatureCard Title="Fast pages" Description="HTML on the first request." />
    <OsirionFeatureCard Title="Themed by tokens" Description="One set of colors for every framework." />
    <OsirionFeatureCard Title="Accessible markup" Description="Landmarks, headings and labels in place." />
</OsirionCardGrid>

Parameters

Unmatched attributes are written to the grid <div>, so an aria-label or an id can go there.

Behavior

• The component renders plain HTML and needs no script.
• Columns takes 1 to 4; a value outside the range moves to the nearest one. The grid shows that many columns from 992px, at most two from 640px, and one below.
• The columns are set by a class, not an inline style, so the grid writes no style attribute for a Content Security Policy to block.
• Each cell can shrink below its content's width, so a wide card cannot widen the page.

Styling

Classes: osirion-card-grid and osirion-card-grid-columns-1 to osirion-card-grid-columns-4. The gap between cells is --osirion-spacing-6; set another in Class or Style.

Related

• Feature card, with an Icon and Items for a grid of features
• Cards
• Metric grid, for figures