Missouri State University Pattern Library

Call to action: Text

There are no notes for this item.

<div class="ContentBlock call-to-action">
    <div class="eyebrow">
        Lorem ipsum
    </div>
    <h2 class="headline">Lorem ipsum dolor sit amet consectetur</h2>
    <p class="description">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vero odio, optio deserunt quam maxime quos et impedit consectetur laboriosam nemo ut odit alias? Quod culpa necessitatibus assumenda, quo accusantium consequuntur.</p>
    <div class="link-bar">
        <ul class="container">
            <li>
                <a href="#" class="button">Lorem ipsum</a>
            </li>
        </ul>
    </div>
</div>
 
<div class="ContentBlock call-to-action">
  {{#if eyebrow}}
    <div class="eyebrow">
      {{#if eyebrow.text}}
        {{eyebrow.text}}
      {{else if eyebrow.image}}
        <img class="call-to-action__eyebrow--image" src="{{path eyebrow.image.src}}" alt="{{eyebrow.image.alt}}">
      {{/if}}
    </div>
  {{/if}}
  <h2 class="headline">{{headline}}</h2>
  {{#if description}}
    <p class="description">{{description}}</p>
  {{/if}}
  {{#>description custom}}
    {{/description}}
    {{#if linkBar}}
      {{render '@link-bar' linkBar}}
    {{/if}}
</div>
 
{
  "eyebrow": {
    "text": "Lorem ipsum",
    "image": null
  },
  "headline": "Lorem ipsum dolor sit amet consectetur",
  "description": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vero odio, optio deserunt quam maxime quos et impedit consectetur laboriosam nemo ut odit alias? Quod culpa necessitatibus assumenda, quo accusantium consequuntur.",
  "linkBar": {
    "link": [
      {
        "text": "Lorem ipsum",
        "url": "#"
      }
    ]
  }
}