sufi-blazor/docs/components/layout/SbContainer.md

SbContainer

A centered content container with responsive max-width presets and optional gutters.

Parameters

Parameter	Type	Default	Description
MaxWidth	SbContainerMaxWidth	Lg	Maximum width preset for the container
DisableGutters	bool	false	When true, removes horizontal padding
Class	string?	null	Additional CSS classes
Style	string?	null	Inline styles
AdditionalAttributes	Dictionary<string, object>?	null	Additional HTML attributes

Templates / Slots

Slot	Type	Description
ChildContent	RenderFragment	Content to render inside the container

SbContainerMaxWidth Enum

public enum SbContainerMaxWidth
{
    Sm,    // 640px
    Md,    // 768px
    Lg,    // 1024px
    Xl,    // 1280px
    Xxl,   // 1536px
    Fluid  // No max-width (full width)
}

CSS Classes

• sb-container - Base class
• sb-container--sm - Small max-width (640px)
• sb-container--md - Medium max-width (768px)
• sb-container--lg - Large max-width (1024px)
• sb-container--xl - Extra large max-width (1280px)
• sb-container--xxl - 2X large max-width (1536px)
• sb-container--fluid - Full width container
• sb-container--no-gutters - Removes horizontal padding

Examples

Basic Usage

<SbContainer>
    <h1>Page Title</h1>
    <p>Content is centered with a default max-width of 1024px.</p>
</SbContainer>

Small Container

<SbContainer MaxWidth="SbContainerMaxWidth.Sm">
    <SbCard>
        <p>Narrow content area, great for forms.</p>
    </SbCard>
</SbContainer>

Full Width

<SbContainer MaxWidth="SbContainerMaxWidth.Fluid">
    <SbDataGrid Items="@items" />
</SbContainer>

Without Gutters

<SbContainer DisableGutters="true">
    <div class="full-bleed-banner">
        Edge-to-edge content
    </div>
</SbContainer>

Page Layout

Use SbContainer inside your layout (e.g. Wish theme layouts use it for main content):

<SbContainer MaxWidth="SbContainerMaxWidth.Xl">
    <SbStack Gap="6">
        <SbHeading Level="1">Dashboard</SbHeading>
        <SbGrid Columns="3" Gap="4">
            <SbStatCard Value="1,234" Label="Users" />
            <SbStatCard Value="$56K" Label="Revenue" />
            <SbStatCard Value="89%" Label="Uptime" />
        </SbGrid>
        <SbCard>
            <SbDataGrid Items="@recentOrders" />
        </SbCard>
    </SbStack>
</SbContainer>

Form Container

<SbContainer MaxWidth="SbContainerMaxWidth.Sm">
    <SbCard>
        <SbStack Gap="4">
            <SbHeading Level="2">Sign In</SbHeading>
            <SbTextField Label="Email" @bind-Value="email" />
            <SbTextField Label="Password" Type="password" @bind-Value="password" />
            <SbButton FullWidth="true">Sign In</SbButton>
        </SbStack>
    </SbCard>
</SbContainer>