AuthLayout
The frame of the sign in and password reset screens: a brand on top, one card with the page heading, and room for a language switch underneath. Use it for any short task a reader does before entering an app.
- AuthLayout
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, AuthLayout
Dark theme, AuthLayout
High contrast theme, AuthLayout
UsageLink to the section Usage
import { AuthLayout } from '@skribly/ui/pages'<AuthLayout id="content" title="Sign in" brand={<Logo kind="tracker" />} titleId="auth-title">
<LoginForm labels={labels} aria-labelledby="auth-title" onSubmit={signIn} />
</AuthLayout>Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- Renders the main landmark, named by its heading, so it works as a skip link target.
- The card grows with its content and the page scrolls instead of clipping, at 200% zoom and at 320px width alike.
This demo runs through axe in all three themes on every test run. See what the tests check.