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.

REDZ CMS

Forgot the password? Sign in with a code

<div class="page-center">
	<div class="page-center-corner">
		<button class="btn btn-text btn-icon" type="button" aria-label="Theme"><i class="bi bi-circle-half" aria-hidden="true"></i></button>
	</div>
	<header class="page-center-brand">
		<span class="app-mark">RZ</span>
		<h2>REDZ CMS</h2>
		<p>Sign in to manage your sites</p>
		<nav aria-label="Language">
			<a href="#page-center-example" lang="en" aria-current="page">English</a>
			<a href="#page-center-example" lang="th">ไทย</a>
			<a href="#page-center-example" lang="ru">Русский</a>
		</nav>
	</header>
	<form class="card">
		<div class="card-body vstack gap-16">
			<div class="form-floating form-adorn">
				<i class="bi bi-envelope" aria-hidden="true"></i>
				<input class="form-control" id="page-center-mail" type="email" placeholder="name@example.com" autocomplete="username">
				<label for="page-center-mail">E-mail</label>
			</div>
			<div class="input-group">
				<div class="form-floating form-adorn">
					<i class="bi bi-key" aria-hidden="true"></i>
					<input class="form-control" id="page-center-password" type="password" placeholder="Password" autocomplete="current-password">
					<label for="page-center-password">Password</label>
				</div>
				<button class="btn btn-icon" type="button" commandfor="page-center-password" command="--reveal" aria-pressed="false" aria-label="Show the password"><i class="bi bi-eye" aria-hidden="true"></i></button>
			</div>
			<button class="btn btn-primary btn-lg w-100" type="submit"><i class="bi bi-box-arrow-in-right" aria-hidden="true"></i>Sign in</button>
		</div>
	</form>
	<div class="hstack flex-wrap justify-content-center row-gap-4 column-gap-16">
		<a href="#page-center-example">Forgot the password?</a>
		<a href="#page-center-example">Sign in with a code</a>
	</div>
</div>

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, 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.