Heroes: Brand

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-container">
  <h2>Branded Hero</h2>

  <p>To add the branded tear at the bottom of the hero image, you need to use the <code>&#123;% embed %}</code> tag instead of the <code>&#123;% include %}.</code></p>

  <p>You must also import and call the tear, including the containers <code>id</code>.</p>

  <pre><code class="twig">
  &#123;# Place this code inside the containing div #}

  &#123;% from "@miz/components/decorations/decorations.twig" import DecorationTear as tear %}
  &#123;&#123; tear({ "container-id": "container-id" }) }}
  </code></pre>

  <p><em>See the <b>View</b> tab below.</em></p>

</div>

<div class="miz-wrapper">
  {% set heroOptions = {
    "id": "miz-hero",
    "class": "miz-hero--brand miz-decoration__tear miz-background-gel--dark",
    "background-image": {
      "url": "/components/raw/miz-heroes/heroes.png"
    },
    "content": {
      "align": "center",
      "overline": "Ready to Change the&#160;World?",
      "title": "We&#8217;ll Show You&#160;How.",
      "button-group": [{
        "button": {
          "class": "miz-button--primary miz-button--brand",
          "text": "Apply Today",
          "href": "https://admissions.missouri.edu/apply"
        }
      },{
        "button": {
          "class": "miz-button--primary miz-button--brand",
          "text": "Visit Campus",
          "href": "https://missouri.edu/visit"
        }
      }]
    }
  } %}

  {%- embed "@miz/components/heroes/heroes.twig" with heroOptions only %}
    {% block hero_content %}

      {{- parent() -}}

      {% from "@miz/components/decorations/decorations.twig" import DecorationTear as tear %}
      {{ tear({ "container-id": _context.id }) }}

    {% endblock hero_content %}
  {% endembed %}
</div>
<div class="miz-container">
    <h2>Branded Hero</h2>

    <p>To add the branded tear at the bottom of the hero image, you need to use the <code>&#123;% embed %}</code> tag instead of the <code>&#123;% include %}.</code></p>

    <p>You must also import and call the tear, including the containers <code>id</code>.</p>

    <pre><code class="twig">
  &#123;# Place this code inside the containing div #}

  &#123;% from "@miz/components/decorations/decorations.twig" import DecorationTear as tear %}
  &#123;&#123; tear({ "container-id": "container-id" }) }}
  </code></pre>

    <p><em>See the <b>View</b> tab below.</em></p>

</div>

