Page header

The .pl-c-page-header is a bare title + actions row for use inside a container (.pl-l-container, .pl-l-page, .pl-c-card__body). Unlike .pl-c-toolbar, which is a shell-level bar with padding, border, and a surface background, .pl-c-page-header has no chrome: no background, no border, no padding. It is just a flex layout with a heading on one side and actions on the other.

When to use

• .pl-c-page-header — inside .pl-l-container or any padded region. No background, no border. The title + actions are flush with the container’s content.
• .pl-c-toolbar — flush against an edge (topbar row in .pl-l-app-shell, sticky filter bar). Has padding, a surface background, and a bottom border.

Using .pl-c-toolbar inside .pl-l-container produces ~65px of dead space because both the container and the toolbar add padding. .pl-c-page-header avoids this.

Semantic HTML

Basic

<div class="pl-c-page-header">
  <div class="pl-c-page-header__heading">
    <h1 class="pl-c-page-header__title">Queue</h1>
  </div>
  <div class="pl-c-page-header__actions">
    <button class="pl-c-button">Export</button>
    <button class="pl-c-button" data-variant="primary">New item</button>
  </div>
</div>

With subtitle

<div class="pl-c-page-header">
  <div class="pl-c-page-header__heading">
    <h1 class="pl-c-page-header__title">Operator queue</h1>
    <span class="pl-c-page-header__subtitle">12 pending, 3 in progress</span>
  </div>
  <div class="pl-c-page-header__actions">
    <button class="pl-c-button">Filter</button>
    <button class="pl-c-button" data-variant="primary">Assign</button>
  </div>
</div>

With a leading icon

Use .pl-u-icon-title when a page/card title has a leading icon. The icon stays attached to the first line while the text can wrap or truncate inside narrow flex/grid regions.

<h1 class="pl-c-page-header__title pl-u-icon-title">
  <svg aria-hidden="true" viewBox="0 0 24 24">...</svg>
  <span class="pl-u-min-0 pl-u-truncate">Long workflow queue title</span>
</h1>

Class contract

Tokens consumed

--pl-space-{2,3,5}, --pl-text-{sm,2xl}, --pl-font-weight-bold, --pl-leading-tight, --pl-color-text-muted.