Divider

A thin line that groups content in lists and layouts. Only use dividers if items can't be grouped with open space. Use dividers to group things, not separate individual items.

List Dividers

Inbox


Sent


Drafts


Spam

<MudPaper Width="300px" Square="true">
    <MudList T="string">
        <MudListItem>Inbox</MudListItem>
        <MudDivider />
        <MudListItem>Sent</MudListItem>
        <MudDivider />
        <MudListItem>Drafts</MudListItem>
        <MudDivider />
        <MudListItem>Spam</MudListItem>
    </MudList>
</MudPaper>
Inset Dividers

Adds a margin to the left side of the divider.

Trending


Most Stars


History

<MudPaper Width="300px" Square="true">
    <MudList T="string">
        <MudListItem Icon="@Icons.Material.Filled.TrendingUp">
            Trending
        </MudListItem>
        <MudDivider DividerType="DividerType.Inset" />
        <MudListItem Icon="@Icons.Material.Filled.StarRate">
            Most Stars
        </MudListItem>
        <MudDivider DividerType="DividerType.Inset" />
        <MudListItem Icon="@Icons.Material.Filled.History">
            History
        </MudListItem>
    </MudList>
</MudPaper>
Middle Dividers

Middle dividers have margin on both left and right side.

Uranium-235

This is the type of uranium used in the RBMK reactors.


Select Reactor Type

RBMK-1000
RBMK-1500
RBMKP-2400
<MudCard>
    <MudCardHeader>
        <CardHeaderContent>
            <MudText Typo="Typo.h5">Uranium-235</MudText>
        </CardHeaderContent>
    </MudCardHeader>
    <MudCardContent>
        <MudText>This is the type of uranium used in the RBMK reactors.</MudText>
        <MudDivider DividerType="DividerType.Middle" Class="my-6"/>
        <MudText GutterBottom="true">Select Reactor Type</MudText>
        <MudChip T="string" Color="Color.Secondary">RBMK-1000</MudChip><MudChip T="string">RBMK-1500</MudChip><MudChip T="string">RBMKP-2400</MudChip>
    </MudCardContent>
    <MudCardActions>
        <MudButton Variant="Variant.Text" Color="Color.Primary">Read more</MudButton>
    </MudCardActions>
</MudCard>
An unhandled exception has occurred. See browser dev tools for details. Reload 🗙