<div class="iastate22-card iastate22-card--with-modal" data-clickable="true">
<div class="iastate22-card__media">
<img src="../../img/HP_Finding_Solutions_Story_1_FPO.jpg" alt="" loading="lazy" width="600" height="600">
</div>
<div class="iastate22-card__content">
<h2 class="iastate22-card__title">Modal Title</h2>
<div class="iastate22-card__body">
<p>Modal Title Lorem Ipsum Dolor Sit Amet</p>
</div>
<button class="iastate22-card__cta" data-micromodal-trigger="modal-1">Read More</button>
<div class="iastate22-modal iastate22-card--with-modal" id="modal-1" aria-hidden="false">
<div class="iastate22-modal__overlay" tabindex="-1" data-micromodal-close>
<div class="iastate22-modal__container iastate22-modal__container-with-media" id="modal-1-content" role="dialog" aria-modal="true" aria-labelledby="modal-1-title">
<button class="iastate22-modal__close" aria-label="Close modal" data-micromodal-close><i class="fa-light fa-xmark" aria-hidden="true"></i></button>
<div class="iastate22-modal__media">
<img src="../../img/Component-Modal-Square-Image_FPO.jpg" alt="" loading="lazy" width="600" height="600">
</div>
<div class="iastate22-modal__content">
<h2 class="iastate22-modal__title" id="modal-1-title">Modal Title Lorem Ipsum Dolor Sit Amet</h2>
<div class="iastate22-modal__body-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="link-set">
<ul>
<li>
<a href="https://iastate.edu" class="link-set__link link-tertiary">Link Example<span class="arrow"></span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="iastate22-card iastate22-card--with-modal"{% if clickable is defined %} data-clickable="{{ clickable }}"{% endif %}>
{% if image %}
<div class="iastate22-card__media">
<img src="{{ image|path }}" alt="" loading="lazy" width="600" height="600" >
</div>
{% endif %}
<div class="iastate22-card__content">
{% if title %}<h2 class="iastate22-card__title">{{ title }}</h2>{% endif %}
<div class="iastate22-card__body">
{{ body|raw }}
</div>
<button class="iastate22-card__cta" data-micromodal-trigger="{{ modal.id }}">{{ cta_text }}</button>
<div class="iastate22-modal iastate22-card--with-modal" id="{{ modal.id }}" aria-hidden="false">
<div class="iastate22-modal__overlay" tabindex="-1" data-micromodal-close>
<div class="iastate22-modal__container{% if modal.image %} iastate22-modal__container-with-media{% endif %}" id="{{ modal.id }}-content" role="dialog" aria-modal="true" aria-labelledby="{{ modal.id }}-title">
<button class="iastate22-modal__close" aria-label="Close modal" data-micromodal-close><i class="fa-light fa-xmark" aria-hidden="true"></i></button>
{% if modal.image %}
<div class="iastate22-modal__media">
<img src="{{ modal.image|path }}" alt="" loading="lazy" width="600" height="600" >
</div>
{% endif %}
<div class="iastate22-modal__content">
{% if modal.title %}<h2 class="iastate22-modal__title" id="{{ modal.id }}-title">{{ modal.title }}</h2>{% endif %}
<div class="iastate22-modal__body-content">{{ modal.content|raw }}</div>
{% if modal.link_set %}{% include "@link-set" with modal.link_set %}{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
{
"title": "Modal Title",
"body": "<p>Modal Title Lorem Ipsum Dolor Sit Amet</p>",
"image": "../../img/HP_Finding_Solutions_Story_1_FPO.jpg",
"url": "https://www.iastate.edu/",
"external": true,
"cta": {
"url": "https://www.iastate.edu/",
"text": "Learn More"
},
"clickable": true,
"cta_text": "Read More",
"modal": {
"id": "modal-1",
"image": "../../img/Component-Modal-Square-Image_FPO.jpg",
"title": "Modal Title Lorem Ipsum Dolor Sit Amet",
"content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>",
"link_set": {
"links": [
{
"url": "https://iastate.edu",
"text": "Link Example",
"variant": "link-tertiary"
}
]
}
}
}
.iastate22-card {
box-shadow: rem(9) rem(9) rem(20) rgba($black, 0.2);
background: $white;
text-align: center;
position: relative;
z-index: 1;
height: 100%;
&.iastate22-card--linked-image {
box-shadow: none;
text-align: left;
}
&.iastate22-card--profile-with-modal {
cursor: grab;
height: 100%;
@include media-breakpoint-up(lg) {
cursor: auto;
}
}
&.iastate22-card--teaser {
@include media-breakpoint-up(sm) {
box-shadow: none;
display: flex;
align-items: center;
flex-wrap: wrap;
}
}
&.iastate22-card--news-article {
gap: rem(35);
display: flex;
box-shadow: none;
}
&.clickable {
cursor: pointer;
&:hover,
&:focus-within {
&:before {
opacity: 1;
}
.iastate22-card__media {
img {
transform: scale(1.1);
}
}
.icon-video {
svg {
transition: opacity 0.2s ease-out;
}
.icon-video--inactive {
opacity: 0;
}
.icon-video--active {
opacity: 1;
}
}
}
&.iastate22-card--linked-image {
&:hover,
&:focus-within {
.arrow {
width: rem(12);
}
}
}
&.iastate22-card--teaser {
&:hover {
.iastate22-card__cta {
color: $iastate-red;
}
}
}
}
&:before {
content: "";
background-color: transparent;
position: absolute;
border: rem(8) solid $iastate-gold;
top: rem(-8);
left: rem(-8);
right: rem(-8);
bottom: rem(-8);
z-index: 0;
opacity: 0;
transition: 0.2s opacity ease-in-out;
}
p {
a {
color: $iastate-maroon;
}
}
&.iastate22-card--event {
padding-bottom: 40px;
.iastate22-card__title {
text-align: left;
}
}
&.iastate22-card--feature-event {
.iastate22-card__time {
text-align: center;
}
.iastate22-card__body {
margin-bottom: 0;
}
}
}
.iastate22-card__cta {
font-family: $typeface-sans-serif;
color: $iastate-maroon;
font-weight: 700;
font-size: rem(18);
line-height: (28 / 18);
transition: 0.2s color ease-in-out;
margin-top: rem(5);
display: inline-block;
background: transparent;
border: none;
cursor: pointer;
&:has(.icon-video) {
display: inline-flex;
}
&:hover,
&:focus-visible {
color: $iastate-red;
}
.iastate22-card--linked-image & {
position: absolute;
background-color: $iastate-red;
padding: rem(31) rem(52) rem(31) rem(26);
bottom: 0;
left: 0;
z-index: 1;
color: $white;
text-decoration: none;
min-width: rem(249);
text-align: left;
border: none;
.arrow {
inset: auto;
transform: translate(#{rem(13)}, #{rem(13)});
width: 0;
background-color: $iastate-gold;
&:after,
&:before {
background-color: $iastate-gold;
}
}
.icon-video {
position: relative;
svg,
svg path {
fill: $iastate-gold;
}
}
}
.icon-video {
padding-left: rem(40);
position: relative;
svg,
svg path {
fill: $iastate-maroon;
}
svg {
position: absolute;
left: rem(10);
top: rem(4);
transition: opacity 0.3s ease-out;
&.icon-video--inactive {
opacity: 1;
}
&.icon-video--active {
opacity: 0;
}
}
}
.iastate22-card--profile-with-modal &,
.iastate22-card--with-modal & {
color: $iastate-red;
margin-top: rem(50);
margin-bottom: rem(5);
font-size: rem(16);
line-height: (26 / 16);
text-decoration: underline;
text-underline-offset: rem(1);
margin: auto 0 rem(5);
border: none;
background-color: transparent;
@include media-breakpoint-up(md) {
bottom: rem(30);
}
cursor: pointer;
&:hover {
color: $iastate-maroon;
}
}
.iastate22-card--teaser & {
text-align: left;
display: block;
font-size: rem(21);
line-height: (30 / 21);
}
}
.iastate22-card__content {
margin: 0;
padding: rem(22) rem(41);
position: relative;
z-index: 2;
background-color: $white;
.iastate22-card--profile-with-modal & {
padding: rem(12) rem(22);
min-height: rem(210);
display: flex;
flex-direction: column;
@include media-breakpoint-up(md) {
padding: rem(23);
min-height: rem(239);
}
}
.iastate22-card--teaser & {
@include media-breakpoint-up(sm) {
flex: 0 1 auto;
width: 50%;
}
@include media-breakpoint-up(md) {
width: 66.6%;
padding: rem(23);
}
}
.iastate22-card--recent-article &,
.iastate22-card--news-article & {
text-align: left;
.iastate22-card__content-tags {
.iastate22-card__content-tags__list {
margin: 0;
display: block;
.iastate22-card__content-tags__list-item {
color: $iastate-red;
font-size: rem(16);
font-weight: 600;
display: inline;
padding-right: rem(15);
line-height: rem(20);
}
}
}
.iastate22-card__title {
margin: 0;
padding: 0;
line-height: rem(18);
.iastate22-link-secondary {
font-size: rem(22);
color: $iastate-maroon;
text-decoration: underline;
line-height: rem(26);
margin-top: 0;
}
}
}
.iastate22-card--recent-article & {
padding: rem(15) rem(25);
}
.iastate22-card--news-article & {
border-left: solid rem(2) #f1be48;
}
.iastate22-card__date,
.iastate22-card__content-date {
font-style: italic;
margin: 0;
color: $grey;
}
.iastate22-card--news-article & {
text-align: left;
}
}
.recent-articles {
.card-set {
margin: rem(50) 0;
&:after {
background-color: $white;
}
}
}
.iastate22-card__media {
overflow: hidden;
z-index: 1;
@extend %responsive-img;
&:before {
padding-top: 100%;
}
.iastate22-card--linked-image & {
&:before {
padding-top: 100%;
}
}
.iastate22-card--profile-with-modal & {
&:before {
padding-top: 94.67%;
}
}
.iastate22-card--teaser &,
.iastate22-card--news-article & {
@include media-breakpoint-up(sm) {
flex: 0 1 auto;
width: 50%;
}
@include media-breakpoint-up(md) {
width: 33.3%;
}
&:before {
padding-top: 66.45%;
}
}
.iastate22-card--recent-article & {
&:before {
padding-top: 75%;
}
}
.iastate22-card--teaser-profile & {
@include media-breakpoint-up(md) {
max-width: rem(196);
}
&:before {
padding-top: 100%;
}
}
img {
transition: 0.2s transform ease-in-out;
}
}
.iastate22-card__title {
margin: 0;
padding: 0;
font-family: $typeface-sans-serif;
font-weight: 700;
color: $iastate-red;
font-size: rem(21);
line-height: (30 / 21);
.iastate22-card--profile-with-modal & {
color: $iastate-maroon;
font-size: rem(18);
line-height: (23 / 18);
margin-bottom: rem(13);
@include media-breakpoint-up(md) {
font-size: rem(21);
line-height: (29 / 21);
margin-bottom: rem(23);
}
}
a {
color: currentColor;
text-decoration: none;
}
}
.iastate22-card__body {
margin-top: rem(5);
}
// These styles only on profile-with-modal variant
.iastate22-card__name {
.iastate22-card--profile-with-modal & {
color: $iastate-maroon;
font-family: $typeface-sans-serif;
font-weight: 700;
font-size: rem(16);
line-height: (20 / 16);
}
}
.iastate22-card__role {
.iastate22-card--profile-with-modal & {
color: $iastate-maroon;
font-size: rem(16);
line-height: (20 / 16);
padding-bottom: rem(30);
}
}
// modal popup window styles for iastate22-card--profile-with-modal variant
.iastate22-card--profile-with-modal {
.iastate22-modal__container {
padding: rem(37);
width: 90%;
}
.iastate22-modal__media-name-wrap {
display: flex;
align-items: center;
margin-left: rem(-37);
margin-right: rem(-37);
@include media-breakpoint-up(md) {
flex-direction: column;
flex: 0 1 auto;
width: 36%;
margin: 0;
}
}
.iastate22-modal__media,
.iastate22-modal__name-role-wrap {
flex: 1 1 0;
}
.iastate22-modal__media {
padding-right: rem(10);
@include media-breakpoint-up(md) {
flex: 0 1 auto;
width: 100%;
padding: 0;
}
}
.iastate22-modal__name-role-wrap {
padding-left: rem(10);
@include media-breakpoint-up(md) {
margin-top: rem(15);
padding: 0;
text-align: center;
}
}
.iastate22-card__name {
margin-bottom: rem(6);
}
.iastate22-card__role {
padding: 0;
}
.iastate22-modal__content {
@include media-breakpoint-up(md) {
padding-top: 0;
padding-bottom: rem(20);
}
}
.iastate22-modal__title {
font-family: $typeface-serif;
font-weight: 700;
font-size: rem(30);
line-height: (44 / 30);
}
.iastate22-modal__body-content {
color: $iastate-maroon;
font-size: rem(18);
line-height: (29 / 18);
}
.iastate22-modal__content-cta {
color: $iastate-maroon;
font-family: $typeface-sans-serif;
font-weight: 700;
font-size: rem(18);
line-height: (26 / 18);
}
a {
color: $iastate-red;
transition: 0.2s color ease-in-out;
&:hover {
color: $iastate-maroon;
}
}
}
// modal popup window styles for iastate22-card--with-modal variant
.iastate22-modal__body-content {
+ .link-set {
margin-top: rem(15);
}
}
// styles here only needed for news and profile teaser cards
.iastate22-card__content-body {
text-align: left;
}
.iastate22-card__content-date {
text-align: left;
color: $iastate-maroon;
}
// Event Card Styles
.iastate22-card__time {
display: block;
text-align: left;
color: $grey;
font-weight: 700;
line-height: rem(26);
margin: 16px 0;
}
.iastate22-card__location {
font-style: italic;
text-align: left;
}
This is a custom component (the class has been prefaced with .iastate22-[classname]).
card__media element will be inline img elements and are sized using the css object-fit property (a polyfill is included for older browsers)image and link fields are optionalcard-set which outputs multiple instances of the cards, this should typically be used for output globallydata-clickable attribute with either true or false as its valuecard--profile-with-modal variant is a structured version for profile content which has an associated modal window that will appear on clickcard--with-modal variant is a more unstructured version of the card that has an associated modal window that appears on click. For this version the following elements are optional: image, title, modal image, modal title, and modal link set.
— The card--teaser-news and card--teaser-profile variants are intended to be used to display previews of posts (news and profiles)index.scss file as @import "../components/card/card";.ts file for the javascript is imported into the index.ts file as import cardsInit from "./components/card"; and called as cardsInit();