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>
///
///
@mixin cards($gutter: $gutter) {
@include at(md) {
display: flex;
flex-wrap: wrap;
&__card {
@include wrap(1, 2, $gutter);
}
}
@include at(lg) {
&__card {
@include wrap(1, 3, $gutter);
}
}
}
.cards {
@include cards;
}