Container

A theme-aware container component that constrains content width and applies consistent padding. Supports responsive max-width constraints, fluid stretching, fullbleed sections, and density presets.

Quick Start

Basic container with medium max-width. Containers center content and provide consistent horizontal padding.

Content inside a medium-width container

razor

<FodContainer MaxWidth="ContainerMaxWidth.Md">
    <p>Content inside a medium-width container</p>
</FodContainer>

Max-Width Variants

Container supports multiple max-width presets from small to extra-extra-large.

Sm (540px)

Md (720px)

Lg (960px)

Xl (1248px)

Xxl (1320px)

xxl

None (no constraint)

none

razor

<FodContainer MaxWidth="ContainerMaxWidth.Sm">Small</FodContainer>
<FodContainer MaxWidth="ContainerMaxWidth.Md">Medium</FodContainer>
<FodContainer MaxWidth="ContainerMaxWidth.Lg">Large</FodContainer>
<FodContainer MaxWidth="ContainerMaxWidth.Xl">XLarge</FodContainer>
<FodContainer MaxWidth="ContainerMaxWidth.Xxl">XXLarge</FodContainer>
<FodContainer MaxWidth="ContainerMaxWidth.None">None</FodContainer>

Fluid Container

Fluid containers stretch to viewport width while maintaining horizontal padding.

Fluid container stretches to full width

razor

<FodContainer Fluid="true">
    <p>Fluid container stretches to full width</p>
</FodContainer>

FullBleed Container

FullBleed containers render edge-to-edge with no horizontal padding. Safe-area padding is applied by default for mobile devices.

FullBleed with SafeArea (default)

Edge-to-edge with safe-area

FullBleed without SafeArea

Edge-to-edge without safe-area

razor

<FodContainer FullBleed="true" SafeArea="true">
    Edge-to-edge with safe-area padding
</FodContainer>

<FodContainer FullBleed="true" SafeArea="false">
    Edge-to-edge without safe-area
</FodContainer>

Density Variations

Container density affects internal padding. Choose from compact or comfortable (default).

Compact

Compact density

Comfortable (Default)

Comfortable density

razor

<FodContainer Density="Density.Compact">Compact</FodContainer>
<FodContainer Density="Density.Comfortable">Comfortable</FodContainer>

Custom Padding

Override default padding with custom horizontal (PaddingX) and vertical (PaddingY) spacing tokens.

PaddingX: Spacing16

Custom horizontal padding

PaddingY: Spacing8

Custom vertical padding

PaddingX

PaddingY

razor

<FodContainer PaddingX="Spacing.Spacing24" PaddingY="Spacing.Spacing16">
    Custom padding container
</FodContainer>

Breakpoint Integration

Containers can respond to viewport breakpoints. Current breakpoint is detected and displayed.

Current Breakpoint: detecting...

Resize the browser window to see the breakpoint change dynamically.

csharp

[Inject] IFodBreakpointListenerService BreakpointService { get; set; }

private BreakpointState? _breakpointState;

protected override void OnInitialized()
{
    BreakpointService.OnBreakpointChanged += HandleBreakpointChanged;
}

private void HandleBreakpointChanged(BreakpointState state)
{
    InvokeAsync(() => { _breakpointState = state; StateHasChanged(); });
}

API Reference

FodContainer component properties and their descriptions.

No properties defined.