Missouri State University Pattern Library

Four-column tout

There are no notes for this item.

<div class="ContentBlock four-column-tout">
    <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. Commodi sit earum repellat?</p>
        <div class="link-bar">
            <ul class="container">
                <li>
                    <a href="#" class="button">Lorem ipsum</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="container">
        <div class="col">
            <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 class="col">
            <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 class="col">
            <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 class="col">
            <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="ContentBlock four-column-tout">
  {{render '@call-to-action' cta merge=true}}
  <div class="container">
    {{#each touts}}
      <div class="col">
        {{render '@tout' tout}}
      </div>
    {{/each}}
  </div>
</div>
 
{
  "cta": {
    "eyebrow": "Lorem ipsum dolor",
    "headline": "Lorem ipsum dolor sit amet consectetur",
    "description": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi sit earum repellat?",
    "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": "#"
        }
      }
    }
  ]
}