No notes defined.
<!-- Default -->
<div class=" 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>
<!-- Actions Attached -->
<div class=" 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>
<!-- Two Actions -->
<div class=" 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>
<!-- Two Actions Attached -->
<div class=" 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>
<!-- Wide -->
<div class=" card -clickable -wide" @click="click($event, $refs.link)">
<div class="card__container">
<div class="card__background">
<picture class="">
<source type="image/webp" data-srcset="https://picsum.photos/640/640.webp 640w, https://picsum.photos/1024/1024.webp 1024w, https://picsum.photos/1440/1440.webp 1440w, https://picsum.photos/1920/1920.webp 1920w" data-sizes="auto" />
<img src="data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="1920" width="1920"></svg>" alt="Placeholder Image" class="lazyload card__backgroundImg" data-srcset="https://picsum.photos/640/640 640w, https://picsum.photos/1024/1024 1024w, https://picsum.photos/1440/1440 1440w, https://picsum.photos/1920/1920 1920w" data-sizes="auto" />
</picture>
</div>
<h3 class="card__heading">One Great Heading</h3>
<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 ref="link" href="#foo" class="card__action button -primary">Learn More</a>
</div>
</div>
</div>
@use "/resources/styles/config";
@use "/resources/styles/common" as *;
///
/// Simple card.
///
@mixin card() {
$b: &;
background-color: config.$white;
box-shadow: config.$med-shadow;
margin-bottom: config.$v-space;
z-index: 1;
&__container {
display: grid;
grid-gap: 1rem;
grid-template: "icon" "heading" "content" 1fr "actions" / auto;
height: 100%;
}
&__icon,
&__heading,
&__content,
&__actions {
justify-self: center; // For IE11 (instead of justify-items)
padding-left: config.$h-space;
padding-right: config.$h-space;
position: relative;
}
&__tag {
align-self: start;
color: config.$meta-text;
font-size: .875rem;
font-weight: bold;
grid-area: icon;
justify-self: start;
padding: config.$thin-padding;
text-transform: uppercase;
&.-overlay {
color: config.$black;
}
}
&__icon {
grid-area: icon;
padding-top: config.$v-space;
text-align: center; // For IE11
}
&__heading {
grid-area: heading;
}
&__content {
grid-area: content;
width: 100%;
}
&__background {
background: config.$gray-100 center/cover;
grid-column: 1;
grid-row: icon / heading;
height: 100%;
justify-self: stretch;
}
&__actions {
grid-area: actions;
display: flex;
flex-wrap: wrap;
justify-content: center;
justify-self: stretch;
margin-top: auto;
padding-bottom: config.$v-space;
&.-attached {
justify-content: stretch;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
.card__action {
flex-grow: 1;
}
}
}
&__action {
flex-basis: max(9rem, 50%);
}
&.-clickable {
cursor: pointer;
}
&.-wide {
#{$b}__container {
grid-gap: 1rem 0;
grid-template: "background heading" "background content" 1fr "background actions" / 1fr 1fr;
}
#{$b}__background {
grid-area: background;
}
#{$b}__backgroundImg {
height: 100%;
object-fit: cover;
}
#{$b}__heading {
padding-top: config.$v-space;
}
}
}
.card {
@include card;
}