<div class="card-set">
<h2 class="card-set__title">Featured Events</h2>
<ul>
<li>
<div class="iastate22-card">
<div class="iastate22-card__media">
<img src="../../img/Component-Card-Image-1.jpg" alt="" loading="lazy" width="600" height="600">
</div>
<div class="iastate22-card__content">
<h2 class="iastate22-card__title">
<a href="https://www.iastate.edu/">Card Title Lorem Ipsum Dolor Sit Amet </a>
</h2>
<div class="iastate22-card__body text-content">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>
<a href="https://www.iastate.edu/" class="iastate22-card__cta">Optional Link Text Lorem</a>
</div>
</div>
</li>
<li>
<div class="iastate22-card">
<div class="iastate22-card__media">
<img src="../../img/Component-Card-Image-2.jpg" alt="" loading="lazy" width="600" height="600">
</div>
<div class="iastate22-card__content">
<h2 class="iastate22-card__title">
<a href="https://www.iastate.edu/" target="_blank">External Example - Card Title Lorem Ipsum</a>
</h2>
<div class="iastate22-card__body text-content">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>
<a href="https://www.iastate.edu/" class="iastate22-card__cta" target="_blank">Optional Link Text Lorem</a>
</div>
</div>
</li>
<li>
<div class="iastate22-card">
<div class="iastate22-card__media">
<img src="../../img/Component-Card-Image-3.jpg" alt="" loading="lazy" width="600" height="600">
</div>
<div class="iastate22-card__content">
<h2 class="iastate22-card__title">
<a href="https://www.iastate.edu/">Card Title Lorem Ipsum Dolor Sit Amet </a>
</h2>
<div class="iastate22-card__body text-content">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>
<a href="https://www.iastate.edu/" class="iastate22-card__cta">Optional Link Text Lorem</a>
</div>
</div>
</li>
</ul>
</div>
<div class="card-set{% if teaser_news %} card-set--teaser{% elseif teaser_profile %} card-set--teaser {% elseif teaser_profile %} card-set--teaser{% endif %}">
<h2 class="card-set__title">Featured Events</h2>
<ul>
{% for card in cards %}
{% if with_modal %}
<li>{% include "@card--with-modal" with card %}</li>
{% elseif teaser_news %}
<li>{% include "@card--teaser-news" with card %}</li>
{% elseif teaser_profile %}
<li>{% include "@card--teaser-profile" with card %}</li>
{% elseif recent_articles %}
<li>{% include "@card--recent-article" with card %}</li>
{% elseif news_articles %}
<li>{% include "@card--news-article" with card %}</li>
{% elseif teaser_event %}
<li>{% include "@card--event" with card %}</li>
{% else %}
<li>{% include "@card" with card %}</li>
{% endif %}
{% endfor %}
</ul>
</div>
{
"cards": [
{
"title": "Card Title Lorem Ipsum Dolor Sit Amet ",
"body": "<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>",
"image": "../../img/Component-Card-Image-1.jpg",
"url": "https://www.iastate.edu/",
"external": false,
"cta": {
"url": "https://www.iastate.edu/",
"text": "Optional Link Text Lorem"
}
},
{
"title": "External Example - Card Title Lorem Ipsum",
"body": "<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>",
"image": "../../img/Component-Card-Image-2.jpg",
"url": "https://www.iastate.edu/",
"external": true,
"cta": {
"url": "https://www.iastate.edu/",
"text": "Optional Link Text Lorem"
}
},
{
"title": "Card Title Lorem Ipsum Dolor Sit Amet ",
"body": "<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>",
"image": "../../img/Component-Card-Image-3.jpg",
"url": "https://www.iastate.edu/",
"external": false,
"cta": {
"url": "https://www.iastate.edu/",
"text": "Optional Link Text Lorem"
}
}
]
}
.paragraph-widget--card-set {
@extend %extended-component-width;
@include media-breakpoint-up(xl) {
margin-left: rem(-20);
margin-right: rem(-128);
margin-bottom: rem(60);
}
}
.card-set {
position: relative;
padding-bottom: rem(20);
@include media-breakpoint-up(lg) {
padding-bottom: rem(30);
}
&.card-set--teaser {
ul {
@include media-breakpoint-up(md) {
margin-right: 0;
}
li {
max-width: 100%;
margin-bottom: rem(100);
position: relative;
@include media-breakpoint-up(md) {
width: 100%;
padding-right: 0;
}
&:last-child {
&:after {
display: none;
}
}
&:after {
content: "";
border-bottom: rem(1) solid $light-grey;
position: absolute;
bottom: rem(-30);
left: 0;
right: 0;
z-index: 1;
opacity: 0;
@include media-breakpoint-up(sm) {
opacity: 1;
}
@include media-breakpoint-up(md) {
bottom: rem(-46);
}
@include media-breakpoint-up(xl) {
left: rem(-108);
right: rem(-108);
}
}
}
}
&:after {
display: none;
}
}
.recent-articles & {
ul {
display: block;
gap: rem(20);
@include media-breakpoint-up(lg) {
display: flex;
}
li {
width: 100%;
margin-bottom: rem(25);
@include media-breakpoint-up(lg) {
padding: 0;
width: 31%;
margin: 0;
}
}
}
}
&:after {
content: "";
background-color: $off-white;
position: absolute;
bottom: 0;
left: rem(-36);
right: rem(-36);
height: 20%;
max-height: rem(342);
@include media-breakpoint-up(md) {
left: rem(-70);
right: rem(-70);
}
@include media-breakpoint-up(lg) {
content: "";
background-color: $off-white;
max-height: rem(365);
position: absolute;
bottom: 0;
left: rem(-70);
right: rem(-70);
height: 62%;
}
@include media-breakpoint-up(xl) {
left: rem(-170);
right: rem(-170);
max-height: rem(340);
}
@include media-breakpoint-up(xxl) {
left: -50vw;
width: 150vw;
left: 50%;
transform: translateX(-50%);
pointer-events: none;
}
}
> ul {
display: flex;
flex-wrap: wrap;
@include media-breakpoint-up(md) {
margin-right: rem(-20);
}
@include media-breakpoint-up(lg) {
margin-right: rem(-40);
}
&:after {
display: none;
@include media-breakpoint-up(md) {
content: "";
flex: 0 1 auto;
width: 50%;
display: block;
}
@include media-breakpoint-up(lg) {
display: none;
}
}
> li {
max-width: rem(400);
margin: 0 auto rem(30);
flex: 0 1 auto;
width: 100%;
@include media-breakpoint-up(md) {
width: 50%;
padding-right: rem(20);
}
@include media-breakpoint-up(lg) {
max-width: none;
width: 33.3%;
padding-right: rem(40);
}
}
}
}
.card-set__title {
text-align: center;
}
This is a custom component (the class has been prefaced with .iastate22-[classname]).
card component which outputs multiple instances of the cards, this should typically be used for output globallycard component default, but can output other card variants as well - card--with-modal variant by setting with_modal to true in the config, card--teaser-news by setting teaser_news to true in the config, or card--teaser-profile by setting teaser_profile to true in the configindex.scss file as @import "../components/card-set/card-set";<div class="paragraph-widget paragraph-widget--card-set">