ProseLayout

A page of text: one reading column with the header inside it.

Overview

Privacy, terms, help or any page that is mostly paragraphs.

Article

Do

Privacy

How we handle your data.

What we keep

We keep your account details and the quotes you send, and nothing else.

Who sees it

Only you and the people you invite to your organisation.

import { Body, ProseLayout, SectionHeading } from "@hackcove/ui";

<ProseLayout title="Privacy" subtitle="How we handle your data.">
  <SectionHeading>What we keep</SectionHeading>
  <Body as="p">We keep your account details and the quotes you send, and nothing else.</Body>
  <SectionHeading>Who sees it</SectionHeading>
  <Body as="p">Only you and the people you invite to your organisation.</Body>
</ProseLayout>
Text pages (privacy, terms, help) are one reading column; the header sits inside it.
Don't

Privacy

How we handle your data.

We keep your account details and the quotes you send, and nothing else. Only you and the people you invite to your organisation can see them.

import { Body, Card, ListLayout } from "@hackcove/ui";

<ListLayout title="Privacy" subtitle="How we handle your data.">
  <Card>
    <Body as="p">
      We keep your account details and the quotes you send, and nothing else. Only you and the
      people you invite to your organisation can see them.
    </Body>
  </Card>
</ListLayout>
ListLayout is for lists: its content runs the full width, so lines of text get too long to read. Use ProseLayout.

Full page

Hack Cove

Privacy

How we handle your data.

What we keep

We keep your account details and the quotes you send, and nothing else.

Who sees it

Only you and the people you invite to your organisation.

import { AppShell, Body, NavTabs, ProseLayout, SectionHeading } 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" },
      ]}
    />
  }
>
  <ProseLayout title="Privacy" subtitle="How we handle your data.">
    <SectionHeading>What we keep</SectionHeading>
    <Body as="p">We keep your account details and the quotes you send, and nothing else.</Body>
    <SectionHeading>Who sees it</SectionHeading>
    <Body as="p">Only you and the people you invite to your organisation.</Body>
  </ProseLayout>
</AppShell>
A whole text page: the shell with its brand and nav, then one reading column with the header inside it.

Usage

  • The text is the children: SectionHeadings and Body as="p" paragraphs, spaced md apart.
  • gap picks another spacing from the same scale (xs to section) for the whole page; the default is right for most pages.
  • The header sits inside the column, so its actions stay beside the text.
  • Data or cards in a grid are not prose: use ListLayout or CardGrid.

Accessibility

  • The title is the page's h1.
  • Use SectionHeading for sections so the outline runs h1 then h2.
  • data-* and aria-* go on the column's wrapper.

API

ProseLayout

A text page: header, then children stacked gap apart (md by default), all in one narrow (max-w-3xl) reading column that starts at the Container's left edge (it is not re-centred, so the title does not jump). Unlike FormLayout the header sits inside the column, so its actions stay beside the text instead of at the Container's far edge.

actions

Right of the title on sm and up, below it on a phone.

Type
ReactNode
breadcrumbs

A Breadcrumbs above the title.

Type
ReactNode
gap
Type
"sm" | "md" | "lg" | "section" | "xs"
subtitle
Type
ReactNode
tabs

A NavTabs (or similar) under the title.

Type
ReactNode
title required
Type
ReactNode