Blazorise Divider component

Dividers are used to visually separate or group elements.

Examples

Basic

Dividers in their simplest form display a horizontal line.

I sit at my window this morning where the world like a passer-by stops for a moment, nods to me and goes.

There little thoughts are the rustle of leaves; they have their whisper of joy in my mind.

<Paragraph>
    I sit at my window this morning where the world like a passer-by stops for a moment, nods to me and goes.
</Paragraph>

<Divider />

<Paragraph>
    There little thoughts are the rustle of leaves; they have their whisper of joy in my mind.
</Paragraph>

Dashed

Use DividerType.Dashed custom property to show divider with a dashes.

What language is thine, O sea?

The language of eternal question.

<Paragraph>
    What language is thine, O sea?
</Paragraph>

<Divider DividerType="DividerType.Dashed" />

<Paragraph>
    The language of eternal question.
</Paragraph>

Dotted

Use DividerType.Dotted custom property to show divider with dots.

What language is thy answer, O sky?

The language of eternal silence.

<Paragraph>
    What language is thy answer, O sky?
</Paragraph>

<Divider DividerType="DividerType.Dotted" />

<Paragraph>
    The language of eternal silence.
</Paragraph>

Text Content

Use DividerType.TextContent custom property to show text in the middle of a divider.

What a world of merriment their melody foretells !

How they tinkle, tinkle, tinkle, In the icy air of night !

<Paragraph>
    What a world of merriment their melody foretells !
</Paragraph>

<Divider DividerType="DividerType.TextContent" Text="Edgar Allan Poe" />

<Paragraph>
    How they tinkle, tinkle, tinkle, In the icy air of night !
</Paragraph>

Best Practices

Content Hierarchy

Dividers should separate related groups rather than compensate for an unclear page structure. Prefer spacing or semantic headings whenever they communicate the relationship between sections more clearly.

Subtle Separation

Decorative dividers should not compete with the content they organize. When a divider contains text, keep the label concise and preserve the document's semantic heading structure separately.

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

<Divider />