M
Marai.UI v1.0.0-alpha.7

Separator

A visual divider that separates content horizontally or vertically with customizable styles. Renders a semantic div with role="separator" and the appropriate aria-orientation attribute for accessibility.

Usage

Add the namespace import and include the stylesheet reference if not already done.

razor 
@using Marai.UI.Components.MSeparator

Basic usage:

Preview

Above the separator

Below the separator

razor 
<div style="width:100%;max-width:24rem;">
    <p style="margin:0 0 0.75rem;">Above the separator</p>
    <MSeparator />
    <p style="margin:0.75rem 0 0;">Below the separator</p>
</div>

Examples

Orientation

The Orientation parameter controls whether the separator is displayed horizontally or vertically. Use MSeparatorOrientation.Horizontal (default) for a horizontal divider or MSeparatorOrientation.Vertical for a vertical divider.

Horizontal (Default)

The default orientation is horizontal — a full-width line spanning across its container.

Preview
Section A Section B
razor 
<div style="width:100%;max-width:24rem;display:flex;flex-direction:column;gap:0.75rem;">
    <span>Section A</span>
    <MSeparator Orientation="MSeparatorOrientation.Horizontal" />
    <span>Section B</span>
</div>

Vertical

Set Orientation="MSeparatorOrientation.Vertical" to render a vertical divider. The parent container must have a defined height for the separator to be visible.

Preview
Left Center Right
razor 
<div style="display:flex;align-items:center;gap:0.75rem;height:2rem;">
    <span>Left</span>
    <MSeparator Orientation="MSeparatorOrientation.Vertical" />
    <span>Center</span>
    <MSeparator Orientation="MSeparatorOrientation.Vertical" />
    <span>Right</span>
</div>

Separator Types

The Type parameter allows you to customize the visual appearance of the separator. Available types include LightSubtle, Thick, Dashed, and Gradient.

Light Subtle

A subtle, thin separator with reduced opacity. Ideal for minimal, clean designs.

Preview
Light separator for subtle division Content continues below
razor 
<div style="width:100%;max-width:24rem;display:flex;flex-direction:column;gap:0.75rem;">
    <span>Light separator for subtle division</span>
    <MSeparator Type="MSeparatorType.LightSubtle" />
    <span>Content continues below</span>
</div>

Thick

A thicker, more prominent separator. This is the default type.

Preview
Prominent division with thick separator Distinct section below
razor 
<div style="width:100%;max-width:24rem;display:flex;flex-direction:column;gap:0.75rem;">
    <span>Prominent division with thick separator</span>
    <MSeparator Type="MSeparatorType.Thick" />
    <span>Distinct section below</span>
</div>

Dashed

A dashed line separator for a different visual style.

Preview
Dashed style separator Adds visual interest
razor 
<div style="width:100%;max-width:24rem;display:flex;flex-direction:column;gap:0.75rem;">
    <span>Dashed style separator</span>
    <MSeparator Type="MSeparatorType.Dashed" />
    <span>Adds visual interest</span>
</div>

Gradient

A gradient separator that fades from center to edges for a modern look.

Preview
Gradient separator adds depth Modern aesthetic
razor 
<div style="width:100%;max-width:24rem;display:flex;flex-direction:column;gap:0.75rem;">
    <span>Gradient separator adds depth</span>
    <MSeparator Type="MSeparatorType.Gradient" />
    <span>Modern aesthetic</span>
</div>

Type and Orientation Combinations

Combine different types with orientations for various design needs.

Preview
Horizontal Types
Vertical Types
razor 
<div style="display:flex;flex-direction:column;gap:1.5rem;width:100%;max-width:32rem;">
    <!-- Horizontal Types -->
    <div style="display:flex;flex-direction:column;gap:0.5rem;">
        <small style="font-weight:600;color:var(--text-secondary);">Horizontal Types</small>
        <MSeparator Type="MSeparatorType.LightSubtle" />
        <MSeparator Type="MSeparatorType.Thick" />
        <MSeparator Type="MSeparatorType.Dashed" />
        <MSeparator Type="MSeparatorType.Gradient" />
    </div>

    <!-- Vertical Types -->
    <div>
        <small style="font-weight:600;color:var(--text-secondary);display:block;margin-bottom:0.5rem;">Vertical Types</small>
        <div style="display:flex;gap:1rem;height:4rem;align-items:center;">
            <MSeparator Orientation="MSeparatorOrientation.Vertical" Type="MSeparatorType.LightSubtle" />
            <MSeparator Orientation="MSeparatorOrientation.Vertical" Type="MSeparatorType.Thick" />
            <MSeparator Orientation="MSeparatorOrientation.Vertical" Type="MSeparatorType.Dashed" />
            <MSeparator Orientation="MSeparatorOrientation.Vertical" Type="MSeparatorType.Gradient" />
        </div>
    </div>
