No notes defined.
<div class=" cards">
<div class="cards__card card">
<div class="card__container">
<div class="card__background" style="opacity: .3; background-image: url(https://placeimg.com/640/320/tech/grayscale)"></div>
<div class="card__tag -overlay">White Paper</div>
<div class="card__icon">
<svg xmlns="http://www.w3.org/2000/svg" height="64" width="64" viewBox="0 0 6 6" stroke-width=".25" stroke="currentColor" fill="none">
<rect x="1" y="1" width="4" height="4" rx="1" />
</svg>
</div>
<h4 class="card__heading">One Great Heading</h4>
<p class="card__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos et voluptatum aliquam neque beatae. Elit vero est ipsa deleniti?</p>
<div class="card__actions">
<a href="" class="card__action button -primary">Learn More</a>
</div>
</div>
</div>
<div class="cards__card card">
<div class="card__container">
<div class="card__background" style="opacity: .3; background-image: url(https://placeimg.com/640/320/tech/grayscale)"></div>
<div class="card__icon">
<svg xmlns="http://www.w3.org/2000/svg" height="64" width="64" viewBox="0 0 6 6" stroke-width=".25" stroke="currentColor" fill="none">
<rect x="1" y="1" width="4" height="4" rx="1" />
</svg>
</div>
<h4 class="card__heading">One Great Heading</h4>
<p class="card__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos et voluptatum aliquam neque beatae.</p>
<div class="card__actions">
<a href="" class="card__action button -secondary -ghost">Learn More</a>
<a href="" class="card__action button -primary">Register</a>
</div>
</div>
</div>
<div class="cards__card card">
<div class="card__container">
<div class="card__icon">
<svg xmlns="http://www.w3.org/2000/svg" height="64" width="64" viewBox="0 0 6 6" stroke-width=".25" stroke="currentColor" fill="none">
<rect x="1" y="1" width="4" height="4" rx="1" />
</svg>
</div>
<h4 class="card__heading">One Great Heading</h4>
<p class="card__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos et voluptatum aliquam neque beatae.</p>
<div class="card__actions -attached">
<a href="" class="card__action button -primary">Learn More</a>
</div>
</div>
</div>
<div class="cards__card card">
<div class="card__container">
<div class="card__icon">
<svg xmlns="http://www.w3.org/2000/svg" height="64" width="64" viewBox="0 0 6 6" stroke-width=".25" stroke="currentColor" fill="none">
<rect x="1" y="1" width="4" height="4" rx="1" />
</svg>
</div>
<h4 class="card__heading">One Great Heading</h4>
<p class="card__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos et voluptatum aliquam neque beatae.</p>
<div class="card__actions -attached">
<a href="" class="card__action button -secondary">Learn More</a>
<a href="" class="card__action button -primary">Register</a>
</div>
</div>
</div>
<div class="cards__card card">
<div class="card__container">
<div class="card__background" style="opacity: .3; background-image: url(https://placeimg.com/640/320/tech/grayscale)"></div>
<div class="card__tag -overlay">White Paper</div>
<div class="card__icon">
<svg xmlns="http://www.w3.org/2000/svg" height="64" width="64" viewBox="0 0 6 6" stroke-width=".25" stroke="currentColor" fill="none">
<rect x="1" y="1" width="4" height="4" rx="1" />
</svg>
</div>
<h4 class="card__heading">One Great Heading</h4>
<p class="card__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos et voluptatum aliquam neque beatae. Elit vero est ipsa deleniti?</p>
<div class="card__actions">
<a href="" class="card__action button -primary">Learn More</a>
</div>
</div>
</div>
</div>
@use "/resources/styles/common" as *;
@use "/resources/styles/config";
.cards {
$b: &;
display: grid;
gap: config.$padding;
@include at(md) {
grid-template-columns: 1fr 1fr;
}
@include at(lg) {
grid-template-columns: 1fr 1fr 1fr;
}
}