Page header

wu-page-header is the top of a page: an optional breadcrumb, a title block and actions. The actions line up with the title’s first line and wrap below it on narrow screens.

Class	Effect
`wu-page-header`	Root, on `<header>`. Wrapping row, breadcrumb on its own line
`wu-page-header-main`	Part. Column of title and description
`wu-page-header-title`	Part. Page heading, usually the page’s `<h1>` (the demos use `<h2>`)
`wu-page-header-text`	Part. Muted description, at most 65 characters wide
`wu-page-header-actions`	Part. Row of buttons
`divided`	Line and padding below the header

Title and actions

<header class="wu-page-header">
  <div class="wu-page-header-main">
    <h2 class="wu-page-header-title">Projects</h2>
    <p class="wu-page-header-text">Every project in this workspace, newest first.</p>
  </div>
  <div class="wu-page-header-actions">
    <button class="wu-btn" type="button">Import</button>
    <button class="wu-btn brand" type="button">New project</button>
  </div>
</header>

<header class="wu-page-header divided">
  <nav class="wu-breadcrumb" aria-label="Breadcrumb">
    <ol class="wu-breadcrumb-list">
      <li class="wu-breadcrumb-item"><a class="wu-breadcrumb-link" href="#">Projects</a></li>
      <li class="wu-breadcrumb-item"><span aria-current="page">Website redesign</span></li>
    </ol>
  </nav>
  <div class="wu-page-header-main">
    <h2 class="wu-page-header-title">Website redesign</h2>
    <p class="wu-page-header-text">Due June 30. Six members.</p>
  </div>
  <div class="wu-page-header-actions">
    <button class="wu-btn" type="button">Share</button>
    <button class="wu-btn brand" type="button">Edit</button>
  </div>
</header>

Right to left

The title sits at the right and the actions at the left.

<header class="wu-page-header">
  <div class="wu-page-header-main">
    <h2 class="wu-page-header-title">المشاريع</h2>
    <p class="wu-page-header-text">كل مشروع في مساحة العمل هذه.</p>
  </div>
  <div class="wu-page-header-actions">
    <button class="wu-btn brand" type="button">مشروع جديد</button>
  </div>
</header>

@use "@wovenui/components/page-header";

The page header needs no other component. The examples above also use the breadcrumb and the button.