Link Cards
<div class="link-cards">
<h2 class="component-title">OPTIONAL HEADER</h2>
<ul class="link-cards__list">
<li class="list-cards__list-item">
<div class="link-card">
<div class="image-card__media">
<img src="https://via.placeholder.com/480x270" alt="Lorem Ipsum" class="link-card__img" />
</div>
<h3 class="link-card__title">Title</h3>
<ul class="link-card__list">
<li>
<a href="" class="link-card__link">Optional Link 1</a>
</li>
<li>
<a href="" class="link-card__link">Optional Link 2</a>
</li>
<li>
<a href="" class="link-card__link">Optional Link 3</a>
</li>
</ul>
</div>
</li>
<li class="list-cards__list-item">
<div class="link-card">
<div class="image-card__media">
<img src="https://via.placeholder.com/480x270" alt="Lorem Ipsum" class="link-card__img" />
</div>
<h3 class="link-card__title">Title</h3>
<ul class="link-card__list">
<li>
<a href="" class="link-card__link">Optional Link 1</a>
</li>
<li>
<a href="" class="link-card__link">Optional Link 2</a>
</li>
<li>
<a href="" class="link-card__link">Optional Link 3</a>
</li>
</ul>
</div>
</li>
<li class="list-cards__list-item">
<div class="link-card">
<div class="image-card__media">
<img src="https://via.placeholder.com/480x270" alt="Lorem Ipsum" class="link-card__img" />
</div>
<h3 class="link-card__title">Title</h3>
<ul class="link-card__list">
<li>
<a href="" class="link-card__link">Optional Link 1</a>
</li>
<li>
<a href="" class="link-card__link">Optional Link 2</a>
</li>
<li>
<a href="" class="link-card__link">Optional Link 3</a>
</li>
</ul>
</div>
</li>
<li class="list-cards__list-item">
<div class="link-card">
<div class="image-card__media">
<img src="https://via.placeholder.com/480x270" alt="Lorem Ipsum" class="link-card__img" />
</div>
<h3 class="link-card__title">Title</h3>
<ul class="link-card__list">
<li>
<a href="" class="link-card__link">Optional Link 1</a>
</li>
<li>
<a href="" class="link-card__link">Optional Link 2</a>
</li>
<li>
<a href="" class="link-card__link">Optional Link 3</a>
</li>
</ul>
</div>
</li>
<li class="list-cards__list-item">
<div class="link-card">
<div class="image-card__media">
<img src="https://via.placeholder.com/480x270" alt="Lorem Ipsum" class="link-card__img" />
</div>
<h3 class="link-card__title">Title</h3>
<ul class="link-card__list">
<li>
<a href="" class="link-card__link">Optional Link 1</a>
</li>
<li>
<a href="" class="link-card__link">Optional Link 2</a>
</li>
<li>
<a href="" class="link-card__link">Optional Link 3</a>
</li>
</ul>
</div>
</li>
<li class="list-cards__list-item">
<div class="link-card">
<div class="image-card__media">
<img src="https://via.placeholder.com/480x270" alt="Lorem Ipsum" class="link-card__img" />
</div>
<h3 class="link-card__title">Title</h3>
<ul class="link-card__list">
<li>
<a href="" class="link-card__link">Optional Link 1</a>
</li>
<li>
<a href="" class="link-card__link">Optional Link 2</a>
</li>
<li>
<a href="" class="link-card__link">Optional Link 3</a>
</li>
</ul>
</div>
</li>
<li class="list-cards__list-item">
<div class="link-card">
<div class="image-card__media">
<img src="https://via.placeholder.com/480x270" alt="Lorem Ipsum" class="link-card__img" />
</div>
<h3 class="link-card__title">Title</h3>
<ul class="link-card__list">
<li>
<a href="" class="link-card__link">Optional Link 1</a>
</li>
<li>
<a href="" class="link-card__link">Optional Link 2</a>
</li>
<li>
<a href="" class="link-card__link">Optional Link 3</a>
</li>
</ul>
</div>
</li>
<li class="list-cards__list-item">
<div class="link-card">
<div class="image-card__media">
<img src="https://via.placeholder.com/480x270" alt="Lorem Ipsum" class="link-card__img" />
</div>
<h3 class="link-card__title">Title</h3>
<ul class="link-card__list">
<li>
<a href="" class="link-card__link">Optional Link 1</a>
</li>
<li>
<a href="" class="link-card__link">Optional Link 2</a>
</li>
<li>
<a href="" class="link-card__link">Optional Link 3</a>
</li>
</ul>
</div>
</li>
<li class="list-cards__list-item">
<div class="link-card">
<div class="image-card__media">
<img src="https://via.placeholder.com/480x270" alt="Lorem Ipsum" class="link-card__img" />
</div>
<h3 class="link-card__title">Title</h3>
<ul class="link-card__list">
<li>
<a href="" class="link-card__link">Optional Link 1</a>
</li>
<li>
<a href="" class="link-card__link">Optional Link 2</a>
</li>
<li>
<a href="" class="link-card__link">Optional Link 3</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
.link-cards {
padding: 2.4rem 1.5rem;
margin-bottom: 4rem;
background-color: $color-base-grey;
}
.link-cards__list {
padding-left: 0;
list-style-type: none;
display: grid;
gap: 5rem 3rem;
grid-template-columns: repeat(2, 1fr);
@media (min-width: $breakpoint-tablet) {
grid-template-columns: repeat(4, 1fr);
}
@media (min-width: $breakpoint-desktop) {
grid-template-columns: repeat(6, 1fr);
}
}
.link-card {
display: block;
max-width: 100%;
height: auto;
}
.link-card__img {
display: block;
max-width: 100%;
height: auto;
}
.link-card__title {
@include typeTitle(true);
margin: 0.8rem 0.4rem;
}
.link-card__list {
padding-left: 0;
list-style-type: none;
}
.link-card__link {
@include typeBody(true);
padding: 0.8rem 0;
display: block;
&::after {
font-family: "FontAwesome";
content: "\00a0\f178";
display: inline;
}
}