Block · C-056 · erp

PageHeader

The page header: breadcrumbs, eyebrow, serif title, description, meta and actions. The title is the h1, so use it once per view.

Install

Blocks compose Koten primitives; install koten-theme first.

npx shadcn@latest add https://koten.codehive.com.co/r/page-header.json

Anatomy

This block composes Koten primitives. Read the source files before changing it.

@/components/patterns/page-header.tsx
@/lib/koten/cn.ts
@/lib/koten/format.ts
@/lib/koten/intl.ts
@/lib/koten/labels.ts
@/lib/koten/provider.tsx

Accessibility

The title is an h1: use one PageHeader per page so the main heading is not duplicated.
Breadcrumbs live in a nav with aria-label; Breadcrumb already does this and marks the last item with aria-current.
Actions read after the title in the DOM; the primary action must not rely on colour alone either.

Read the whole page