Navigation

Page

A whole page: Page picks one width (reading, form, page, wide or full) and gives it the standard rhythm, PageHeading its title, description and actions, PageSection a titled group. The gutter follows the page's own width, not the window's, because side panels change the room a page has.

A page: its heading and actions, sections 32 px apart, the gutter following the page's own width

Live

Open full size

wide.tsx

import { Button } from "@nibapp/ui/components/button";import { Card } from "@nibapp/ui/components/card";import { Page, PageHeading, PageSection } from "@nibapp/ui/components/page";import { TextLink } from "@nibapp/ui/components/text-link";import { Plus } from "lucide-react";/** The page in a 720 px frame, so its gutter and rhythm show as a screen that wide would have them. */export default function Wide() {  return (    <div      className="flex h-96 overflow-hidden rounded-lg border border-border bg-bg"      style={{ width: 720, maxWidth: "100%" }}    >      <Page width="form">        <PageHeading          title="Projects"          description="Everything your team is working on, newest first."          actions={            <Button size="sm" variant="primary" leading={<Plus />}>              New project            </Button>          }        />        <PageSection title="Active" action={<TextLink href="#all">See all</TextLink>}>          <Card variant="subtle" className="h-16" />          <Card variant="subtle" className="h-16" />        </PageSection>        <PageSection title="Archived" description="Kept for a year, then deleted.">          <Card variant="subtle" className="h-16" />        </PageSection>      </Page>    </div>  );}

The same page with less room: a narrower gutter, the actions under the title

Live

Open full size

narrow.tsx

import { Button } from "@nibapp/ui/components/button";import { Card } from "@nibapp/ui/components/card";import { Page, PageHeading, PageSection } from "@nibapp/ui/components/page";import { TextLink } from "@nibapp/ui/components/text-link";import { Plus } from "lucide-react";/** The page in a 360 px frame, so its gutter and rhythm show as a screen that wide would have them. */export default function Narrow() {  return (    <div      className="flex h-96 overflow-hidden rounded-lg border border-border bg-bg"      style={{ width: 360, maxWidth: "100%" }}    >      <Page width="form">        <PageHeading          title="Projects"          description="Everything your team is working on, newest first."          actions={            <Button size="sm" variant="primary" leading={<Plus />}>              New project            </Button>          }        />        <PageSection title="Active" action={<TextLink href="#all">See all</TextLink>}>          <Card variant="subtle" className="h-16" />          <Card variant="subtle" className="h-16" />        </PageSection>        <PageSection title="Archived" description="Kept for a year, then deleted.">          <Card variant="subtle" className="h-16" />        </PageSection>      </Page>    </div>  );}