Series promo

View in Github

This is a one-off feature used on the series page for "In Harvey's Wake". We could potentially repeat this pattern in the future, but may want to consider custom-properies for new color schemes.

.c-series-promo

<ul>
  <li class="has-xl-btm-marg">
    <section class="c-series-promo c-series-promo--harvey-1 has-padding has-bg-blue-dark t-serif t-weight-bold">
      <div class="c-series-promo__bg is-hidden-until-bp-s" style="background-image: url('/queso-ui/img/series-promo/c-series-promo-bg-1.jpg')"></div>
      <div class="c-series-promo__inner">
        <h2 class="c-series-promo__title has-b-btm-marg">Support our ongoing Harvey coverage.</h2>
        <a class="c-series-promo__button c-series-promo__button--alt c-button c-button--xs" href="https://support.texastribune.org/index.html?campaignId=70146000000pdv2&utm_campaign=trib-marketing&utm_source=harvey-right-rail&utm_medium=website&utm_content=harvey-member-appeal&_ga=2.129577868.1831072013.1577974569-1551411426.1573856195"><span class="t-size-s">Donate Now</span></a>
      </div>
    </section>
  </li>
  <li class="has-xl-btm-marg">
    <section class="c-series-promo c-series-promo--harvey-2 has-padding has-bg-blue-dark t-serif t-weight-bold">
      <div class="c-series-promo__bg is-hidden-until-bp-s" style="background-image: url('/queso-ui/img/series-promo/c-series-promo-bg-2.jpg')"></div>
      <div class="c-series-promo__inner l-align-end-self">
        <h2 class="is-sr-only">Tell us your Harvey story.</h2>
        <ul class="c-series-promo__list c-list t-align-left has-padding">
          <li>Were you affected by Hurricane Harvey?</li>
          <li>Are you involved in recovery efforts?</li>
          <li>
            <a class="c-series-promo__button c-button c-button--xs" href="https://www.texastribune.org/2017/09/19/how-were-covering-aftermath-hurricane-harvey/#share"><span class="t-size-s">Tell us your story</span></a>
          </li>
        </ul>
      </div>
    </section>
  </li>
</ul>