Missouri State University Pattern Library

Call to action above touts

This component allows you to group related items, or outline steps. It is recommended that you limit your touts to a maximum of four. The tout’s heading may serve as a link to additional information. The CTA link may or may not be present depending on your needs. Also inclusion of images is not mandatory.

Build a CTA above touts in Modern Campus CMS

  • Handle: @call-to-action-above-touts
  • Preview:
  • Filesystem Path: src/components/03-page-elements-and-patterns/content-structure/call-to-action-above-touts/call-to-action-above-touts.hbs
  • References (2): @call-to-action, @tout 
<section>
    <div class="ContentBlock four-column-tout">
        <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. Commodi sit earum repellat?</div>
            <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="" loading="lazy">
                    </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="" loading="lazy">
                    </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="" loading="lazy">
                    </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="" loading="lazy">
                    </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>
</section>
 
<section>
  <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>
</section>
 
{
  "cta": {
    "eyebrow": {
      "text": "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": "#"
        }
      }
    }
  ]
}