Layouts
Aside
A third column beside the main content.
An aside takes the main and footer rows of the grid and starts below the header. The classic use is an order summary that stays put while the list scrolls.
Cart summary
Total due
38,600,000
Toman
<flux:aside sticky class="w-80 border-s border-zinc-200 max-xl:hidden dark:border-zinc-700">
<div class="space-y-6 p-6">
<flux:heading>Cart summary</flux:heading>
<mds:stepper :steps="['Cart', 'Shipping', 'Payment']" :current="2" class="w-full" />
<flux:separator />
<div class="flex items-center justify-between">
<flux:text class="font-medium">Total due</flux:text>
<mds:price :amount="38600000" />
</div>
<flux:button variant="primary" class="w-full">Confirm and pay</flux:button>
</div>
</flux:aside>Falling back to a flyout
The aside is usually hidden on narrow screens. Put the same partial in a flyout modal so the content is still reachable.
<flux:modal.trigger name="cart">
<flux:button icon="shopping-cart" class="xl:hidden">Cart</flux:button>
</flux:modal.trigger>
<flux:modal name="cart" variant="flyout" class="w-80">
@include('layouts.partials.aside-content')
</flux:modal>Reference
flux:aside
| Prop | Description |
|---|---|
| sticky | Pins the column and caps its height to the viewport. |