CenteredLayout

One narrow card, centred on the page.

Overview

Sign-in, a landing page, or a not-found or error page.

Page

Do

Sign in

Use your Hack Cove account.

import { Button, CenteredLayout, Field, Input } from "@hackcove/ui";

<CenteredLayout title="Sign in" subtitle="Use your Hack Cove account.">
  <Field label="Email" htmlFor="do-page-email">
    <Input id="do-page-email" type="email" placeholder="[email protected]" />
  </Field>
  <Button>Continue</Button>
</CenteredLayout>
Sign-in, landing, not-found and error pages are one narrow card, centred.
Don't

Sign in

Use your Hack Cove account.

import { Button, Field, FormLayout, Input } from "@hackcove/ui";

<FormLayout
  title="Sign in"
  subtitle="Use your Hack Cove account."
  actions={<Button type="submit">Continue</Button>}
>
  <Field label="Email" htmlFor="dont-page-email">
    <Input id="dont-page-email" type="email" placeholder="[email protected]" />
  </Field>
</FormLayout>
FormLayout is for a form inside the app: its wide column hangs off the left edge, which is wrong for a sign-in. Use CenteredLayout.

Full page

Hack Cove

Sign in

Use your Hack Cove account.

import { AppShell, Button, CenteredLayout, Field, Input, NavTabs } from "@hackcove/ui";

<AppShell
  brand={<a href="#">Hack Cove</a>}
  nav={
    <NavTabs
      label="Main"
      items={[
        { label: "Quotes", href: "#quotes", active: true },
        { label: "Clients", href: "#clients" },
      ]}
    />
  }
>
  <CenteredLayout title="Sign in" subtitle="Use your Hack Cove account.">
    <Field label="Email" htmlFor="full-page-email">
      <Input id="full-page-email" type="email" placeholder="[email protected]" />
    </Field>
    <Button>Continue</Button>
  </CenteredLayout>
</AppShell>
A whole sign-in page: the shell with its brand and nav, then one narrow card, centred.

Usage

  • Give it a title and a subtitle; the children are the card's content: a Field or two and a Button.
  • It is the one layout that does not share the left edge: it is centred, at a fixed offset from the top.
  • A form inside the app is FormLayout, not this.
  • The ready-made status pages (not found, forbidden, offline, error, maintenance) are already built on it.

Accessibility

  • The title is the page's h1.
  • The card is a plain div, not a landmark; the shell's main holds it.
  • Give each control a Field with htmlFor, so every input has a label.

API

CenteredLayout

A narrow card (max-w-md) centred in the Container at a fixed offset from the top, for sign-in, landing, not-found and error pages. The one layout that does not share the left edge.

subtitle
Type
ReactNode
title required
Type
ReactNode