Divider

A themable horizontal or vertical divider component for visual separation. Supports orientation, inset spacing, custom thickness, and color overrides.

Quick Start

Basic horizontal divider for separating content sections.

Content above the divider

Content below the divider

razor

<p>Content above the divider</p>
<FodDivider/>
<p>Content below the divider</p>

Orientation

Dividers can be horizontal (default) or vertical.

Horizontal (Default)

Above

Below

Vertical

Left

Right

razor

<FodDivider Orientation="Orientation.Horizontal"/>
<FodDivider Orientation="Orientation.Vertical"/>

Inset Variations

Control how the divider is inset from container edges.

None (edge-to-edge)

Padding (respects container padding)

Content (aligns with content)

razor

<FodDivider Inset="DividerInset.None"/>
<FodDivider Inset="DividerInset.Padding"/>
<FodDivider Inset="DividerInset.Content"/>

Custom Styling

Override default thickness and color with custom values.

Thickness: 2px

Color: #0066cc

Combined

Thickness

Color

razor

<FodDivider Thickness="2px"/>
<FodDivider Color="#0066cc"/>
<FodDivider Thickness="3px" Color="var(--color-primary-base)"/>

Use Cases

Common divider patterns for lists and section breaks.

List Separators

Item 1

Item 2

Item 3

Section Break

Section A

Content for the first section.

Section B

Content for the second section.

Vertical Separator in Toolbar

razor

@* List separators *@
<div class="list-item">Item 1</div>
<FodDivider Inset="DividerInset.Padding"/>
<div class="list-item">Item 2</div>

@* Vertical separator in toolbar *@
<FodButton>Save</FodButton>
<FodDivider Orientation="Orientation.Vertical"/>
<FodButton>Delete</FodButton>

API Reference

FodDivider component properties and their descriptions.

No properties defined.