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>Page headers</h2>

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

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

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

<p><b>Dark</b></p>

{# Set options #}
  {% set pageHeaderOptions = {
    "variant": "dark",
    "title": "Default page header"
  } %}

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

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

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

<p><b>Dark</b></p>

<header class="miz-page-header miz-page-header--dark">
    <div class="miz-container">
        <h2 class="miz-page-header__title">Default page header</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