<commit_before>// Call To Action
//
// The Call To Action module is used to show show a short "call to action" message
// with an accompanying button. CTAs typically span the full width of the page.
//
// Markup:
//   <div class="cta">
//     <div class="wrapper">
//       <p class="cta__message">Miscreant! You should pay homage to our future kitten overlords:</p>
//       <a href="#" class="button">Support Our Kittens</a>
//     </div>
//   </div>
//
// Styleguide Call To Action

.cta {
  @include clearfix;
  @include gutters;
  background: lighten($light-gray, 10%);
  border-bottom: 2px solid $light-gray;
  border-top: 2px solid $light-gray;

  > .wrapper {
    text-align: center;
    padding: $base-spacing 0;

    @include media($tablet) {
      @include span(12);
      @include push(2);
    }
  }
}

.cta__message {
  color: $base-font-color;
  font-size: $font-medium;
  font-weight: $weight-sbold;
  margin: 0 0 $base-spacing;
}<commit_msg>Add actions to CTA pattern.<commit_after>// Call To Action
//
// The Call To Action module is used to show show a short "call to action" message
// with an accompanying button or set of actions. CTAs typically span the full width of the page.
//
// Markup:
//   <div class="cta">
//     <div class="cta__block">
//       <p class="cta__message">Miscreant! You should pay homage to our future kitten overlords:</p>
//     </div>
//     <div class="cta__block">
//       <a href="#" class="button">Support Our Kittens</a>
//     </div>
//   </div>
//   <br/>
//   <div class="cta">
//     <div class="cta__block">
//       <p class="cta__message">Rejoice, and share the good news of our benevolent feline rulers:</p>
//     </div>
//     <ul class="cta__actions">
//       <li><a href="#" class="social-icon -facebook"><span>Facebook</span></a></li>
//       <li><a href="#" class="social-icon -twitter"><span>Twitter</span></a></li>
//       <li><a href="#" class="social-icon -tumblr"><span>Tumblr</span></a></li>
//     </ul>
//   </div>
//
// Styleguide Call To Action

.cta {
  @include clearfix;
  background: lighten($light-gray, 10%);
  border-bottom: 2px solid $light-gray;
  border-top: 2px solid $light-gray;

  // @DEPRECATED: Prefer new `cta__block` container over `wrapper`.
  > .wrapper, .cta__block {
    text-align: center;
    margin: $base-spacing 0;

    @include media($tablet) {
      @include span(12);
      @include push(2);
      float: none;
    }
  }

  // @NOTE: Hack to keep old `.wrapper` behavior. Will be removed in Forge 7.0
  > .wrapper .cta__message {
    margin-bottom: $base-spacing;
  }
}

.cta__message {
  color: $base-font-color;
  font-size: $font-medium;
  font-weight: $weight-sbold;
}

.cta__actions {
  width: 100%;
  display: table;

  li {
    display: table-cell;
    text-align: center;

    a {
      display: block;
      width: 100%;
      color: $med-gray;
      padding: $base-spacing 0;
    }

    a:hover {
      background: $blue;
      color: #fff;
    }

    .social-icon:after {
      font-size: 32px;
    }
  }

}
{'fraction_non_alphanumeric': 0.16826129990102276, 'fraction_numerical': 0.009567799406136588, 'mean_word_length': 2.5839243498817965, 'pattern_counts': {'":': 0, '<': 48, '<?xml version=': 0, '>': 51, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 1, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1967850', 'n_tokens_mistral': 1103, 'n_tokens_neox': 1051, 'n_words': 292}