Page Header

Page headers provide a consistent user experience at the top of most page types in the system. In addition to the page title, a page header may contain a description and other static and interactive elements. Elements are arranged and display according to the context of the page.

Code

Wireframe
Visual

Left Container

Page title

Description content

Right Container

Buttons, containers, text, etc…

Certara UI
HTML

<certara-page-header headline="Security settings">
  <div slot="content-header-details">
      <certara-link href="/" target="_blank" icon="arrow-up-right-from-square">Learn more about Security settings</certara-link>
  </div>
  <certara-button>Save</certara-button>
  <certara-button color="default">Cancel</certara-button>
</certara-page-header>

Properties

Property	Attribute	Description	Type	Default
`headline`	`headline`	String that is output/nested inside	`string`	`undefined`

Slots

Slot	Description
	Main slot for content inserted to the right of the header
`"content-header-details"`	Slot available if you need to add additional content below the

<header class="content-header" id="content-header">
  <div class="content-header__left">
    <div class="content-header__title-group">
      <h1 class="content-header__title">…</h1>
      <div class="content-header__details">…</div>
    </div>
  </div>
  <div class="content-header__right">…</div>
</header>

In Practice

The page header displays full width at the top of the page.
The only required element is a page title.
Any content in the right container stacks below the left container content at smaller break points.

Left container

Contains the page title (H1).
The title wraps when the text is too lengthy.
When there is a help article for the page, place it under the page title as a link.

Right container

Can contain information and other items such as buttons, button groups, links, and cards.
Limit these to elements that pertain to the entire page.

Accessibility

Be sure to define ARIA labels.
Provide keyboard functionality to all available elements.

Follow the accessibility guidelines for each component found in the alert. View guidelines

Design resources

View component in Figma