<div class="iastate22-card iastate22-card--profile-with-modal" data-clickable="false">
<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">Advocating for Social Justice</h2>
<div class="iastate22-card__name">
<p>Zakariyah Hill, ’21</p>
</div>
<div class="iastate22-card__role">
<p>Founder Supply Hive</p>
</div>
<button class="iastate22-card__cta" data-micromodal-trigger="modal-4">Read More</button>
<div class="iastate22-modal iastate22-card--profile-with-modal" id="modal-4" 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-4-content" role="dialog" aria-modal="true" aria-labelledby="modal-4-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-name-wrap">
<div class="iastate22-modal__media">
<img src="../../img/HP_Finding_Solutions_Story_1_FPO.jpg" alt="" loading="lazy" width="207" height="197">
</div>
<div class="iastate22-modal__name-role-wrap">
<div class="iastate22-card__name">
<p>Zakariyah Hill, ’21</p>
</div>
<div class="iastate22-card__role">
<p>Founder Supply Hive</p>
</div>
</div>
</div>
<div class="iastate22-modal__content">
<h2 class="iastate22-modal__title" id="modal-4-title">Advocating for Social Justice</h2>
<div class="iastate22-modal__body-content text-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
<div class="iastate22-modal__content-cta">
<p>Lorem Ipsum</p>
<a href="https://www.iastate.edu/">Link Title</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="iastate22-card iastate22-card--profile-with-modal"{% if clickable is defined %} data-clickable="{{ clickable }}"{% endif %}>
<div class="iastate22-card__media">
<img src="{{ image|path }}" alt="" loading="lazy" width="600" height="600" >
</div>
<div class="iastate22-card__content">
<h2 class="iastate22-card__title">{{ title }}</h2>
<div class="iastate22-card__name"><p>{{ name }}</p></div>
<div class="iastate22-card__role"><p>{{ role }}</p></div>
<button class="iastate22-card__cta" data-micromodal-trigger="{{ modal.id }}">{{ cta.text }}</button>
<div class="iastate22-modal iastate22-card--profile-with-modal" id="{{ modal.id }}" aria-hidden="false">
<div class="iastate22-modal__overlay" tabindex="-1" data-micromodal-close>
<div class="iastate22-modal__container{% if 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>
<div class="iastate22-modal__media-name-wrap">
<div class="iastate22-modal__media">
<img src="{{ image|path }}" alt="" loading="lazy" width="207" height="197" >
</div>
<div class="iastate22-modal__name-role-wrap">
<div class="iastate22-card__name"><p>{{ name }}</p></div>
<div class="iastate22-card__role"><p>{{ role }}</p></div>
</div>
</div>
<div class="iastate22-modal__content">
<h2 class="iastate22-modal__title" id="{{ modal.id }}-title">{{ title }}</h2>
<div class="iastate22-modal__body-content text-content">{{ modal.content|raw }}</div>
<div class="iastate22-modal__content-cta">
<p>{{ modal.call_to_action_intro }}</p>
<a href="{{ modal.call_to_action.url }}">{{ modal.call_to_action.title }}</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{
"title": "Advocating for Social Justice",
"body": "<p>Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur.</p>",
"image": "../../img/HP_Finding_Solutions_Story_1_FPO.jpg",
"url": "https://www.iastate.edu/",
"external": true,
"cta": {
"url": "https://www.iastate.edu/",
"text": "Read More"
},
"clickable": false,
"name": "Zakariyah Hill, ’21",
"role": "Founder Supply Hive",
"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>",
"call_to_action_intro": "ISU Can Help You Accomplish Great Things Lorem Ipsum",
"call_to_action": {
"url": "https://www.iastate.edu/",
"title": "Innovation & Entrepreneurship"
}
}
}
.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 {
&:before {
opacity: 1;
}
.iastate22-card__media {
img {
transform: scale(1.1);
}
}
}
&.iastate22-card--linked-image {
&:hover {
.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;
cursor: pointer;
&:hover {
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;
.arrow {
inset: auto;
transform: translate(#{rem(13)}, #{rem(13)});
width: 0;
background-color: $iastate-gold;
&:after,
&:before {
background-color: $iastate-gold;
}
}
}
.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();