Skip to main content

Page header

Overview

Use the .page-header class to title a page, or section within a page, using a more prominent heading with extra spacing.

Variants

Default page header

Example page header Subtext for header

<header class="bsk-page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</header>

Stacked page header

Add the .bsk-page-header-stacked class and place the subtitle on a new line before the main title to create a stacked page header.

Stacked page headers are used in the item type header pattern.

Item type
Example item header

<header class="bsk-page-header bsk-page-header-stacked">
  <h1>
    <small>Item type</small>
    <br>
    Example item header
  </h1>
</header>