</div>

Inside a Card

Separators blend naturally into card layouts to divide sections of content.

Preview

Account Settings

Manage your account preferences and security.

Quick Links
Profile · Security · Notifications
razor 
<MCard Class="w-full max-w-sm rounded-lg border border-slate-200 bg-white shadow-sm">
    <MCardHeader Class="flex flex-col gap-1 px-6 pt-6 pb-3">
        <MCardTitle Class="text-lg font-semibold text-slate-950">Account Settings</MCardTitle>
        <MCardDescription Class="text-sm text-slate-500">Manage your account preferences and security.</MCardDescription>
    </MCardHeader>
    <MCardContent Class="px-6 pb-6">
        <MSeparator Type="MSeparatorType.LightSubtle" />
        <div class="mt-3 flex flex-col gap-2">
            <div class="text-sm font-medium text-slate-900">Quick Links</div>
            <div class="text-sm text-slate-500">Profile · Security · Notifications</div>
        </div>
    </MCardContent>
</MCard>

Use vertical separators to divide navigation items or toolbar buttons.

Preview
razor 
<div style="display:flex;align-items:center;gap:1rem;padding:0.5rem;background:var(--surface);border-radius:0.5rem;">
    <button style="border:none;background:transparent;cursor:pointer;padding:0.5rem;">Home</button>
    <MSeparator Orientation="MSeparatorOrientation.Vertical" Type="MSeparatorType.LightSubtle" />
    <button style="border:none;background:transparent;cursor:pointer;padding:0.5rem;">About</button>
    <MSeparator Orientation="MSeparatorOrientation.Vertical" Type="MSeparatorType.LightSubtle" />
    <button style="border:none;background:transparent;cursor:pointer;padding:0.5rem;">Contact</button>
</div>

Between List Items

Separate list items with horizontal separators for better readability.

Preview
Item 1
Item 2
Item 3
Item 4
razor 
<div style="width:100%;max-width:24rem;display:flex;flex-direction:column;">
    <div style="padding:0.75rem 0;">Item 1</div>
    <MSeparator Type="MSeparatorType.LightSubtle" />
    <div style="padding:0.75rem 0;">Item 2</div>
    <MSeparator Type="MSeparatorType.LightSubtle" />
    <div style="padding:0.75rem 0;">Item 3</div>
    <MSeparator Type="MSeparatorType.LightSubtle" />
    <div style="padding:0.75rem 0;">Item 4</div>
</div>

API Reference

Parameter Type Default Description
Orientation MSeparatorOrientation Horizontal Controls the direction of the divider. Horizontal renders a full-width line; Vertical renders a full-height line.
Type MSeparatorType Thick Controls the visual style of the separator. Options: LightSubtle, Thick, Dashed, Gradient.
Class string? null Additional CSS class names appended to the separator element.
AdditionalAttributes Dictionary<string, object>? null Arbitrary HTML attributes passed through to the underlying div element (e.g. aria-label, data-*).

MSeparatorOrientation Enum

Value Description
Horizontal Renders a horizontal separator (full-width line). This is the default.
Vertical Renders a vertical separator (full-height line). Parent container must have a defined height.

MSeparatorType Enum

Value Description
LightSubtle A subtle, thin separator with reduced opacity. Best for minimal designs.
Thick A thicker, more prominent separator. This is the default type.
Dashed A dashed line separator for visual variety.
Gradient A gradient separator that fades from center to edges for a modern aesthetic.

Customization

Use the Class parameter to add custom spacing, colors, or other styles:

razor 
<MSeparator Class="my-4" />
Note: PreDef Not Supported

The MSeparator component does not support the PreDefName parameter. Use the Type, Orientation, and Class parameters for customization instead.

Accessibility

The MSeparator component automatically includes proper ARIA attributes:

  • role="separator" — Identifies the element as a separator
  • aria-orientation — Set to "horizontal" or "vertical" based on the Orientation parameter