Monetate | Crossroads Digital Design Kit

Monetate Templates

The following templates can be used with Monetate to create a consistent look across all CTAs.

Each template has a series of modifier classes. Classes beginning with .l- effect layout, while classes starting with .s- are purely aesthetic. If you find that a certain color or font doesn't work with the CTA you're creating, by all means, experiment with the layout by removing classes and adding utility classes to get the look you want.

It should also be noted that by default, all CTAs have min-height: 250px on mobile and min-height: 310px on desktop applied. If you want to override these rules, add any of the following classes to the wrapping CTA element (in our examples, the <div class="cta">).

Class name: min-height
.l-sidebar min-height: 100px
.l-mobile min-height: 250px
.l-mini min-height: 250px
.l-card-4x min-height: 250px
.l-card-6x min-height: 310px
.l-container min-height: 310px

CTA 1

Oct 6-7 in Neville, OH

Get your ticket now!

<!-- Background image -->
<div class="cta cta-1" style="background-image: url('//crds-cms-uploads.imgix.net/content/images/womancamp-photostrip1.jpg')">
  <!-- Foreground image -->
  <div class="l-foreground-image">
    <img src="//crds-cms-uploads.imgix.net/crds-styleguide/logo-woman-camp.png" alt="">
  </div>

  <!-- Background color -->
  <div class="l-text-wrapper s-text-wrapper" style="background-color: rgba(75,61,63,.85);">
    <!-- Details (short) -->
    <p class="l-details">Oct 6-7 in Neville, OH</p>

    <!-- CTA (link) -->
    <p class="l-action s-action">Get your ticket now!</p>
  </div>
</div>

CTA 2

Buy now
<!-- Background image -->
<div class="cta cta-2" style="background-image: url('//crds-media.imgix.net/4spnEl42tqE0gMUeswcmUm/69577c2673349a7f3e184e32d2e8a165/crossroads-ikr-podcast-background.jpg')">

  <!-- Foreground image -->
  <div class="l-foreground-image">
    <img src="//crds-media.imgix.net/2wQvAhYczyWaIgimcma2yO/06735d3fefb9b877b3246de95235367d/crossroads-podcast-ikr.jpg" alt="">
  </div>

  <div class="l-text-wrapper s-text-wrapper">
    <!-- Headline -->
    <h3 class="l-headline s-headline hidden-xs">Be a man of strength, courage, and honor</h3>

    <!-- Details (long) -->
    <p class="s-details hidden-xs hidden-sm">Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Nulla vitae elit libero, a pharetra augue.</p>

    <!-- CTA button -->
    <a href="" class="btn btn-white btn-outline">Buy now</a>
  </div>
</div>

CTA 3

Thanksgiving food drive

<!-- Background image -->
<div class="cta cta-3" style="background-image: url('//crds-cms-uploads.imgix.net/content/images/crossroads-serve-bg2.jpg')">
  <!-- Lead text -->
  <p class="l-lead s-lead hidden-xs">God says to serve those in need. So we do.</p>

  <!-- Headline -->
  <h2 class="l-headline s-headline">Thanksgiving food drive</h2>

  <!-- Details (long) -->
  <p class="l-details s-details hidden-xs hidden-sm">We believe that helping those in need is a core part of who we are and who God wants us to be. So we do it in a big, big way at Thanksgiving. This year, we've ordered thousands of boxes, expectant that God will show up through your unprecendented generosity.</p>

  <!-- CTA button -->
  <div class="l-action">
    <a href="" class="btn btn-white btn-outline">Sign up to serve</a>
  </div>
</div>

Monetate Examples - Floating in the Text

By default, all CTAs take the full-width of their parent container. This means, depending on where you use these, you may need to wrap the CTAs in an additional div with Bootstrap classes like the following examples.

Add sm-pull-right next to the Bootstrap classes (in our first example, the <div class="col-sm-4 col-md-3">).

CTA 1 - Mini

This CTA example does not include a button with a link so it is wrapped with <a href="">and </a> turning the whole block into a link.

<div class="col-sm-4 col-md-3">
  <a class="cta" href="">
    <!-- Background image -->
    <div class="cta cta-1 l-mini" style="background-image: url('//crds-cms-uploads.imgix.net/content/images/womancamp-photostrip1.jpg')">
      <!-- Foreground image -->
      <div class="l-foreground-image">
        <img alt="" src="//crds-cms-uploads.imgix.net/crds-styleguide/logo-woman-camp.png" />
      </div>

      <!-- Background color -->
      <div class="l-text-wrapper s-text-wrapper" style="background-color:rgba(75,61,63,.85);">
          <!-- Details (short) -->
        <p class="l-details">Oct 6-7 in Neville, OH</p>

        <!-- CTA (link) -->
        <p class="l-action s-action">Get your ticket now!</p>
      </div>
    </div>
  </a>
</div>

CTA 2 - Mini

Buy now
<div class="col-sm-4 col-md-3">
  <!-- Background image -->
  <div class="cta cta-2 l-mini" style="background-image: url('//crds-media.imgix.net/4spnEl42tqE0gMUeswcmUm/69577c2673349a7f3e184e32d2e8a165/crossroads-ikr-podcast-background.jpg')">
    <!-- Foreground image -->
    <div class="l-foreground-image"><img alt="" src="//crds-media.imgix.net/2wQvAhYczyWaIgimcma2yO/06735d3fefb9b877b3246de95235367d/crossroads-podcast-ikr.jpg" /></div>

    <div class="l-text-wrapper s-text-wrapper">
      <!-- Headline -->
      <h3 class="l-headline s-headline hidden-xs">Be a man of strength, courage, and honor</h3>
      <!-- Details (long) -->

      <p class="s-details hidden-xs hidden-sm">Sed posuere consectetur est at lobortis.</p>
      <!-- CTA button --><a class="btn btn-white btn-outline" href="">Buy now</a>
    </div>
  </div>
</div>

CTA 3 - Mini

Thanksgiving food drive

We believe that helping those in need is a core part of who we are and who God wants us to be.

<div class="col-sm-5 col-md-4">
  <!-- Background image -->
  <div class="cta cta-3 l-mini" style="background-image: url('//crds-cms-uploads.imgix.net/content/images/crossroads-serve-bg2.jpg')">
    <!-- Lead text -->
    <p class="l-lead s-lead hidden-xs">God says to serve those in need. So we do.</p>
    <!-- Headline -->

    <h2 class="l-headline s-headline font-size-h4">Thanksgiving food drive</h2>
    <!-- Details (long) -->

    <p class="l-details s-details font-size-small visible-md visible-lg">We believe that helping those in need is a core part of who we are and who God wants us to be.</p>
    <!-- CTA button -->

    <div class="l-action"><a class="btn btn-white btn-outline" href="">Sign up to serve</a></div>
  </div>
</div>