AuthLayout

Implemented

Auth page layout — split-screen. Left: brand panel with marketing image + tagline. Right: form container (40% width). Mobile: full-width form.

Categorytemplates

Sourcepatterns/templates/authlayout.html

AI HintUse for page layouts. Define structure and composition patterns.

Template d'authentification split-screen : panneau de marque à gauche (image marketing + tagline, 60 %), conteneur de formulaire à droite (40 %). Mobile : formulaire pleine largeur.

AuthLayout

Template - Auth family (Family 1)

Template plein écran (min-h-screen). Colonne gauche : panneau navy avec image marketing en haut et tagline + copy centrées dessous (masqué sous lg). Colonne droite : main landmark avec le formulaire centré (max-w-sm) et le footer légal sous le formulaire.

This component supports light and dark mode.

Composition

AuthLayout est le template standard pour /login, /signup, /forgot-password. Le panneau de marque (gauche, 60 %) est masqué sur mobile — formulaire pleine largeur. Le formulaire est typiquement l'organisme AuthForm ; le footer légal est requis.

Prop

Type

Default

Description

brand*

AuthBrand

—

Panneau de marque : { tagline, image: { url, alt }, eyebrow?, body?, bullets? }.

children*

React.ReactNode

—

Formulaire (typiquement AuthForm), centré dans le main landmark.

footer*

React.ReactNode

—

Footer légal sous le formulaire (requis — NASA Rule 5).

locale

"fr" | "en"

—

Locale du label du panneau de marque (LABELS map, défaut fr).

className

string

—

Classes supplémentaires sur la racine.

Props

Preview

AuthLayout

Prop

Type

Required

Default

Description

brand

AuthBrand

Required

—

Brand panel content (LEFT column, lg+): { tagline, image: { url, alt }, eyebrow?, body?, bullets? }. Marketing image fills the upper region, tagline styled as the panel headline (no headings — the form owns the page h1).

children

React.ReactNode

Required

—

Auth form (login / register / password reset) rendered centered in the RIGHT column inside the `main` landmark (max-w-sm). Typically the AuthForm organism.

footer

React.ReactNode

Required

—

Footer rendered under the form (legal line, help links…) — required per NASA Rule 5, no built-in default text.

locale

"fr" | "en"

Optional

'fr'

UI locale for the built-in brand-panel landmark label via the LABELS map.

className

string

Optional

—

Extra classes appended to the root element.

Quick use:<AuthLayout />

Accessibility

ARIA rolemain

Usage

Import

tsxSnippet

import { AuthLayout } from "@epasslive/design-system"

Example 1

tsxSnippet

<AuthLayout brand={brand} footer={legalLine}><AuthForm mode="sign-in" /></AuthLayout>

Example 2

tsxSnippet

<AuthLayout brand={{ tagline, image: { url, alt } }} footer={legalLine} locale="en">{form}</AuthLayout>

Anti-patterns

— Do not include business logic in templates

— Avoid hardcoded content in templates