'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Layout
FocusLayout
One task in the middle of the screen with nothing around it: sign in, a code, an onboarding step, a result.
import { FocusLayout } from '@alea/ui';
Examples
Sign in
One card in the middle with one task. As a page it is the main landmark; inside another page use as="div".
A result, no card
card={false} for a message that stands on the page by itself; size="md" gives it more room.
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
Space
--alea-space-4…--alea-space-6…
Props
FocusLayout props
One task in the middle of the screen, nothing else around it: sign in, verify, onboarding, a result.
| Prop | Type | Default | Description |
|---|---|---|---|
childrenrequired | ReactNode | - | The one task: sign in, a code, a setup step. |
as | "div" | "main" | - | The element: main (default, when it is the page) or div. |
card | boolean | true | Wrap the content in a card. Default true. |
className | string | - | Extra class names for the root element. |
size | "sm" | "md" | 'sm' | Card width: sm (420 px, a form) or md (640 px, a step with choices). Default sm. |
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
- Variants
asdivmainsizesmmd- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-focus-layout.alea-focus-layout-card- Data attributes
data-size=md
Accessibility
- It is the page's main landmark (as="div" when it sits inside one).
- Start it with a level 1 heading that names the task.
Do and don't
Do
- Keep one primary action.
- Use size="md" for a step with choices.
Don't
- Don't add navigation around it: the point is the one task.
In Figma
Focus layout with Size (sm, md) and Card (on, off).