Heroes: Base

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.

<div class="miz-wrapper">
  <h2>Default Hero</h2>
  {% set heroOptions = {
    "class": "miz-fill--black-100",
    "content": {
      "overline": "Ready to Change the&#160;World?",
      "title": "We&#8217;ll Show You&#160;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 "@miz/components/heroes/heroes.twig" with heroOptions only %}
</div>
<div class="miz-wrapper">
    <h2>Default Hero</h2>

    <div id="miz-hero" class="miz-hero miz-fill--black-100">
        <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>

</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