Standard

Header, main et footer dans un conteneur standard.

Standard max 1280px

Code du template

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

Standard Html

<div class="min-h-screen bg-muted/30" style="--layout-max-width: 1280px;">
  <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>