<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. */
.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;
}
}
}
Showcasing the new base cards in a two column layout with longer text.