Page Container
Wrap the main content of a page, centering it and constraining it to a width appropriate for the type of page
Usage
Wrap the main content of a page in a <sa-page-container>. It centers the content horizontally, applies a consistent gutter, spaces its children vertically, and can constrain the content to a maximum width via the width attribute.
<sa-page-container width="PageContainerWidth.Medium">
...
</sa-page-container>Examples
Full width
The default width. The content fills the available space, which suits pages built around data tables and grids.
Theme
<sa-page-container>
<sa-page-header>
<sa-page-header-title>Bookings</sa-page-header-title>
<sa-page-header-description>
All bookings across Voyager Travel destinations, including pending and cancelled reservations.
</sa-page-header-description>
<sa-page-header-actions>
<sa-button variant="ButtonVariant.Outline">
<sa-icon name="download"/>
Export
</sa-button>
<sa-button>
<sa-icon name="plus"/>
New booking
</sa-button>
</sa-page-header-actions>
</sa-page-header>
<sa-table>
<sa-table-header>
<sa-table-row>
<sa-table-head class="w-[100px]">Booking #</sa-table-head>
<sa-table-head>Status</sa-table-head>
<sa-table-head>Destination</sa-table-head>
<sa-table-head class="text-right">Amount</sa-table-head>
</sa-table-row>
</sa-table-header>
<sa-table-body>
@foreach (var booking in StaticData.Bookings)
{
<sa-table-row>
<sa-table-cell class="font-medium">@booking.Id</sa-table-cell>
<sa-table-cell>
<sa-badge variant="@GetBadgeVariant(booking.Status)">
@booking.Status.ToString()
</sa-badge>
</sa-table-cell>
<sa-table-cell>@booking.Destination</sa-table-cell>
<sa-table-cell class="text-right">
@booking.Amount.ToString("N")
</sa-table-cell>
</sa-table-row>
}
</sa-table-body>
</sa-table>
</sa-page-container>Large
A wide layout suited to dashboards.
Theme
<sa-page-container width="PageContainerWidth.Large">
<sa-page-header>
<sa-page-header-title>Dashboard</sa-page-header-title>
<sa-page-header-description>
Performance across all Voyager Travel routes this month.
</sa-page-header-description>
<sa-page-header-actions>
<sa-button variant="ButtonVariant.Outline">
<sa-icon name="calendar"/>
Last 30 days
</sa-button>
</sa-page-header-actions>
</sa-page-header>
<div class="grid gap-4 md:grid-cols-3">
<sa-card>
<sa-card-header>
<sa-card-description>Reservations today</sa-card-description>
<sa-card-title class="text-2xl tabular-nums">1,284</sa-card-title>
</sa-card-header>
</sa-card>
<sa-card>
<sa-card-header>
<sa-card-description>Seats sold</sa-card-description>
<sa-card-title class="text-2xl tabular-nums">87.4%</sa-card-title>
</sa-card-header>
</sa-card>
<sa-card>
<sa-card-header>
<sa-card-description>Revenue (MTD)</sa-card-description>
<sa-card-title class="text-2xl tabular-nums">$2.31M</sa-card-title>
</sa-card-header>
</sa-card>
</div>
<div class="grid gap-4 lg:grid-cols-2">
<sa-card>
<sa-card-header>
<sa-card-title>Top destinations</sa-card-title>
<sa-card-description>By confirmed bookings this month.</sa-card-description>
</sa-card-header>
<sa-card-content>
<div class="flex flex-col gap-3 text-sm">
<div class="flex items-center justify-between">
<span>Kyoto, Japan</span>
<span class="text-muted-foreground tabular-nums">312 bookings</span>
</div>
<div class="flex items-center justify-between">
<span>Lisbon, Portugal</span>
<span class="text-muted-foreground tabular-nums">287 bookings</span>
</div>
<div class="flex items-center justify-between">
<span>Cape Town, South Africa</span>
<span class="text-muted-foreground tabular-nums">243 bookings</span>
</div>
<div class="flex items-center justify-between">
<span>Cusco, Peru</span>
<span class="text-muted-foreground tabular-nums">198 bookings</span>
</div>
</div>
</sa-card-content>
</sa-card>
<sa-card>
<sa-card-header>
<sa-card-title>Booking status</sa-card-title>
<sa-card-description>Current state of this month's bookings.</sa-card-description>
</sa-card-header>
<sa-card-content>
<div class="flex flex-col gap-3 text-sm">
<div class="flex items-center justify-between">
<span>Confirmed</span>
<sa-badge>1,082</sa-badge>
</div>
<div class="flex items-center justify-between">
<span>Pending payment</span>
<sa-badge variant="BadgeVariant.Secondary">146</sa-badge>
</div>
<div class="flex items-center justify-between">
<span>Cancelled</span>
<sa-badge variant="BadgeVariant.Destructive">56</sa-badge>
</div>
</div>
</sa-card-content>
</sa-card>
</div>
</sa-page-container>Medium
A medium-width layout suited to detail and settings pages.
Theme
<sa-page-container width="PageContainerWidth.Medium">
<sa-page-header>
<sa-breadcrumb>
<sa-breadcrumb-list>
<sa-breadcrumb-item>
<sa-breadcrumb-link href="#">Destinations</sa-breadcrumb-link>
</sa-breadcrumb-item>
<sa-breadcrumb-separator/>
<sa-breadcrumb-page>Kyoto, Japan</sa-breadcrumb-page>
</sa-breadcrumb-list>
</sa-breadcrumb>
<sa-page-header-title>Kyoto, Japan</sa-page-header-title>
<sa-page-header-description>
Destination profile, seasonal pricing, and package availability.
</sa-page-header-description>
<sa-page-header-actions>
<sa-button variant="ButtonVariant.Outline">
<sa-icon name="pencil"/>
Edit
</sa-button>
</sa-page-header-actions>
</sa-page-header>
<sa-card>
<sa-card-header>
<sa-card-title>Overview</sa-card-title>
</sa-card-header>
<sa-card-content>
<dl class="grid gap-x-4 gap-y-3 text-sm sm:grid-cols-2">
<div>
<dt class="text-muted-foreground">Region</dt>
<dd class="mt-1">Asia-Pacific</dd>
</div>
<div>
<dt class="text-muted-foreground">Status</dt>
<dd class="mt-1">
<sa-badge>Active</sa-badge>
</dd>
</div>
<div>
<dt class="text-muted-foreground">Peak season</dt>
<dd class="mt-1">March – May, October – November</dd>
</div>
<div>
<dt class="text-muted-foreground">Active packages</dt>
<dd class="mt-1">12</dd>
</div>
</dl>
</sa-card-content>
</sa-card>
<sa-card>
<sa-card-header>
<sa-card-title>Description</sa-card-title>
</sa-card-header>
<sa-card-content>
<p class="text-sm text-muted-foreground">
Ancient temples, tranquil bamboo groves, and traditional ryokan stays make Kyoto one of
Voyager Travel's most requested destinations. Our packages combine guided cultural
tours with free days for independent exploration, and all itineraries include a
dedicated local host.
</p>
</sa-card-content>
</sa-card>
</sa-page-container>Small
A narrow layout suited to single-column forms.
Theme
<sa-page-container width="PageContainerWidth.Small">
<sa-page-header>
<sa-page-header-title>Add destination</sa-page-header-title>
<sa-page-header-description>
Create a new destination that customers can book through Voyager Travel.
</sa-page-header-description>
</sa-page-header>
<form>
<sa-field-group>
<sa-field>
<sa-field-label for="destination-name">Name</sa-field-label>
<sa-input id="destination-name" type="text" placeholder="e.g. Kyoto, Japan"/>
<sa-field-description>Shown to customers when browsing destinations.</sa-field-description>
</sa-field>
<sa-field>
<sa-field-label for="destination-region">Region</sa-field-label>
<sa-select id="destination-region">
<option value="africa">Africa</option>
<option value="asia-pacific" selected>Asia-Pacific</option>
<option value="europe">Europe</option>
<option value="north-america">North America</option>
<option value="south-america">South America</option>
</sa-select>
</sa-field>
<sa-field>
<sa-field-label for="destination-description">Description</sa-field-label>
<sa-textarea id="destination-description"
placeholder="What makes this destination worth the trip?"/>
<sa-field-description>
Appears on the destination page and in package brochures.
</sa-field-description>
</sa-field>
<sa-field orientation="FieldOrientation.Horizontal">
<sa-input type="checkbox" id="destination-featured"/>
<sa-field-label for="destination-featured" class="font-normal">
Feature on the home page
</sa-field-label>
</sa-field>
</sa-field-group>
<sa-group justify="GroupJustify.End" class="mt-6">
<sa-button variant="ButtonVariant.Outline">Cancel</sa-button>
<sa-button>Save destination</sa-button>
</sa-group>
</form>
</sa-page-container>API Reference
<sa-page-container>
The <sa-page-container> tag helper renders a <div> element wrapping the
main content of a page. In addition to the attribute below, it forwards any
standard global HTML
attributes
(such as id or class) to the rendered element.
Prop
Type