Missouri State University Pattern Library

Featured content: Flip

There are no notes for this item.

<div class="ContentBlock featured-content flip">
    <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 feature-image-container">
                <img class="image" src="http://picsum.photos/1920/1080?random" alt="">
            </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": {
    "src": "http://picsum.photos/1920/1080?random",
    "alt": null
  },
  "video": null,
  "flip": true,
  "shaded": false
}