Page Header

Design guidelines

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

Framework

HTML

React

Angular

Simple

Toggle dark mode

<certara-page-header headline="Dashboard"></certara-page-header>

import { CertaraPageHeader } from '@certara/certara-ui-react';

<CertaraPageHeader headline="Dashboard" />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-page-header headline="Dashboard"></certara-page-header>

With right content

Save Cancel

Toggle dark mode

<certara-page-header headline="Page Title">
  <certara-button>Save</certara-button>
  <certara-button color="secondary">Cancel</certara-button>
</certara-page-header>

import { CertaraButton, CertaraPageHeader } from '@certara/certara-ui-react';

<CertaraPageHeader headline="Page Title">
  <CertaraButton>Save</CertaraButton>
  <CertaraButton color="secondary">Cancel</CertaraButton>
</CertaraPageHeader>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-page-header headline="Page Title">
  <certara-button>Save</certara-button>
  <certara-button color="secondary">Cancel</certara-button>
</certara-page-header>

With details

Learn more about Security settings

Save Cancel

Toggle dark mode

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

import { CertaraButton, CertaraLink, CertaraPageHeader } from '@certara/certara-ui-react';

<CertaraPageHeader headline="Security settings">
  <div slot="content-header-details">
    <CertaraLink href="/" target="_blank" rightIcon="arrow-up-right-from-square">
      Learn more about Security settings
    </CertaraLink>
  </div>
  <CertaraButton>Save</CertaraButton>
  <CertaraButton color="secondary">Cancel</CertaraButton>
</CertaraPageHeader>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

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

With eyebrow

Learn more about this thing

Save Cancel

Toggle dark mode

<certara-page-header headline="Phoenix Cloud" eyebrow="Product details">
  <div slot="content-header-details">
    <certara-link href="/" target="_blank" right-icon="arrow-up-right-from-square">
      Learn more about this thing
    </certara-link>
  </div>
  <certara-button>Save</certara-button>
  <certara-button color="secondary">Cancel</certara-button>
</certara-page-header>

import { CertaraButton, CertaraLink, CertaraPageHeader } from '@certara/certara-ui-react';

<CertaraPageHeader headline="Phoenix Cloud" eyebrow="Product details">
  <div slot="content-header-details">
    <CertaraLink href="/" target="_blank" rightIcon="arrow-up-right-from-square">
      Learn more about this thing
    </CertaraLink>
  </div>
  <CertaraButton>Save</CertaraButton>
  <CertaraButton color="secondary">Cancel</CertaraButton>
</CertaraPageHeader>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-page-header headline="Phoenix Cloud" eyebrow="Product details">
  <div slot="content-header-details">
    <certara-link href="/" target="_blank" right-icon="arrow-up-right-from-square">
      Learn more about this thing
    </certara-link>
  </div>
  <certara-button>Save</certara-button>
  <certara-button color="secondary">Cancel</certara-button>
</certara-page-header>

With custom title

Option Badge

Toggle dark mode

<certara-page-header>
  <div slot="content-header-title" class="d-flex align-items-center">
    <certara-select variant="link" size="lg" placeholder="Custom title">
      <certara-select-option>Option</certara-select-option>
    </certara-select>
    <certara-badge color="info">Badge</certara-badge>
  </div>
</certara-page-header>

import { CertaraBadge, CertaraPageHeader, CertaraSelect, CertaraSelectOption } from '@certara/certara-ui-react';

<CertaraPageHeader>
  <div slot="content-header-title" className="d-flex align-items-center">
    <CertaraSelect variant="link" size="lg" placeholder="Custom title">
      <CertaraSelectOption>Option</CertaraSelectOption>
    </CertaraSelect>
    <CertaraBadge color="info">Badge</CertaraBadge>
  </div>
</CertaraPageHeader>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-page-header>
  <div slot="content-header-title" class="d-flex align-items-center">
    <certara-select variant="link" size="lg" placeholder="Custom title">
      <certara-select-option>Option</certara-select-option>
    </certara-select>
    <certara-badge color="info">Badge</certara-badge>
  </div>
</certara-page-header>

certara-page-header

Properties

eyebrow

Attribute	eyebrow
Type	string
Default	undefined
Required	false
Description	Subheading that contains less important, tertiary information related to the headline

headline

Attribute	headline
Type	string
Default	undefined
Required	false
Description	String that is output/nested inside

Events

There are no events available for this component

Methods

There are no public methods available for this component

Slots

Name	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

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.

Design guidelines

Standard

Learn more about Security settings

Save Cancel

Toggle dark mode

With eyebrow

Save Cancel

Toggle dark mode

With custom title

Option Badge

Toggle dark mode

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

Screen reader support

• 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