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.

{%- spaceless %}

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

  {# Parameters #}
    {% set options = _context
      ? _context
      : {} %}

    {% set heroClass            = "miz-hero" %}
    {% set heroAddClass         = options.class ?: false %}
    {% set heroId               = options.id ?: "miz-hero" %}
    {% set heroAttributes       = options.attributes ? utils.AddAttributes( options.attributes ) %}
    {% set heroBgImage          = options["background-image"] ?: false %}
    {# Content #}
    {% set heroContent          = options["content"] ?: false %}
    {% set heroContentClass     = "miz-hero__content" %}
    {% set heroContentAddClass  = heroContent["class"] ?: false %}
    {% set heroContentAlign     = heroContent["align"] ? heroContent["align"] : false %}
    {% set heroTitle            = heroContent["title"] ? heroContent["title"] : false %}
    {% set heroOverline         = heroContent["overline"] ? heroContent["overline"] : false %}
    {% set heroButtonGroup      = heroContent["button-group"] %}

  {# Variables #}
    {% set heroClass            = heroSize ? utils.AppendClasses( heroClass, "miz-hero--" ~ heroSize ) : heroClass %}
    {% set heroClass            = heroAddClass
      ? utils.AppendClasses(heroClass, heroAddClass)
      : heroClass %}
    {% set heroBgStyle          = heroBgImage ? ' style="background-image: url(' ~ heroBgImage.url ~ ');"' %}

    {% set heroContentClass     = heroContentAlign ? utils.AppendClasses( heroContentClass, "miz-hero__content--" ~ heroContentAlign ) : heroContentClass %}
    {% set heroContentClass     = heroContentAddClass
      ? utils.AppendClasses(heroContentClass, heroContentAddClass)
      : heroContentClass %}

{% endspaceless -%}

{# Output #}
<div id="{{ heroId }}" class="{{ heroClass }}"{{ heroBgStyle }}{{ heroAttributes }}>

  {% block hero_content %}
    <div class="{{ heroContentClass }}">

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

      <h2 class="miz-hero__title">{{ heroTitle }}</h2>

      {% if heroButtonGroup is defined and heroButtonGroup is not empty -%}

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

      {%- endif %}
    </div>
  {% endblock %}

</div>
<div id="miz-hero" class="miz-hero">
    <div class="miz-hero__content">

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

        <h2 class="miz-hero__title">false</h2>

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