Missouri State University Pattern Library

Statistic

There are no notes for this item.

<div class="ContentBlock statistic">
    <div class="ContentBlock call-to-action">
        <div class="eyebrow">
        </div>
        <h2 class="headline">Lorem ipsum dolor sit amet consectetur</h2>
        <p 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.</p>
        <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>
 
<div class="ContentBlock statistic">
  {{render '@call-to-action' cta}}
  <div class="container">
    {{#each statistic}}
      {{render '@highlight' highlight}}
    {{/each}}
  </div>
</div>
 
{
  "cta": {
    "layout": {
      "centered": true
    },
    "eyebrow": "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": "#"
        }
      }
    }
  ]
}