<div class="miz-wrapper">

    <div id="miz-hero" class="miz-hero miz-hero--brand miz-decoration__tear miz-background-gel--dark" style="background-image: url(/components/raw/miz-heroes/heroes.png);">
        <div class="miz-hero__content miz-hero__content--center">

            <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 miz-button--brand">Apply Today</a>

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

            </div>
        </div>

        <svg id="tearSVG" xmlns="http://www.w3.org/2000/svg" class="miz-tear">
    <defs>
      <clipPath id="tearClipPath">
        <path id="tearPath" d="M1444,1V56.8l-1-.13s-4.36-.47-6.22-.54c-2.83-.1-5.86.12-8.1-.59a9.64,9.64,0,0,0-2-.07,53.29,53.29,0,0,1-10.64-.24,9.1,9.1,0,0,0-1.65,0c-1.79.17-3.61.32-5.31.53a162.74,162.74,0,0,1-30.66.43,32.09,32.09,0,0,0-6.35.1c-4.23.84-9.48.69-14.4.81-2.75.06-5,.08-5.94.79a7.76,7.76,0,0,1-2,.35c-1.16.15-2.7.21-3.5.42-3.68,1-9.17.05-13.31.52a13.41,13.41,0,0,1-1.66-.29,44.87,44.87,0,0,0-5.9-.87c-3.71-.1-7.54,0-11.2.16-5.72.23-11.1.39-16-.81a26.48,26.48,0,0,0-11.21-.18c-1.56.3-3.06.65-4.86.84a27.3,27.3,0,0,1-4.95.17,26.26,26.26,0,0,0-9.1.37,12.44,12.44,0,0,1-2.92.19,23.25,23.25,0,0,0-6.4-.07c-2.24.12-4.77,0-7.14.06a74,74,0,0,0-7.46.3c-2.83.39-4.87,1.06-7.48,1.54-3.73.7-7.66,1.33-11.73,2-1.14-.33-2.06-.67-3.3-.92a16.37,16.37,0,0,0-3.27-.36c-4,.11-8,.36-11.3-.57a3.52,3.52,0,0,0-1,0c-4.8.38-9.76.69-14.27,1.21a45.28,45.28,0,0,0-6.19,1.47c-.47-1.34-5.64-2.49-9.27-2.32-1.54.07-3.17.06-4.76.07-2.21,0-4.44,0-6.65,0a42.89,42.89,0,0,1-5.88-.37,32.64,32.64,0,0,0-8.14-.3,52,52,0,0,1-10.72-.59c-3-.51-6.66-.8-10.1-1.14-1.47-.14-3.15-.15-5.25-.24-2.89.43-18.13.22-21.18-.38-3.85.67-4.18.66-7.38-.11a5.23,5.23,0,0,0-1.18-.15c-2.75.16-5.74.24-8.14.55-4,.53-5.73.56-9-.16-1.74,1-5.24.75-8.59.55-.7.77-1.22.81-4.13.4a27.9,27.9,0,0,0-4.08-.39,11.94,11.94,0,0,1-4.67-.56c-.78-.25-1.69-.47-2.73-.76a37.21,37.21,0,0,1-11,.21,24.29,24.29,0,0,0-4,.06,31.41,31.41,0,0,1-9.77-.42c-1.66-.39-3.39-.77-5.16-1.18a13.1,13.1,0,0,1-6.1,0,29.42,29.42,0,0,0-3.39-.28c-1.1-.06-2.23-.12-3.36-.14a32.23,32.23,0,0,0-3.26,0c-2,.2-3.8.47-5.69.72-2.56-.33-5.2-.54-7.88-.63-4.89-.16-9.81-.72-14.7-.24a2.18,2.18,0,0,1-.34,0c-3.25-.18-6.52-.36-8.32.5a46.62,46.62,0,0,0-12.32-.14c-4.46.52-9.12.06-13.59.32-2.58.16-6.1-.4-9.22-.64-.26.08-.47.14-.64.21-3,1.15-5,1.3-10.41.78a16,16,0,0,0-2.4-.07A15.91,15.91,0,0,1,916,56l-7.5.31a13.79,13.79,0,0,0-1.82.12,48.37,48.37,0,0,1-10.18,1.91c-3.28.2-6.48.52-9.85.59-4.23.09-8.59,0-12.77.23a36.44,36.44,0,0,1-4.31-.05c-3.82-.28-7.57-.62-11.29-.93l.93-.43-16.46.39a24.87,24.87,0,0,1-2.73,0c-4.84-.58-8.61.18-12.9.29-1.22-.89-2.69-.9-6.47-.15a32.55,32.55,0,0,0-3.42-.1,38.07,38.07,0,0,1-10.06-.06,21.24,21.24,0,0,0-4.58.16,31.32,31.32,0,0,1-8.59.43,48.55,48.55,0,0,0-7.53-.11,18.25,18.25,0,0,1-7-.46l-2.88.41-4-.89-1.35.47L764,57.74c.24-.59-2.12-1.06-4.41-.86a29.7,29.7,0,0,1-4.31.35c-4.57-.37-4.58.47-5.47,1s-3.25.61-5.51.63c-.69,0-1.4,0-2.08,0-1.43,0-2.89.16-4.25.1-1.67-.08-3.27-.31-4.88-.47l-9.62-1c-3,.66-6.61.25-10.21,0-3.44-.28-6.83-.65-10.33-.79s-6.94,0-10.43-.06c-2.72,0-4.94.32-7.33.38s-5.4-.42-8.08-.45c-5,0-10.15.34-14.52-.74a8.07,8.07,0,0,0-1.3,0l-2.12-.82-8.65,2c-2.43-.49-4-.38-4.9.29A7.63,7.63,0,0,1,644,58a15.19,15.19,0,0,1-6.08.22c-2.73-.83-4.57-.87-8.2-.3a22.69,22.69,0,0,1-4.8.36c-3.68-.44-4.5.59-7.21.55l.37.24-6.6.34c0,.27.1.54.11.57l-5.76.38a20.48,20.48,0,0,1-2.71.12c-2.14-.19-4.11-.51-6.25-.72-1,0-2.06,0-3.08.1-2.35-1.19-6.36.34-9-.31L580,60.71c-3.05-.09-5.83,0-8.59.14-.22,0-.31.13-.51.19a16.69,16.69,0,0,1-6,.84c-3.62-.09-6.47.36-7.74,1-2,1-4.92,1.5-8.95,1.85-.71.06-1.62.35-1.47.49a2.59,2.59,0,0,1-2.11.39,24.15,24.15,0,0,0-7,0c-4.85.44-11.11.2-13.48,1.26-1.82-.12-2.86-.25-3.82-.24-1.45,0-2.84.13-4.69.22-.27.06-.91.23-1.64.37-.93.18-1.94.33-2.29.39-1.27,0-2.06,0-2.72,0s-.87.25-1.36.26c-3,0-6,0-9,0s-5.3.39-5.5,1c0,0-.19.09-.12.06-2.07,0-3.93.09-5.8.08-2.13,0-4.28-.11-6.41-.16l-.53-.31L476,69.86l-.12-.15-5.91.65-1.24-.42-2.23,1.18-2.1.29a76.53,76.53,0,0,1-14.27-.76,38.05,38.05,0,0,0-7.76-.47,142.07,142.07,0,0,1-14.87-.85l-1,.71c-3.14-.51-5.73-1.14-9.55-.81-1.14.1-2.51.11-3.78.09s-2.26-.12-4-.21l-4.38.5a27.49,27.49,0,0,0-9-.58,14,14,0,0,1-2.15,0,25.75,25.75,0,0,0-8.3.48c-.17,0-.51.08-1,.15l-.73-.55c-2.25,0-4.25-.12-6.21-.1s-3.66.14-5.7.22a6.44,6.44,0,0,0-1.31-.17c-2.66,0-5.29.12-7.94.17-1.84,0-3.69.06-5.54.06-1.44,0-2.89,0-5-.08l-.15-.07c-2.25-.14-4-.15-5.37-.35A39.27,39.27,0,0,0,333.4,69a13.7,13.7,0,0,0-2.11-.37c-1.92.12-3.71.33-5.55.5l1.64.33c-1.11,0-2.34-.17-3.3-.11-1.95.11-3.68.45-5.64.49a35.35,35.35,0,0,1-6.34-.27,21.77,21.77,0,0,0-7.72-.12,50.67,50.67,0,0,1-5.51.24c-3.61-.06-7.21-.43-10.87-.18a7.49,7.49,0,0,1-1.48-.24,33.91,33.91,0,0,0-11.1-.41c-1.6.19-3.55.23-5.34.34l-.1-.13-5.06.85a9.71,9.71,0,0,0-1.77-.34c-2.26.05-4.58.11-6.67.29a18.9,18.9,0,0,0-3.65.66,16.15,16.15,0,0,0-2.39,1l-4-1.1-1.42.11c-.58-.29-1-.7-1.51-.71-3.15-.1-5.9-1-9.4-.43a13.8,13.8,0,0,1-1.44-.17c-1.95-.25-3.83-.53-5.86-.72-1.82-.18-3.78-.25-6.32-.4a7.68,7.68,0,0,1-4.43-.08c-1.36.15-2.31.29-3.36.37-3.3.24-7.15.28-9.86.71a104.52,104.52,0,0,1-19.61.86c-9.65-.34-19.27-.83-28.84-1.35-4.26-.24-8.87-.33-12.5-1.11-.41-.09-1.25-.05-1.88-.1a39.13,39.13,0,0,1-5.26-.42c-1.64-.91-4.41-1.17-8-1.47-3.3-.26-5.64-.81-9.9-.51A35.91,35.91,0,0,1,106,64.19a6.27,6.27,0,0,0-1.55-.19c-5.74.14-9.18-1.25-14.49-1.4-2-.06-4-.34-5.8-.27a31.19,31.19,0,0,1-8.51-.66c-3-.65-5.05-1.6-9.67-1.82a32.59,32.59,0,0,1-4.49-.74c-3.71-.65-7.82-1.22-11-2-3.94-1-6-2.38-12.53-2.64a1.31,1.31,0,0,1-.52-.11c-1.45-.9-4.62-.91-7.92-1.13-3.47-.23-6.49-.84-10.34-1-3.09-.16-8.41-.21-10.53.31-.42.11-1,.16-1.19.19L.63,51,0,50.84V0H1444V57.13" />
        <rect id="rectShape" width="100%" height="100%" />
      </clipPath>
    </defs>
  </svg>

        <script>
            SVG.on(document, 'DOMContentLoaded', function() {
                var container = document.getElementById('miz-hero')
                var tearsvg = document.getElementById('tearPath')
                var rectsvg = document.getElementById('rectShape')
                var tear = SVG.adopt(tearsvg)
                var rect = SVG.adopt(rectsvg)
                var containerHeight = container.offsetHeight
                var containerWidth = container.offsetWidth
                var tearHeight = tear.height()
                var tearTranslate = containerHeight - tearHeight
                rect.size(containerWidth, Math.ceil(tearTranslate))
                tear.width(containerWidth)
                tear.translate(0, tearTranslate)
            })
        </script>

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