Component Library

Card: Linked Image With Video 

<div class="iastate22-card iastate22-card--linked-image">
    <div class="iastate22-card__media">
        <img src="../../img/IMG-HP_Find_My_Major_FPO.jpg" alt="">
    </div>
    <button class="iastate22-card__cta" data-micromodal-trigger=Video-Modal-LIV-3>Watch Lorem Ipsum Dolor
      <span class="icon-video">
        <svg xmlns="http://www.w3.org/2000/svg" width="31" height="18.002" viewBox="0 0 31 18.002" class="icon-video--inactive">
          <path d="M31,3.984a2.153,2.153,0,0,0-2.891-1.846L23,3.75V2.979A3.03,3.03,0,0,0,19.916,0H3.1A3.052,3.052,0,0,0,0,3v12.02A3.047,3.047,0,0,0,3.026,18H19.9A3.055,3.055,0,0,0,23,15.007v-.746l5.045,1.59a2.2,2.2,0,0,0,.8.153h.014a1.992,1.992,0,0,0,1.063-.264A2.027,2.027,0,0,0,31,13.979Zm-10,11A1.079,1.079,0,0,1,19.916,16H3.063A1.08,1.08,0,0,1,2,15V3.024A1.049,1.049,0,0,1,3.061,2H19.933A1.062,1.062,0,0,1,21,3V14.981Zm7.98-1.005a.215.215,0,0,1-.108.028h0l-.155-.038L23,12.164V5.847l5.78-1.826a.229.229,0,0,1,.081-.016h.047A.119.119,0,0,1,29,4.037Z" transform="translate(0 0)" fill="#7c2529"/>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" width="30.873" height="18" viewBox="0 0 30.873 18" class="icon-video--active">
          <path id="SVG_Video_Gold_Fill" d="M-980.032,12916a2.129,2.129,0,0,1-1.968-2.249v-13.5a2.129,2.129,0,0,1,1.968-2.25h16.93a2.131,2.131,0,0,1,1.974,2.25v13.507A2.13,2.13,0,0,1-963.1,12916Zm27.316-2.1-6.412-2.162v-9.481l6.412-2.159a1.093,1.093,0,0,1,.451-.1,1.167,1.167,0,0,1,1.138,1.2v11.6a1.218,1.218,0,0,1-.541,1.021,1.1,1.1,0,0,1-.593.175A1.115,1.115,0,0,1-952.716,12913.9Z" transform="translate(982 -12898)" fill="#f1be48"/>
        </svg>
      </span>
    </button>
</div>
<div class="iastate22-modal iastate22-modal--with-video" id="Video-Modal-LIV-3" aria-hidden="false">
    <div class="iastate22-modal__overlay" tabindex="-1" data-micromodal-close>
        <div class="iastate22-modal__container iastate22-modal__container-with-media" id="Video-Modal-LIV-3-content" role="dialog" aria-modal="true" aria-labelledby="Video-Modal-LIV-3-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">
                <div class="video-embed">
                    <div class="video-embed__media-wrap">
                        <img src="../../img/IMG-Inline_Center_FPO.jpg" alt="" />
                        <div class="video-embed__video" aria-label="YouTube Video: Your future starts now." data-vid="LjOmcZkXVcU"></div>
                    </div>
                    <div class="video-embed__caption">Video caption 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.</div>
                </div>
            </div>
            <div class="iastate22-modal__content">
                <h2 class="iastate22-modal__title" id="Video-Modal-LIV-3-title">Video Modal Image Card 3</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </div>
        </div>
    </div>
</div>
 
