Custom width

Header, main et footer avec une largeur de page personnalisée.

Custom max 1440px

Max width 960px 1120px 1280px 1440px 1600px

Code du template

Structure du layout, avec le slot de contenu sous forme de <%- body %>.

Custom width Html

<div class="min-h-screen bg-muted/30" style="--layout-max-width: 1440px;">
  <div class="mx-auto flex min-h-screen w-full max-w-[var(--layout-max-width)] flex-col bg-background shadow-sm">
    <header class="border-b border-border bg-background/95 backdrop-blur">
      <div class="flex min-h-16 items-center justify-between gap-4 px-4 sm:px-6">
        <a href="/" class="font-semibold">Product</a>
        <div class="flex items-center gap-2">
          <button class="ui-btn ui-btn-outline ui-btn-color-primary ui-btn-sm">Action</button>
        </div>
      </div>
    </header>

    <main class="min-w-0 flex-1 p-4 sm:p-6 lg:p-8">
      <%- body %>
    </main>

    <footer class="shrink-0 border-t border-border bg-background/95">
      <div class="flex min-h-14 items-center justify-between gap-4 px-4 text-sm text-muted-foreground sm:px-6">
        <span>Footer</span>
        <a href="/settings">Settings</a>
      </div>
    </footer>
  </div>
</div>