Masthead

The Masthead is a Header component used to display the main title of the site, with an optional subtitle.

Usage

Twig

{# Set options #}
{% set mastheadOptions = {
  "title": "Office of Programs",
  "href": "https://subdomain.missouri.edu/"
} %}

{% include "@miz/components/masthead/masthead.twig" with mastheadOptions only %}

HTML

<div class="miz-masthead" role="banner">
    <h1 class="miz-masthead__title">
        <a title="Office of Programs" href="https://subdomain.missouri.edu/">Office of Programs</a>
    </h1>
</div>

Options reference

Options

Param Default Values Description
class miz-masthead String Additional classes appended to the masthead
attributes null Object Attributes to be applied to the masthead
title Default site name String The title to be displayed on the masthead
href # String The url for the masthead title link
subtitle null String The subtitle to be displayed on the masthead
{# Set options #}
{% set mastheadOptions = {
  "title": "Office of Programs",
  "href": "https://subdomain.missouri.edu/"
} %}

{% include "components/masthead/masthead.twig" with mastheadOptions only %}
<div class="miz-masthead" role="banner">
    <h1 class="miz-masthead__title">
        <a title="Office of Programs" href="https://subdomain.missouri.edu/">Office of Programs</a>
    </h1>
</div>
/* No context defined for this component. */
  • Content:
    ////
    /// Masthead
    /// Classes for use with the Masthead component
    ////
    
    /// Base Masthead
    .miz-masthead {
      padding: $miz-space-stack-sandwich-l;
    
      // Make sure last child element has no bottom margin.
      > :last-child {
        margin-bottom: 0;
      }
    }
    
    /// Masthead Title
    /// Title to be used with title
    .miz-masthead__title {
      font-size: $miz-h3-font-size;
    
      a {
        text-decoration: none;
      }
    
      a:hover {
        color: $miz-red;
      }
    
      /// Medium breakpoint and up
      @include media-breakpoint-up(md) {
        font-weight: $miz-font-weight-light;
        font-size: $miz-h2-font-size;
      }
    }
    
    /// Masthead Subtitle
    /// Subtitle to be used with title
    .miz-masthead__subtitle {
      font-size: $miz-h5-font-size;
      margin-top: -$miz-headings-margin-bottom / 2;
    
      /// Medium breakpoint and up
      @include media-breakpoint-up(md) {
        font-size: $miz-h4-font-size;
        font-weight: $miz-font-weight-light;
      }
    }
    
  • URL: /components/raw/miz-masthead/_masthead.scss
  • Filesystem Path: fractal/pattern-library/miz/components/masthead/_masthead.scss
  • Size: 896 Bytes