Heroes: Sizes

Heroes

The Hero is a big deal.

Usage

{# Set options #}
  {% set heroOptions = {
    "content": {
      "overline": "Ready to Change the World?",
      "title": "We’ll Show You How.",
      "button-group": [{
        "button": {
          "class": "miz-button--primary",
          "text": "Apply Today",
          "href": "https://admissions.missouri.edu/apply"
        }
        },{
        "button": {
          "class": "miz-button--primary",
          "text": "Visit Campus",
          "href": "https://missouri.edu/visit"
        }
      }]
    }
  } %}

{# Include the Hero #}
  {% include "@miz/components/heroes/heroes.twig" with heroOptions only %}

The above code will output:

<div id="miz-heroid" class="miz-hero">
  <div class="miz-hero__content">
    <p class="miz-hero__overline">Ready to Change the&#160;World?</p>

    <h2 class="miz-hero__title">We&#8217;ll Show You&#160;How.</h2>

    <div class="miz-hero__button-group">
      <a href="https://admissions.missouri.edu/apply" class="miz-button miz-button--primary"
        >Apply Today</a
      >

      <a href="https://missouri.edu/visit" class="miz-button miz-button--primary">Visit Campus</a>
    </div>
  </div>
</div>

Best practices

Heroes work best when they are not “contained,” that is, do not place them inside of a <div class="miz-container">..</div>. More likely, you’ll place it within a <div class="miz-wrapper">...</div>

<div class="miz-wrapper">
  <div class="miz-hero">...</div>
</div>

Options reference

Hero

Param Default Values Description
class miz-hero String Additional classes appended to the Hero
id miz-hero String id to be applied to the Hero
attributes empty Hash Attributes to be applied to the Hero
background-image false Hash Provide a key/value pair of "url": "/" to add an image inline.
content false Array The content to be displayed in the Hero

Structured contents

The content value of a Hero can be passed as a structured array of hash values.

{
  "content": [
    {
      "align": "...",
      "title": "..."
    }
  ]
}
Type Default Values Description
overline false String A non-heading text element above the title.
title false String An <h2> that is the title of the Hero.
align false center By default, content is left-aligned through CSS flex. Use this to align content to the center.
button-group empty Array Provide an array of Button hash values to add buttons.

See examples for code samples.

Branded version

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

<h2>Default Hero</h2>

{# {% set heroOptions = {
  "title": title,
} %}

{% include "@miz/components/heroes/heroes.twig" with heroOptions only %}

{% set heroOptions = {
  "title": title,
  "content": {
    "align": "center"
  }
} %}

{% include "@miz/components/heroes/heroes.twig" with heroOptions only %} #}

{% from "@miz/components/buttons/buttons.twig" import AnchorButton as anchorButton %}

<p><strong>Small</strong></p>

<div class="miz-hero miz-hero--small">

  <div class="miz-hero__content">

    <p class="miz-hero__overline">{{ overline }}</p>

    <h1 class="miz-hero__title">{{ title }}</h1>

    <div class="miz-hero__button-group">
      {% for button in buttons %}
        {{ anchorButton(button) }}
      {% endfor %}
    </div>

  </div>

</div>

<p><strong>Default (Medium)</strong></p>

<div class="miz-hero">

  <div class="miz-hero__content miz-hero__content--center">

    <p class="miz-hero__overline">{{ overline }}</p>

    <h1 class="miz-hero__title">{{ title }}</h1>

    <div class="miz-hero__button-group">
      {% for button in buttons %}
        {{ anchorButton(button) }}
      {% endfor %}
    </div>

  </div>

</div>

<p><strong>Large</strong></p>

<div class="miz-hero miz-hero--large">

  <div class="miz-hero__content">

    <p class="miz-hero__overline">{{ overline }}</p>

    <h1 class="miz-hero__title">{{ title }}</h1>

    <div class="miz-hero__button-group">
      {% for button in buttons %}
        {{ anchorButton(button) }}
      {% endfor %}
    </div>

  </div>

</div>
<h2>Default Hero</h2>

<p><strong>Small</strong></p>

<div class="miz-hero miz-hero--small">

    <div class="miz-hero__content">

        <p class="miz-hero__overline"></p>

        <h1 class="miz-hero__title"></h1>

        <div class="miz-hero__button-group">
        </div>

    </div>

</div>

<p><strong>Default (Medium)</strong></p>

<div class="miz-hero">

    <div class="miz-hero__content miz-hero__content--center">

        <p class="miz-hero__overline"></p>

        <h1 class="miz-hero__title"></h1>

        <div class="miz-hero__button-group">
        </div>

    </div>

</div>

<p><strong>Large</strong></p>

<div class="miz-hero miz-hero--large">

    <div class="miz-hero__content">

        <p class="miz-hero__overline"></p>

        <h1 class="miz-hero__title"></h1>

        <div class="miz-hero__button-group">
        </div>

    </div>

</div>
/* No context defined for this component. */
  • Content:
    // Hero
    //
    // Hero component
    .miz-hero {
      position: relative;
      /* stylelint-disable-next-line */
      display: flex;
      flex-flow: column nowrap;
      justify-content: stretch safe;
      background-position: center 50%;
      background-size: cover;
    
      > * {
        flex: 1 0 auto;
      }
    }
    
    .miz-hero__content {
      /* stylelint-disable-next-line */
      display: flex;
      flex-flow: column nowrap;
      justify-content: center safe;
      align-items: flex-start;
      padding: $miz-space-xl $miz-space-default;
      z-index: 1;
    
      > * {
        flex: 0 0 auto;
      }
    
      > :last-child {
        margin-bottom: 0;
      }
    
      @include media-breakpoint-up(lg) {
        padding: $miz-space-xxl;
      }
    }
    
    .miz-hero__content--center {
      text-align: center;
      align-items: center;
    }
    
    .miz-hero__overline {
      @include text-crop;
    
      font-size: $miz-font-size-level-2;
      margin: $miz-space-stack-l;
    
      @include media-breakpoint-up(sm) {
        font-size: $miz-font-size-level-4;
      }
    }
    
    .miz-hero__title {
      font-size: $miz-font-size-level-5;
      margin: $miz-space-stack-l;
    
      @include media-breakpoint-up(sm) {
        font-size: $miz-display-3-size;
      }
    
      @include media-breakpoint-up(xl) {
        font-size: $miz-display-2-size;
      }
    }
    
    .miz-hero__button-group {
      /* stylelint-disable-next-line */
      display: flex;
      flex-flow: column wrap;
    
      > * {
        flex: 0 0 auto;
      }
    
      .miz-button {
        display: inline-block;
        margin-bottom: $miz-space-default;
      }
    
      .miz-button:last-child {
        margin-bottom: 0;
      }
    
      @include media-breakpoint-up(sm) {
        flex-flow: row wrap;
    
        .miz-button {
          margin-bottom: 0;
        }
    
        .miz-button:not(:last-child) {
          margin-right: $miz-space-default;
        }
      }
    }
    
  • URL: /components/raw/miz-heroes/heroes.scss
  • Filesystem Path: fractal/pattern-library/miz/components/heroes/heroes.scss
  • Size: 1.6 KB