Auth shell

The frame of a log in, sign up or recovery page; brand mark, heading and your form, centred, in a card, beside a panel, or beside a step sidebar.

Last updated

Log in to your account

Please enter your details.

Welcome back

Please enter your details.

Show code
<AuthShell heading="Log in to your account" description="Welcome back! Please enter your details." pattern="grid">
<FeaturedIcon slot="brand" theme="solid" color="primary" size="large"><Orbit /></FeaturedIcon>
<form method="post">…</form>
<p slot="footer">Don't have an account? <Link href="/sign-up">Sign up</Link></p>
</AuthShell>

Whole pages built on it: Log in pages and Sign up pages.

Add

npx @ava-ui/apogee add auth-shell

Layouts

  • centered: the header and form centred on the page. pattern draws a faint grid or rings behind the brand mark.
  • card: the header and form inside one raised card on a grey page. For the heading on the page and only the form in a card, use centered with background="neutral-faded" and put your form in a Card.
  • split: the form in one column and the panel slot in the other. The panel hides below lg. panelSide picks the side, panelBackground the fill, and the legal slot sits at the foot of the form column.
  • sidebar: a narrow panel column (26rem) at the start, usually the steps of a multi-step flow, beside a centred form. See Sidebar progress.

Slots

Slot What goes in it
default Your form.
brand The logo, above the heading.
intro Under the heading, before the form: a sign up / log in switch (centered only).
footer Under the form: “Don’t have an account? Sign up”.
below Under the form and wider than it (up to 48rem): a step list or a progress indicator.
header A top bar above the page.
legal Copyright at the foot of the form column (split only).
panel The other half in split (a photo, a quote, a carousel), or the side column in sidebar.

API

Prop Type Default Category Description
heading string — content The page heading.
description string — content
layout 'centered' | 'card' | 'split' | 'sidebar' 'centered' layout
align 'start' | 'center' 'center'; 'start' in split layout Header alignment.
background 'page' | 'neutral-faded' | 'primary-faded' | 'primary' | 'inverted' 'page'; 'neutral-faded' in card layout Page fill.
pattern 'none' | 'grid' | 'circles' 'none' layout Behind the brand mark.
panelSide 'start' | 'end' 'end'; 'start' in sidebar layout
panelBackground as background 'neutral-faded' layout
fullHeight boolean true layout Fill the viewport height.
headingLevel, id headingLevel is 1 layout As on every section.

Accessibility

  • The section is labelled by its heading, which is the page’s h1 by default.
  • The pattern is decoration (aria-hidden), and the panel sits after the form in the source, so keyboard and screen reader users reach the form first even with panelSide="start".

Related

Log in pagesWhole log in pages built on the AuthShell section, from a centred form to split layouts with a panel.
Sign up pagesWhole sign up pages built on the AuthShell section, from a centred form to multi-step flows with a progress sidebar.
CardA surface container for grouped content. Compose freely inside — heading, text, button, an optional media block.
StepsA vertical progress list for onboarding, checkout, and wizard flows.