Skip to content
KG Kerogeni

Product UI / Patterns

Page header

One stable location for page identity, supporting context, and commands scoped to the current view.

published

A page header names the object or task on screen. It provides only the context required to act and keeps page-scoped commands in a predictable location.

Anatomy

Eyebrow
Optional path or category; never promotional copy.
Title
Names the object or task visible on the page.
Description
Adds only the context needed to act.
Actions
Contains commands scoped to this page.

Usage

<script lang="ts">
  import { PageHeader } from '$lib/components/patterns/page-header';
</script>

<PageHeader
  eyebrow="Patterns / Page structure"
  title="Page header"
  description="Context required to act."
/>

Live example

The example uses the production PageHeader component and a page-scoped action.

Patterns / Page structure

Asset register

One stable location for page identity, supporting context, and commands that belong to the current view.

Core pattern View Button

Related entries