AuthLayout

templates

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

ARIA Role: main

Demo

Demo for AuthLayout (templates)

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

Props

PropTypeRequiredDefaultDescription
brandAuthBrandYes—
formReact.ReactNodeYes—
footerReact.ReactNodeYes—

TypeScript Interface

interface AuthLayoutProps {
  brand: { tagline: string; image: { url: string; alt: string } };
  form: React.ReactNode;
  footer: React.ReactNode;
}

Assertions (NASA Rule 5)

  • [type]brand, form, footer all required(NASA Rule 5)
  • [aria]<main role='main'>; brand panel has aria-label or is aria-hidden(WCAG 1.1.1)

Usage

Import

import { Authlayout } from '@epasslive/design-system'

Basic

<Authlayout />

With Variants

<Authlayout variant="primary" size="md" />