Missouri State University Pattern Library

Call to action with hero: Image

A call to action with hero block works well for top-level pages.

It is reserved for website home pages and marketing landing pages.

This component provides a form where you may add a full-width image or video at the top of your webpage. You may also choose to add three call-to-action links under it.

Add a call to action with hero block in Modern Campus CMS

<div id="hero" class="hero expand">
    <div class="container">
        <img class="image" src="http://picsum.photos/1920/1080?random" alt="placeholder image" />
    </div>
    <div class="cta-container">
        <div class="grounding-bar svg-wrapper">
            <svg class="grounding-bars" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 20">
                <path fill-rule="evenodd" d="M0 20V0h12v20H0zm24 0V0h12v20H24zm24 0V0h12v20H48z" />
            </svg>
        </div>
        <div class="ContentBlock call-to-action">
            <div class="eyebrow">Lorem ipsum</div>
            <h2 class="headline">Lorem ipsum dolor sit amet consectetur</h2>
            <div class="description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis tenetur blanditiis excepturi.</div>
            <div class="link-bar">
                <ul class="container">
                    <li>
                        <a href="#" class="button">Lorem ipsum</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
 
<div id="hero" class="hero expand">
  <div class="container">
    {{#if image}}
      <img class="image" src="{{path image.src}}" alt="{{image.alt}}" />
    {{/if}}
    {{#if video}}
      {{#if video.alt}}
        <div role="region" aria-label="Hero video screen reader information" class="screen-reader">
          {{video.alt}}
        </div>
      {{/if}}
      <video id="video" preload="metadata" autoplay muted playsinline loop poster="{{path video.poster}}">
        {{#each video.sources}}
          <source type="video/{{type}}" src="{{path src}}">
        {{/each}}
        Your browser does not support HTML5 video.
      </video>
      <script src="{{path '/scripts/components/hero.js'}}"></script>
    {{/if}}
  </div>
  {{#if cta}}
    <div class="cta-container">
      <div class="grounding-bar svg-wrapper">
        {{> @grounding-bars-vertical}}
      </div>
      {{render '@call-to-action' cta}}
    </div>
  {{/if}}
</div>
 
{
  "cta": {
    "eyebrow": {
      "text": "Lorem ipsum"
    },
    "headline": "Lorem ipsum dolor sit amet consectetur",
    "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis tenetur blanditiis excepturi.",
    "linkBar": {
      "link": [
        {
          "text": "Lorem ipsum",
          "url": "#"
        }
      ]
    }
  },
  "image": {
    "src": "http://picsum.photos/1920/1080?random",
    "alt": "placeholder image"
  }
}