BrandSplitAuthLayout
A branded two-pane authentication starter that collapses to the focused card without replacing content.@gemologic/sheen-patterns · applicationPlayground
Northstar
Sign in
Use your work account.
<BrandSplitAuthLayout brand={<strong>Northstar</strong>} title="Sign in" description="Use your work account." asideLabel="Why teams use Northstar" aside={<blockquote>One calm workspace for every operation.</blockquote>} asidePosition="start" contentWidth="md"><Button variant="solid" tone="accent">Continue with SSO</Button></BrandSplitAuthLayout>Variant matrix
Product context and SSO
Northstar
Sign in
Use your work account.
asidePosition: start
Northstar
Sign in
Use your work account.
asidePosition: end
Northstar
Sign in
Use your work account.
contentWidth: sm
Northstar
Sign in
Use your work account.
contentWidth: md
Northstar
Sign in
Use your work account.
Anatomy
- Package
@gemologic/sheen-patterns- Source
packages/patterns/src/AuthLayout.tsx- Tokens
--sheen-color-bg--sheen-color-bg-raised--sheen-color-bg-subtle--sheen-color-border--sheen-color-accent-subtle--sheen-space-section--sheen-elevation-raised
Accessibility
Role: main, complementary, section, heading, footerKeyboard: Tab, Shift+TabDo
- Keep the brand region supportive and the authentication action visually dominant.
- Supply a concise aside label and meaningful text alternatives for informative artwork.
- Verify the CSS-only narrow presentation at 200 and 400 percent zoom.
Do not
- Do not put required authentication instructions only in the brand region because it is hidden on narrow screens.
- Do not autoplay media or animate layout content on mount.
- Do not reorder the form DOM to follow the aside's visual placement.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
aside * | JSX.Element | — | Required app-owned product context, illustration, or testimonial. It stays in the DOM and is visually hidden in the narrow focused presentation. |
asideLabel * | string | — | Required accessible name for the complementary brand region. |
asidePosition | AuthLayoutAsidePosition | undefined | start | Logical start or end placement of the brand region. |
ref | HTMLElement | ((element: HTMLElement) => void) | undefined | — | Native main-landmark reference. |
brand * | JSX.Element | — | Persistent app-owned product identity above the authentication card. |
title * | string | — | Required visible page heading and accessible main-landmark name. |
description | JSX.Element | — | Optional provider, organization, or next-step guidance below the heading. |
children * | JSX.Element | — | App-owned authentication controls and live status. |
footer | JSX.Element | — | Optional support and legal destinations below the card. |
headingLevel | 1 | 2 | 3 | 4 | 5 | 6 | undefined | 1 | Semantic heading level for the visible authentication title. |
contentWidth | AuthLayoutContentWidth | undefined | md | Bounded card width. |