Page headers

Page headers should be inside the <main> element and are meant to be used as the main header for the page. For now, it includes a simple heading but more details can be added and a branded version exists.

Usage

{# Set options #}
  {% set pageHeaderOptions = {
    "title": "Page header"
  } %}

{# Include page header #}
  {% include "components/page-headers/page-headers.twig" with pageHeaderOptions only %}

The above code will output:

<header class="miz-page-header">
  <div class="miz-container">
    <h2 class="miz-page-header__title">Page header</h2>
  </div>
</header>

See the View tab for more variations.

Best practices

The Page header uses a <header> element as its container, so it should be placed inside a <section> element, preferably inside of a <main> element itself.

<main class="miz-main">
  <section class="miz-page-content">
    <header class="miz-page-header">...</header>
  </section>
</main>

Options reference

Param Default Values Description
class miz-page-header String Additional classes appended to the page header
attributes null Object Attributes to be applied to the page header
title null String The title to be displayed inside the page header
size false small,large, or xlarge Will append a miz-page-header--* class to the container and change the sizing of the header. These are all responsive and will adjust depending on the screen size.
variant false dark Use the dark variant to apply the dark themed variant.

Branded version

By adding the .miz-page-header--brand to the class option, your header will be branded and adjust accordingly.

<h2>Branded Page Headers</h2>

<p><b>Small</b></p>

{% set pageHeaderOptions = {
  "title": "About Mizzou",
  "size": "small",
  "class": "miz-page-header--brand"
} %}

{% include "components/page-headers/page-headers.twig" with pageHeaderOptions only %}

{% set pageHeaderOptions = {
  "title": "About Mizzou",
  "size": "small",
  "variant": "dark",
  "class": "miz-page-header--brand miz-decoration miz-decoration__roller-bg miz-decoration__plus miz-decoration__plus--bottom-right"
} %}

{% include "components/page-headers/page-headers.twig" with pageHeaderOptions only %}

<p><b>Default</b></p>

{% set pageHeaderOptions = {
  "title": "About Mizzou",
  "class": "miz-page-header--brand"
} %}

{% include "components/page-headers/page-headers.twig" with pageHeaderOptions only %}

{% set pageHeaderOptions = {
  "title": "About Mizzou",
  "variant": "dark",
  "class": "miz-page-header--brand miz-decoration miz-decoration__roller-bg miz-decoration__plus miz-decoration__plus--bottom-right"
} %}

{% include "components/page-headers/page-headers.twig" with pageHeaderOptions only %}

<p><b>Large</b></p>

{% set pageHeaderOptions = {
  "title": "About Mizzou",
  "size": "large",
  "class": "miz-page-header--brand"
} %}

{% include "components/page-headers/page-headers.twig" with pageHeaderOptions only %}

{% set pageHeaderOptions = {
  "title": "About Mizzou",
  "size": "large",
  "variant": "dark",
  "class": "miz-page-header--brand miz-decoration miz-decoration__roller-bg miz-decoration__plus miz-decoration__plus--bottom-right"
} %}

{% include "components/page-headers/page-headers.twig" with pageHeaderOptions only %}

<p><b>Extra Large</b></p>

{% set pageHeaderOptions = {
  "title": "Large page header",
  "size": "xlarge",
  "class": "miz-page-header--brand"
} %}

{% include "components/page-headers/page-headers.twig" with pageHeaderOptions only %}

{% set pageHeaderOptions = {
  "title": "About Mizzou",
  "size": "xlarge",
  "variant": "dark",
  "class": "miz-page-header--brand miz-decoration miz-decoration__roller-bg miz-decoration__plus miz-decoration__plus--bottom-right"
} %}

{% include "components/page-headers/page-headers.twig" with pageHeaderOptions only %}
<h2>Branded Page Headers</h2>

<p><b>Small</b></p>

<header class="miz-page-header miz-page-header--small miz-page-header--brand">
    <div class="miz-container">
        <h2 class="miz-page-header__title">About Mizzou</h2>
    </div>
</header>

<header class="miz-page-header miz-page-header--small miz-page-header--dark miz-page-header--brand miz-decoration miz-decoration__roller-bg miz-decoration__plus miz-decoration__plus--bottom-right">
    <div class="miz-container">
        <h2 class="miz-page-header__title">About Mizzou</h2>
    </div>
</header>

<p><b>Default</b></p>

<header class="miz-page-header miz-page-header--brand">
    <div class="miz-container">
        <h2 class="miz-page-header__title">About Mizzou</h2>
    </div>
</header>

<header class="miz-page-header miz-page-header--dark miz-page-header--brand miz-decoration miz-decoration__roller-bg miz-decoration__plus miz-decoration__plus--bottom-right">
    <div class="miz-container">
        <h2 class="miz-page-header__title">About Mizzou</h2>
    </div>
</header>

<p><b>Large</b></p>

<header class="miz-page-header miz-page-header--large miz-page-header--brand">
    <div class="miz-container">
        <h2 class="miz-page-header__title">About Mizzou</h2>
    </div>
</header>

<header class="miz-page-header miz-page-header--large miz-page-header--dark miz-page-header--brand miz-decoration miz-decoration__roller-bg miz-decoration__plus miz-decoration__plus--bottom-right">
    <div class="miz-container">
        <h2 class="miz-page-header__title">About Mizzou</h2>
    </div>
</header>

<p><b>Extra Large</b></p>

<header class="miz-page-header miz-page-header--xlarge miz-page-header--brand">
    <div class="miz-container">
        <h2 class="miz-page-header__title">Large page header</h2>
    </div>
</header>

<header class="miz-page-header miz-page-header--xlarge miz-page-header--dark miz-page-header--brand miz-decoration miz-decoration__roller-bg miz-decoration__plus miz-decoration__plus--bottom-right">
    <div class="miz-container">
        <h2 class="miz-page-header__title">About Mizzou</h2>
    </div>
</header>
/* No context defined for this component. */
  • Content:
    // Page headers
    //
    // Styleguide page-headers
    
    .miz-page-header {
      font-size: 0.75em;
      padding: ($miz-space-m * 1.5) 0;
    
      @include media-breakpoint-up(md) {
        font-size: 1em;
      }
    }
    
    .miz-page-header__title {
      @include text-crop--open-sans-level-7;
      @include miz-text-heading-level-6;
    
      margin-bottom: 0;
    
      @include media-breakpoint-up(md) {
        @include miz-text-heading-level-6;
      }
    }
    
    .miz-page-header--dark {
      color: $miz-white;
      background-color: $miz-black-700;
    }
    
    // Sizing
    .miz-page-header--small {
      font-size: 0.5em;
      padding: ($miz-space-s * 1.5) 0;
    
      @include media-breakpoint-up(md) {
        padding: ($miz-space-s * 2.5) 0;
        font-size: 0.75em;
      }
    }
    
    .miz-page-header--large {
      font-size: 1em;
      padding: ($miz-space-l * 1.5) 0;
    
      @include media-breakpoint-up(md) {
        font-size: 1.25em;
      }
    }
    
    .miz-page-header--xlarge {
      font-size: 1em;
      padding: ($miz-space-l * 1.5) 0;
    
      @include media-breakpoint-up(md) {
        padding: ($miz-space-xl * 1.25) 0;
        font-size: 1.5em;
      }
    }
    
  • URL: /components/raw/miz-page-headers/_page-headers.scss
  • Filesystem Path: fractal/pattern-library/miz/components/page-headers/_page-headers.scss
  • Size: 1 KB