Missouri State University Pattern Library

Two-column tout

There are no notes for this item.

<div class="two-column-tout">
    <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. Error corrupti debitis voluptatum sunt, iusto nisi neque consectetur ullam placeat ad minus numquam, eius reprehenderit.</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="tout-container">
            <div class="ContentBlock tout">
                <div class="image-container">
                    <img class="image" src="http://picsum.photos/1920/1080?random" alt="">
                </div>
                <div class="container">
                    <h3 class="headline"><a href="#">Lorem ipsum dolor sit amet consectetur</a></h3>
                    <p class="description">
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem doloremque quasi maiores.
                    </p>
                </div>
            </div>
            <div class="ContentBlock tout">
                <div class="image-container">
                    <img class="image" src="http://picsum.photos/1920/1080?random" alt="">
                </div>
                <div class="container">
                    <h3 class="headline"><a href="#">Lorem ipsum dolor sit amet consectetur</a></h3>
                    <p class="description">
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem doloremque quasi maiores.
                    </p>
                </div>
            </div>
            <div class="ContentBlock tout">
                <div class="image-container">
                    <img class="image" src="http://picsum.photos/1920/1080?random" alt="">
                </div>
                <div class="container">
                    <h3 class="headline"><a href="#">Lorem ipsum dolor sit amet consectetur</a></h3>
                    <p class="description">
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem doloremque quasi maiores.
                    </p>
                </div>
            </div>
            <div class="ContentBlock tout">
                <div class="image-container">
                    <img class="image" src="http://picsum.photos/1920/1080?random" alt="">
                </div>
                <div class="container">
                    <h3 class="headline"><a href="#">Lorem ipsum dolor sit amet consectetur</a></h3>
                    <p class="description">
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem doloremque quasi maiores.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="two-column-tout{{#if flip}} flip{{/if}}">
  <div class="col">
    {{render '@call-to-action' cta}}
  </div>
  <div class="col">
    <div class="tout-container">
      {{#each touts}}
        {{render '@tout' tout}}
      {{/each}}
    </div>
  </div>
</div>
 
{
  "flip": false,
  "cta": {
    "eyebrow": "Lorem ipsum dolor",
    "headline": "Lorem ipsum dolor sit amet consectetur",
    "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Error corrupti debitis voluptatum sunt, iusto nisi neque consectetur ullam placeat ad minus numquam, eius reprehenderit.",
    "linkBar": {
      "link": [
        {
          "text": "Lorem ipsum",
          "url": "#"
        }
      ]
    }
  },
  "touts": [
    {
      "tout": {
        "image": {
          "src": "http://picsum.photos/1920/1080?random",
          "alt": null
        },
        "headline": "Lorem ipsum dolor sit amet consectetur",
        "description": "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem doloremque quasi maiores.",
        "link": {
          "url": "#"
        }
      }
    },
    {
      "tout": {
        "image": {
          "src": "http://picsum.photos/1920/1080?random",
          "alt": null
        },
        "headline": "Lorem ipsum dolor sit amet consectetur",
        "description": "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem doloremque quasi maiores.",
        "link": {
          "url": "#"
        }
      }
    },
    {
      "tout": {
        "image": {
          "src": "http://picsum.photos/1920/1080?random",
          "alt": null
        },
        "headline": "Lorem ipsum dolor sit amet consectetur",
        "description": "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem doloremque quasi maiores.",
        "link": {
          "url": "#"
        }
      }
    },
    {
      "tout": {
        "image": {
          "src": "http://picsum.photos/1920/1080?random",
          "alt": null
        },
        "headline": "Lorem ipsum dolor sit amet consectetur",
        "description": "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem doloremque quasi maiores.",
        "link": {
          "url": "#"
        }
      }
    }
  ]
}