<div class="iastate22-card iastate22-card--teaser iastate22-card--teaser-news">
<div class="iastate22-card__media">
<img src="../../img/Component-Feature-News-Story-Image.jpg" alt="" loading="lazy" width="304" height="202">
</div>
<div class="iastate22-card__content">
<a href="#" class="iastate22-card__cta">Headline Nemo enim irure dolor in reprehenderit in voluptate velit esse cillum dolore.</a>
<p class="iastate22-card__content-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non lectus a lectus hendrerit facilisis quis ac augue. Sed quis sem eget felis venenatis aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porttitor nibh feugiat
magna dictum, malesuada euismod lectus pulvinar.</p>
<p class="iastate22-card__content-date">June 16, 2022</p>
</div>
</div>
<div class="iastate22-card iastate22-card--teaser iastate22-card--teaser-news"{% if clickable is defined %} data-clickable="{{ clickable }}"{% endif %}>
{% if image %}
<div class="iastate22-card__media">
<img src="{{ image }}" alt="" loading="lazy" width="304" height="202">
</div>
{% endif %}
<div class="iastate22-card__content">
<a href="{{ url }}" class="iastate22-card__cta">{{ title }}</a>
<p class="iastate22-card__content-body">{{ body }}</p>
<p class="iastate22-card__content-date">{{ date }}</p>
</div>
</div>
{
"title": "Headline Nemo enim irure dolor in reprehenderit in voluptate velit esse cillum dolore.",
"body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non lectus a lectus hendrerit facilisis quis ac augue. Sed quis sem eget felis venenatis aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porttitor nibh feugiat magna dictum, malesuada euismod lectus pulvinar.",
"image": "../../img/Component-Feature-News-Story-Image.jpg",
"url": "#",
"external": true,
"cta": {
"url": "https://www.iastate.edu/",
"text": "Learn More"
},
"date": "June 16, 2022"
}
.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();