<div class="cards-section">
    <section class="grid grid--two-columns">
        <div class="grid__all">
            <h2 class="cards-section__heading">Join us</h2>
            <h2 class="cards-section__tagline">We help organisations openly publish grants data, and help people use it to improve charitable giving. Join the <a href="#">#opengrants</a> movement.</h2>
        </div>

        <div class="grid__1">
            <div class="base-card base-card--new">
                <div class="base-card__content">
                    <h2 class="base-card__title">Want to find out about COVID-19 grants?</h2>
                    <p class="base-card__text">
                        <a href="#" class="button">Visit our COVID-19 grants tracker</a>
                    </p>
                </div>
            </div>
        </div>
        <div class="grid__1">
            <div class="base-card base-card--new">
                <div class="base-card__content">
                    <h2 class="base-card__title">Want to find out about COVID-19 grants?</h2>
                    <p class="base-card__text">
                        <a href="#" class="button">Search</a>
                    </p>
                </div>
            </div>
        </div>
        <div class="grid__all align-center">
            <a href="#" class="button button--teal">Explore the data</a>
        </div>
    </section>
</div>
<div class="cards-section">
  <section class="grid grid--two-columns">
    <div class="grid__all">
      <h2 class="cards-section__heading">Join us</h2>
      <h2 class="cards-section__tagline">We help organisations openly publish grants data, and help people use it to improve charitable giving. Join the <a href="#">#opengrants</a> movement.</h2>
    </div>

    <div class="grid__1">
      <div class="base-card base-card--new">
        <div class="base-card__content">
          <h2 class="base-card__title">Want to find out about COVID-19 grants?</h2>
          <p class="base-card__text">
            <a href="#" class="button">Visit our COVID-19 grants tracker</a>
          </p>
        </div>
      </div>
    </div>
    <div class="grid__1">
      <div class="base-card base-card--new">
        <div class="base-card__content">
          <h2 class="base-card__title">Want to find out about COVID-19 grants?</h2>
          <p class="base-card__text">
            <a href="#" class="button">Search</a>
          </p>
        </div>
      </div>
    </div>
    <div class="grid__all align-center">
      <a href="#" class="button button--teal">Explore the data</a>
    </div>
  </section>
</div>
/* No context defined. */
  • Content:
    .cards-section {
      padding: 32px 0;
      
      &__heading,
      &__tagline {
        text-align: center;
        font-size: 2rem;
      }    
    
      &__tagline {
        font-weight: 200;
    
        > a { 
          color: hsla(var(--orange-dark-hsl), 1); 
          font-weight: 200;
        }
      }
    }
  • URL: /components/raw/cards-section/cards-section.scss
  • Filesystem Path: src/components/05-templates/cards-section/cards-section.scss
  • Size: 253 Bytes

Showcasing the new base cards in a two column layout with longer text.