Section

A full-width band of a page, such as a hero.

JavaScript off: what the HTML and CSS do on their own.

A band of a page, such as a hero, a feature row or a newsletter sign-up: a section with vertical padding and an optional background. Inside an AppMain with a ContentWidth, it spans the whole main area (full bleed) while its content stays on the column, lined up with the rest of the page.

Usage

razor

<Section Bg="Color.FillSubtle">
    <Heading Level="2">Get the newsletter</Heading> ...
</Section>

A hero

Use Spacing="SectionSpacing.Lg" and a Bg for a hero or a closing call to action (64px of padding, 96px from 768px), with a Container to keep its content at a readable width.

Preview Code

Preview

Ship every release with confidence

Preview each change before it goes live, and roll back in one click.

Code

Hero.razor

<Section Spacing="SectionSpacing.Lg" Bg="Color.FillSubtle" Grow>
    <Container Size="ContainerSize.Sm">
        <Column Gap="4" Align="Align.Center">
            <Heading Level="2" Align="TextAlign.Center">Ship every release with confidence</Heading>
            <TextBlock Color="Color.Muted" Align="TextAlign.Center">Preview each change before it goes live, and roll back in one click.</TextBlock>
            <Row Gap="2" Wrap Justify="Justify.Center">
                <Button>Start free trial</Button>
                <Button Variant="ButtonVariant.Outline" Accent="Accent.Neutral">Talk to sales</Button>
            </Row>
        </Column>
    </Container>
</Section>

Spacing

Use Spacing for a band's vertical padding: Md, the default, is 48px (64px from 768px), and Sm is 32px, for a slimmer band like this sign-up.

Preview Code

Preview

Everything in one place

Projects, invoices and people, with one search across all of them.

Get the monthly changelog

Code

Bands.razor

<Column Grow>
    <Section>
        <Container Size="ContainerSize.Sm">
            <Column Gap="2">
                <Heading Level="2">Everything in one place</Heading>
                <TextBlock Color="Color.Muted">Projects, invoices and people, with one search across all of them.</TextBlock>
            </Column>
        </Container>
    </Section>
    <Section Spacing="SectionSpacing.Sm" Bg="Color.FillSubtle">
        <Container Size="ContainerSize.Sm">
            <Row Gap="4" Align="Align.Center" Wrap>
                <TextBlock Weight="FontWeight.Semibold" Grow>Get the monthly changelog</TextBlock>
                <Button>Subscribe</Button>
            </Row>
        </Container>
    </Section>
</Column>

Details

It works out the bleed from the main area and the column, so put it at the page's top level or in containers without side padding of their own. It works with no script.

Mode support

What works in each mode, Section
Feature	Off	Static	Live
Everything	Yes	Yes	Yes

Off: JavaScript disabled. Static: a static SSR page with IzzyBlazor's script. Live: an interactive page (Server, WebAssembly or Auto).

Accessibility

It renders a section, which screen readers list as a region only when it has a name: point aria-labelledby at its heading's id.

Parameters

Section parameters
Prop	Type	Default
`Spacing`Vertical padding.	`SectionSpacing`	`SectionSpacing.Md`
`FullBleed`Spans the whole main area when the page has a content width.	`bool`	`true`
`As`The element to render: div on a Box; components built on it set their own (List a ul, Section a section).	`string`	`"section"`
`ChildContent`The content.	`RenderFragment?`

Plus 25 surface props, 16 item props and 4 common props.

Full API