Page Header

Show design guidelines

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" 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" icon="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" 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" 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" icon="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" 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>

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