Missouri State University Pattern Library

Call to action with featured video: Flip

This component allows you to highlight your featured content and supporting featured video within a 50/50 column. Your video must be sourced from YouTube.

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 video component 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 video">
                    <div class="container">
                        <iframe title="YouTube Video" src="https://www.youtube.com/embed/TSzSk7k6ftk" allowfullscreen></iframe>
                    </div>
                </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": null,
  "video": {
    "pageId": 10,
    "youTubeId": "TSzSk7k6ftk"
  },
  "flip": true,
  "shaded": false
}