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
`eyebrow`	`eyebrow`	Subheading that contains less important, tertiary information related to the headline	`string`	`undefined`
`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
`"content-header-title"`	Slot for a custom heading

<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>