layouts auth

layouts/auth

Import: import { AuthLayout } from "@tundralibs/ui/layouts/auth"

Rendered in every variant on the catalogue (deno task build:demos, then demo/index.html). Guides: Getting started · rAPId integration · Theming.

Functions

AuthLayout

AuthLayout(props: AuthLayoutProps): Html

Centred auth card, optionally split with a narrative panel.

Types

AuthLayoutProps

Prop	Type	Required	Description
brand	`string	Html`
content	Html	yes	The card / form.
narrative	Html		Marketing copy, testimonial, checklist — shown beside the form on laptop+ when split is set; hidden on smaller screens.
split	boolean
contentId	string
attrs	Attrs

Usage

Each example as the rAPId call and the HTML it renders — the markup a plain page writes by hand. Icons are inline SVG in the real output; they are shortened to <svg …>…</svg> here.

A sign-in page

AuthLayout({
  brand: "Acme",
  split: true,
  narrative: html`
    <h2>Welcome back</h2>
    <p>Invoices, payments and reports in one place.</p>
  `,
  content: Form({
    id: "signin",
    action: "/signin",
    content: html`${
      FormField({
        id: "email",
        label: "Email",
        control: (a) => Input({ id: a.id, name: "email", type: "email" }),
      })
    }${FormActions({ content: Button({ label: "Sign in", type: "submit", block: true }) })}`,
  }),
})

<div class="layout layout--auth layout--auth-split">
  <section class="layout__auth-narrative">
    <h2>Welcome back</h2>
    <p>Invoices, payments and reports in one place.</p>
  </section>
  <main class="layout__auth-form" id="main-content">
    <div class="layout__auth-panel">
      <div class="layout__auth-brand">Acme</div>
      <form class="form" id="signin" action="/signin" method="post">
        <div class="form-field">
          <label class="form-field__label" for="email">Email</label>
          <input type="email" class="input" id="email" name="email">
        </div>
        <div class="form-actions">
          <button type="submit" class="btn btn--block">Sign in</button>
        </div>
      </form>
    </div>
  </main>
</div>

CSS hooks

Classes defined by layouts/auth/auth.css — structural, token-driven; override from an unlayered stylesheet (see Theming):

.layout--auth, .layout--auth-split, .layout__auth-brand, .layout__auth-form, .layout__auth-narrative, .layout__auth-panel