Missouri State University Pattern Library

Call to action above highlights

This component allows you to predominately highlight multiple values such as costs, percentages or dates. Within a full-width layout, four highlights may be present. Within the interior page layout, three maximum is suggested. The CTA link may or may not be present depending on your needs.

Build a CTA above highlights in Modern Campus CMS

<section>
    <div class="ContentBlock statistic">
        <div class="ContentBlock call-to-action">
            <div class="eyebrow">Lorem ipsum dolor</div>
            <h2 class="headline">Lorem ipsum dolor sit amet consectetur</h2>
            <div class="description">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo non ex quo eveniet aliquid aut, culpa, repellendus optio, possimus necessitatibus velit iure! Delectus, eaque.</div>
            <div class="link-bar">
                <ul class="container">
                    <li>
                        <a href="#" class="button">Lorem ipsum</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="container">
            <div class="ContentBlock highlight">
                <div class="eyebrow">Lorem ipsum</div>
                <div class="value">100</div>
                <div class="description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem repellat obcaecati fugit</div>
                <a href="#" class="button secondary">Lorem ipsum</a>
            </div>
            <div class="ContentBlock highlight">
                <div class="eyebrow">Lorem ipsum</div>
                <div class="value">200</div>
                <div class="description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem repellat obcaecati fugit</div>
                <a href="#" class="button secondary">Lorem ipsum</a>
            </div>
            <div class="ContentBlock highlight">
                <div class="eyebrow">Lorem ipsum</div>
                <div class="value">300</div>
                <div class="description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem repellat obcaecati fugit</div>
                <a href="#" class="button secondary">Lorem ipsum</a>
            </div>
        </div>
    </div>
</section>
 
<section>
  <div class="ContentBlock statistic">
    {{render '@call-to-action' cta}}
    <div class="container">
      {{#each statistic}}
        {{render '@highlight' highlight}}
      {{/each}}
    </div>
  </div>
</section>
 
{
  "cta": {
    "layout": {
      "centered": true
    },
    "eyebrow": {
      "text": "Lorem ipsum dolor"
    },
    "headline": "Lorem ipsum dolor sit amet consectetur",
    "description": "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo non ex quo eveniet aliquid aut, culpa, repellendus optio, possimus necessitatibus velit iure! Delectus, eaque.",
    "linkBar": {
      "link": [
        {
          "text": "Lorem ipsum",
          "url": "#"
        }
      ]
    }
  },
  "statistic": [
    {
      "highlight": {
        "selected": false,
        "eyebrow": "Lorem ipsum",
        "value": 100,
        "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem repellat obcaecati fugit",
        "link": {
          "text": "Lorem ipsum",
          "url": "#"
        }
      }
    },
    {
      "highlight": {
        "selected": false,
        "eyebrow": "Lorem ipsum",
        "value": 200,
        "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem repellat obcaecati fugit",
        "link": {
          "text": "Lorem ipsum",
          "url": "#"
        }
      }
    },
    {
      "highlight": {
        "selected": false,
        "eyebrow": "Lorem ipsum",
        "value": 300,
        "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem repellat obcaecati fugit",
        "link": {
          "text": "Lorem ipsum",
          "url": "#"
        }
      }
    }
  ]
}