Officina's page layout is three composable parts rather than one component: PageHeader for the top of the screen, PageBody for the content region below it, and PageSection for the bordered blocks inside that region. Using them together keeps spacing, heading levels, and responsive wrapping consistent across screens.

Example

Anatomy

import { PageHeader, PageBody, PageSection, Button } from '@officina/ui';

<>
  <PageHeader
    title="Settings"
    description="Manage your workspace"
    actions={<Button size="sm">Save</Button>}
  />
  <PageBody>
    <PageSection title="Profile">{/* … */}</PageSection>
    <PageSection title="Billing" actions={<Button size="sm">Change plan</Button>}>
      {/* … */}
    </PageSection>
  </PageBody>
</>;

API

PageHeader

The top of a page: a required title heading, an optional description, a breadcrumbs trail above the title, and an actions slot pinned to the right.

PageBody

The main content region. Stacks children vertically with consistent spacing and applies a subtle fade-in on mount.

PageBody is composed from other primitives and exposes no direct props. Compose it with its subcomponents and standard element attributes.

PageSection

Groups related content into a bordered, padded block with an optional header built from title, description, and actions. The header is omitted entirely when none are given.