OsirionSplitSection

OsirionSplitSection places copy beside an aside, such as a paragraph and a list next to an image, a card or a sample record. The two sit in equal columns from 768px, and below that the aside stacks under the copy. It renders without script.

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

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

<OsirionSplitSection>
    <Content>
        <p>Each request is checked against your rules, and every decision keeps the reasons behind it.</p>
        <OsirionChecklist Items="points" />
    </Content>
    <Aside>
        <OsirionRecordCard Title="Ticket 7781"
                           Status="On hold"
                           StatusTone="RecordStatusTone.Warning"
                           Rows="rows"
                           Footnote="Sample data" />
    </Aside>
</OsirionSplitSection>

@code {
    private static readonly ChecklistItem[] points =
    [
        new("Rules you can read"),
        new("A reason for every decision"),
    ];

    private static readonly RecordCardRow[] rows =
    [
        new("Requested by", "Support team"),
        new("Waiting for", "A second review"),
    ];
}

Usage

@using Osirion.Blazor.Components

<OsirionBaseSection Id="how-it-works" Eyebrow="How it works" Title="Every decision keeps its reasons">
    <OsirionSplitSection AsidePosition="SplitAsidePosition.Start">
        <Content>
            <p>Each request is checked against your rules.</p>
        </Content>
        <Aside>
            <img src="/images/rules.png" alt="The rules editor" width="640" height="400" />
        </Aside>
    </OsirionSplitSection>
</OsirionBaseSection>

The component has no heading or band of its own: put it in an OsirionBaseSection for the heading, the eyebrow and the band.

Parameters

Unmatched attributes are written to the root <div>.

Behavior

• The component renders plain HTML and needs no script.
• The copy always comes first in the markup, so reading and keyboard order run copy then aside on every screen. AsidePosition moves only the aside's column: End (the default) puts it on the right in a left-to-right page, Start on the left.
• Below 768px the columns stack, the aside under the copy.
• With only one slot filled, it spans both columns.

Styling

Classes: osirion-split-section (with osirion-split-section-aside-start when the aside is at the start), osirion-split-section-content and osirion-split-section-aside. The columns are vertically centered, with a gap of --osirion-spacing-8 when stacked and --osirion-spacing-12 side by side.

Related

• Base section, the band and heading around it
• Record card, a sample record for the aside
• Checklist, short points for the copy
• Sections