Main

Main content area that accounts for sidebar and topbar offsets in app layouts.

Default

Main content area

Base

Class	Description
`.ui-main`	Base class

Sidebar-end

Class	Description
`.ui-main--sidebar-end`	sidebar-end

Full

Class	Description
`.ui-main--full`	full

Sidebar End

Content with end sidebar

<!-- Offsets content for an end-side sidebar instead of start. -->
<div class="demo-box" style="--demo-h: var(--ui-row-4)">
  <main class="ui-main ui-main--sidebar-end ui-bg-muted ui-p-2">
    <p>Content with end sidebar</p>
  </main>
</div>

Full Width

Full width content

<!-- No sidebar offset. Use when there is no sidebar. -->
<div class="demo-box" style="--demo-h: var(--ui-row-4)">
  <main class="ui-main ui-main--full ui-bg-muted ui-p-2">
    <p>Full width content</p>
  </main>
</div>