Component Library

Card: Teaser Profile 

<div class="iastate22-card iastate22-card--teaser iastate22-card--teaser-profile">
    <div class="iastate22-card__media">
        <img src="../../img/faculty-bio-photo_fpo.jpg" alt="" loading="lazy" width="196" height="196">
    </div>
    <div class="iastate22-card__content">
        <a href="#" class="iastate22-card__cta">FirstName LastName</a>
        <p class="iastate22-card__content-body">Short Title Lorem Ipsum</p>
    </div>
</div>
 
<div class="iastate22-card iastate22-card--teaser iastate22-card--teaser-profile"{% if clickable is defined %} data-clickable="{{ clickable }}"{% endif %}>
  {% if image %}
  <div class="iastate22-card__media">
    <img src="{{ image }}" alt="" loading="lazy" width="196" height="196">
  </div>
  {% endif %}
  <div class="iastate22-card__content">
    <a href="{{ url }}" class="iastate22-card__cta">{{ title }}</a>
    <p class="iastate22-card__content-body">{{ body }}</p>
  </div>
</div>
 
{
  "title": "FirstName LastName",
  "body": "Short Title Lorem Ipsum",
  "image": "../../img/faculty-bio-photo_fpo.jpg",
  "url": "#",
  "external": true,
  "cta": {
    "url": "https://www.iastate.edu/",
    "text": "Learn More"
  }
}
  • 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 {
      &: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;
}
  • URL: /components/raw/card/_card.scss
  • Filesystem Path: src/components/card/_card.scss
  • Size: 9.2 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();