Missouri State University Pattern Library

Call to action beside touts

This component allows you to include, on your page, a CTA grouped with related items in the form of touts. The CTA may appear on the left or right side depending on your needs. The CTA link may or may not be present. Inclusion of images is not mandatory.

Build a CTA beside touts in Modern Campus CMS

  • Handle: @call-to-action-beside-touts
  • Preview:
  • Filesystem Path: src/components/03-page-elements-and-patterns/content-structure/call-to-action-beside-touts/call-to-action-beside-touts.hbs
  • References (2): @call-to-action, @tout 
<section>
    <div class="two-column-tout">
        <div class="col">
            <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. Error corrupti debitis voluptatum sunt, iusto nisi neque consectetur ullam placeat ad minus numquam, eius reprehenderit.</div>
                <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="" 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 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 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 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="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>
</section>
 
{
  "flip": false,
  "cta": {
    "eyebrow": {
      "text": "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": "#"
        }
      }
    }
  ]
}