<div class="iastate22-card iastate22-card--linked-image">
  <div class="iastate22-card__media">
		<img src="{{ image|path }}" alt="">
	</div>
  {% if video %}
    <button class="iastate22-card__cta" data-micromodal-trigger={{ video.modal.id }}>{{ video.text }}
      <span class="icon-video">
        <svg xmlns="http://www.w3.org/2000/svg" width="31" height="18.002" viewBox="0 0 31 18.002" class="icon-video--inactive">
          <path d="M31,3.984a2.153,2.153,0,0,0-2.891-1.846L23,3.75V2.979A3.03,3.03,0,0,0,19.916,0H3.1A3.052,3.052,0,0,0,0,3v12.02A3.047,3.047,0,0,0,3.026,18H19.9A3.055,3.055,0,0,0,23,15.007v-.746l5.045,1.59a2.2,2.2,0,0,0,.8.153h.014a1.992,1.992,0,0,0,1.063-.264A2.027,2.027,0,0,0,31,13.979Zm-10,11A1.079,1.079,0,0,1,19.916,16H3.063A1.08,1.08,0,0,1,2,15V3.024A1.049,1.049,0,0,1,3.061,2H19.933A1.062,1.062,0,0,1,21,3V14.981Zm7.98-1.005a.215.215,0,0,1-.108.028h0l-.155-.038L23,12.164V5.847l5.78-1.826a.229.229,0,0,1,.081-.016h.047A.119.119,0,0,1,29,4.037Z" transform="translate(0 0)" fill="#7c2529"/>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" width="30.873" height="18" viewBox="0 0 30.873 18" class="icon-video--active">
          <path id="SVG_Video_Gold_Fill" d="M-980.032,12916a2.129,2.129,0,0,1-1.968-2.249v-13.5a2.129,2.129,0,0,1,1.968-2.25h16.93a2.131,2.131,0,0,1,1.974,2.25v13.507A2.13,2.13,0,0,1-963.1,12916Zm27.316-2.1-6.412-2.162v-9.481l6.412-2.159a1.093,1.093,0,0,1,.451-.1,1.167,1.167,0,0,1,1.138,1.2v11.6a1.218,1.218,0,0,1-.541,1.021,1.1,1.1,0,0,1-.593.175A1.115,1.115,0,0,1-952.716,12913.9Z" transform="translate(982 -12898)" fill="#f1be48"/>
        </svg>
      </span>
    </button>
  {% endif %}
</div>
{% include "@modal--with-video" with video.modal %}
 
{
  "title": "Card Title",
  "body": "<p>Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur.</p>",
  "image": "../../img/IMG-HP_Find_My_Major_FPO.jpg",
  "url": "https://www.iastate.edu/",
  "external": true,
  "cta": {
    "url": "https://www.iastate.edu/",
    "text": "Learn More"
  },
  "video": {
    "text": "Find My Major Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et",
    "modal": {
      "id": "Video-Modal-1",
      "title": "Video Modal",
      "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>",
      "video": {
        "wallpaper": "../../img/IMG-Inline_Center_FPO.jpg",
        "source": "youtube",
        "title": "Your future starts now.",
        "youtube_video_id": "LjOmcZkXVcU",
        "vimeo_video_id": ""
      }
    }
  }
}
  • Content: 
    .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;
}
  • URL: /components/raw/card/_card.scss
  • Filesystem Path: src/components/card/_card.scss
  • Size: 10.1 KB

Card

This is a custom component (the class has been prefaced with .iastate22-[classname]).

  • Images within the card__media element will be inline img elements and are sized using the css object-fit property (a polyfill is included for older browsers)
  • The image and link fields are optional
  • There is a companion component associated called card-set which outputs multiple instances of the cards, this should typically be used for output globally
  • By deafult, the entire card is clickable. This global setting can be overridden on a per-component basis by applying the data-clickable attribute with either true or false as its value
  • The card--profile-with-modal variant is a structured version for profile content which has an associated modal window that will appear on click
  • The card--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)
  • The custom styles are imported into the index.scss file as @import "../components/card/card";
  • The .ts file for the javascript is imported into the index.ts file as import cardsInit from "./components/card"; and called as cardsInit();