OsirionBaseSection

OsirionBaseSection renders a <section> with an id, an optional heading and description, your content inside the CSS framework's container, and consistent vertical padding. Use it for the bands of a landing page so they share spacing and alignment.

Usage

<OsirionBaseSection Id="why" Title="Why static SSR" Description="Pages arrive as HTML and work without script.">
    <p>Search engines and readers get the full page on the first request.</p>
</OsirionBaseSection>

A left-aligned section with more padding, a background image and a shadow underneath:

<OsirionBaseSection Id="newsletter"
                    Title="Release notes by email"
                    TextAlignment="Alignment.Left"
                    Padding="SectionPadding.Large"
                    BackgroundImageUrl="/assets/images/blazor-cover.png"
                    HasDivider="true">
    <a href="/subscribe">Subscribe</a>
</OsirionBaseSection>

With an image, the text turns white and a dark overlay (ShowOverlay, on by default) keeps it readable.

Parameters

Unmatched attributes are written to the <section>. The pattern values are Dots, Grid, Diagonal, Honeycomb, GradientMesh, AnimatedGrid, TechWave, Circuit and DotsFade; see background pattern.

Behavior

• The component renders plain HTML and needs no script.
• The heading block appears only when Title or TitleContent is set; a Description on its own is not shown.
• Title and Description are written as raw HTML without sanitizing, so you can use inline markup such as <em>. Pass only text you control; render user or content-provided text with TitleContent and DescriptionContent, where Blazor encodes it.
• BackgroundImageUrl is CSS-escaped before it is written (since 4.0), so a value cannot close the url() and add declarations. BackgroundColor and TextColor are written as given: use your own values.
• The section has scroll-margin-top: 3rem, so a link to #id does not land under a sticky header.

Styling

The <section> has osirion-section, osirion-section-align-{left|center|right|justify} and osirion-section-padding-{none|small|medium|large}, plus osirion-section-with-background, osirion-section-with-pattern and osirion-section-divider when those options are on. Inside are osirion-section-overlay, the container, osirion-section-header (with osirion-section-header-{alignment}), osirion-section-title, osirion-section-description and osirion-section-content.

The container class follows the configured CSS framework:

Colors come from --osirion-background-primary and --osirion-text-primary, and spacing from the --osirion-spacing-* tokens, so a framework adapter or your theme restyles every section at once.

Related

• Hero section
• Background pattern
• Core section components