Skip to main content

Back to all patterns

Page Header

ID: page_header Category: layout Required slots: title

Live example

Pattern Demo: Page Header

Top-of-page context block with title, meta, and actions.

Join Events

Overview

Top-of-page context block with title, meta, and actions.

Read more

Top-of-page context block with title, meta, and actions.

Tags: header, layout, page

When to use / When not to use

When to use

  • This pattern appears frequently in the layout category and has reusable slot anatomy.

When not to use

  • Avoid this pattern when a simpler native element can meet the same user goal with less cognitive load.

Accessibility notes

  • Keyboard keys: .
  • ARIA attributes: aria-label.
  • Visible focus required: No.

Implementation 

<x-ui.page-header title="Pattern Demo: Page Header" subtitle="Top-of-page context block with title, meta, and actions.">
  <x-slot:actions>
    <a href="/join" class="dig-btn dig-btn--cta">Join</a>
    <a href="/events" class="dig-btn">Events</a>
  </x-slot:actions>
</x-ui.page-header>