# Centered page A page without the app shell: the brand, one card and a way on, in a column at the middle of the window - sign-in, registration, a password reset, a second factor, an unlock, an enrolment. ## Example `page-center` on the page's `main` stands its children in a column 30rem (480 px) wide at the middle of the window, and the column grows down when they are taller; `--redz-page-center-width` sets another width. `page-center-brand` holds the logo, the name, one line and the language links; a `card` in the column is raised. `page-center-corner` holds the theme button at the top end of the page: it scrolls with the page, and the column starts below it, so on a phone it never covers the logo or the card. ```html

REDZ CMS

Forgot the password? Sign in with a code

``` Every child but the corner stands in the column, whatever it is itself - a `vstack` or an `hstack` of links under the card stays under the card, not at the start of a wide window. In a page `page-center` is the `main` and the brand's name its `h1`; here they are a `div` and an `h2` under the page's own. ## Accessibility - The page is one `main`; the language links are a `nav` with a name, each link with its `lang`, the current one with `aria-current="page"`. - The corner comes first in the source so `Tab` meets it before the form; put it after the form when the form should come first. - A logo image has an `alt` of the name only when the name is not written beside it; otherwise `alt=""`. ## Tokens From [`css/components/page-center.css`](https://github.com/redz-tech/REDZ.UI/blob/main/css/components/page-center.css), which declares no custom property of its own. It reads the theme's `--redz-space-24`, `--redz-control-height`, `--redz-space-16`, `--redz-space-40`, `--redz-page-center-width`, `--redz-shadow-3`, `--redz-space-8`, `--redz-text-muted`, `--redz-space-4`, `--redz-fs-12`, `--redz-text`.