Missouri State University Pattern Library

Call to action with featured image: Flip

This component allows you to highlight your featured content and supporting featured image within a 50/50 grid column. You have the option to present the image within the left or right column.

This component may also have a shaded background. Add the component to the page within a layout grid (one column) and select shaded background as a layout option.

This element is also available on a maroon background that extends the width of a full-width template. This variation is for internal use only.

Build a CTA with featured image in Modern Campus CMS

<section>
    <div class="ContentBlock featured-content flip  ">
        <div class="container">
            <div class="col">
                <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. Exercitationem, ut? Unde, temporibus.</div>
                    <div class="link-bar">
                        <ul class="container">
                            <li>
                                <a href="#" class="button">Lorem ipsum</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="ContentBlock feature-image-container">
                    <img class="image" src="http://picsum.photos/1920/1080?random" alt="placeholder image" loading="lazy">
                </div>
            </div>
        </div>
    </div>
</section>
 
<section>
  <div class="ContentBlock featured-content{{#if flip}} flip{{/if}} {{#if expand}}expand{{/if}} {{#if shaded}}shaded{{/if}}">
    <div class="container">
      <div class="col">
        {{render '@call-to-action' cta}}
      </div>
      <div class="col">
        {{#if image}}
          {{render '@featured-image' image}}
        {{/if}}
        {{#if video}}
          {{render '@featured-video' video}}
        {{/if}}
      </div>
    </div>  
  </div>
</section>
 
{
  "cta": {
    "eyebrow": {
      "text": "Lorem ipsum dolor"
    },
    "headline": "Lorem ipsum dolor sit amet consectetur",
    "description": "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem, ut? Unde, temporibus.",
    "linkBar": {
      "link": [
        {
          "text": "Lorem ipsum",
          "url": "#"
        }
      ]
    }
  },
  "image": {
    "src": "http://picsum.photos/1920/1080?random",
    "alt": "placeholder image"
  },
  "video": null,
  "flip": true,
  "shaded": false
}