CTA block

Call to action with messaging and buttons. The window size determines the layout. This would be a great use case for container queries. {{isWide}}

.c-cta-block

  <!-- Minimal event block -->
  <div class="c-cta-block">
    <div class="c-cta-block__msg t-size-s">
      <h3 aria-hidden="true" class="has-xxxs-btm-marg t-serif t-links-underlined-hover t-size-m">
        <a href="#" tabindex="-1">The Texas Tribune Festival</a>
      </h3>
      <p class="t-uppercase t-lsp-b t-size-xs">
        <strong>Held in Austin | 7 p.m. - 10 p.m.</strong>
      </p>
      <p class="is-sr-only">Sept. 26</p>
    </div>
    <div class="c-cta-block__btns c-cta-block__btns--2 t-align-center l-align-end-self">
      <a class="c-button c-button--standard has-bg-blue has-text-black l-align-center-children t-size-xs" href="#">
        Attend
      </a>
      <a class="c-button c-button--standard has-bg-gray-dark has-text-white l-align-center-children t-size-xs" href="#">
        Watch
      </a>
    </div>
  </div>
.c-cta-block--horiz-from-bp-m
Container becomes two columns on wide screens. Fits a wider space.

  <!-- Social Follow CTA -->
  <div class="c-cta-block c-cta-block--horiz-from-bp-m is-rounded-b has-border has-xl-padding has-giant-btm-marg">
    <div class="c-cta-block__msg t-size-s">
      <h4 class="t-uppercase t-lsp-m t-lh-b has-text-teal has-xxs-btm-marg">Stay in the loop</h4>
      <p class="has-xxs-btm-marg t-size-m"><strong>The next time news breaks, hear about it first.</strong></p>
      <p class="has-text-gray t-links-underlined">Follow The Texas Tribune on <a href="#">Facebook</a> and <a href="#">Twitter</a>.</p>
    </div>
    <div class="c-cta-block__btns c-cta-block__btns--2 c-cta-block__btns--1-from-bp-m t-align-center">
      <a class="c-button has-bg-facebook l-align-center-children has-reset-padding" href="#" aria-label="Share on Facebook">
        <span class="c-button__inner t-size-xxs">Facebook</span>
      </a>
      <a class="c-button has-bg-twitter l-align-center-children has-reset-padding" href="#" aria-label="Share on Twitter">
        <span class="c-button__inner t-size-xxs">Twitter</span>
      </a>
    </div>
  </div>

  <!-- Membership CTA -->
  <div class="c-cta-block c-cta-block--horiz-from-bp-m is-rounded-b has-border has-xl-padding has-giant-btm-marg">
    <div class="c-cta-block__msg t-size-s">
      <h4 class="t-uppercase t-lsp-m t-lh-b has-text-teal has-xxs-btm-marg"><strong>Join our nonprofit newsroom</strong></h4>
      <p class="has-xxs-btm-marg t-size-m"><strong>Support our voting rights coverage by becoming a Texas Tribune member today.</strong></p>
      <p class="has-text-gray t-links-underlined">Choose an amount to give or <a href="#" class="l-display-ib">learn more about membership</a>.</p>
    </div>
    <div class="c-cta-block__btns c-cta-block__btns--4 c-cta-block__btns--2-from-bp-m t-align-center t-size-s">
      <a class="c-button is-rounded-l has-bg-yellow has-text-black l-align-center-children has-reset-padding" href="#">
        <span class="c-button__inner has-text-black">$35</span>
      </a>
      <a class="c-button is-rounded-l has-bg-yellow has-text-black l-align-center-children has-reset-padding" href="#">
        <span class="c-button__inner has-text-black">$75</span>
      </a>
      <a class="c-button is-rounded-l has-bg-yellow has-text-black l-align-center-children has-reset-padding" href="#">
        <span class="c-button__inner has-text-black">$150</span>
      </a>
      <a class="c-button c-button--outline is-rounded-l has-bg-white has-text-yellow l-align-center-children has-reset-padding" href="#" aria-label="Share on Facebook">
        <span class="c-button__inner has-text-black t-titlecase">Other</span>
      </a>
    </div>
  </div>

  <!-- Overlay event CTA -->
  <div class="c-cta-block c-cta-block--horiz-from-bp-m">
    <div class="c-cta-block__msg t-size-s">
      <h3 aria-hidden="true" class="has-xxxs-btm-marg t-serif t-links-underlined-hover t-size-l">
        <a href="#" tabindex="-1">The Texas Tribune Festival</a>
      </h3>
      <p class="t-uppercase t-lsp-b t-size-xs">
        <strong>Held in Austin | 7 p.m. - 10 p.m.</strong>
      </p>
      <p class="is-sr-only">Sept. 26</p>
    </div>
    <div class="c-cta-block__btns c-cta-block__btns--2 c-cta-block__btns--1-from-bp-m t-align-center">
      <a class="c-button c-button--standard has-bg-blue has-text-black l-align-center-children t-size-xs" href="#">
        Attend
      </a>
      <a class="c-button c-button--standard has-bg-gray-dark has-text-white l-align-center-children t-size-xs" href="#">
        Watch
      </a>
    </div>
  </div>