Missouri State University Pattern Library

Featured content: Video

There are no notes for this item.

<div class="ContentBlock featured-content">
    <div class="container">
        <div class="col">
            <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. Exercitationem, ut? Unde, temporibus.</p>
                <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>
 
<div class="ContentBlock featured-content{{#if flip}} flip{{/if}}{{#if shaded}} expand 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>
 
{
  "cta": {
    "eyebrow": "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": false,
  "shaded": false
}