Card

A card is a good component for showing details. It features text fields stacked in a logical order, with an image optionally above or to the left side of the text. Cards are meant to be used in rows or stacked on top of one another. If the card is linked, the entire card is clickable and a button can optionally be shown.

Card: Vertical enclosed centered w/circular image

Component Preview
<div class="card card--centered card--stacked card--enclosed">
    <div class="card__media media--circle card__media--small">
        <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/icon-square.png" alt="Alt Text">
    </div>

    <div class="card__body">
        <h2 class="headline card__title">
            <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
        </h2>

        <div class="card__details">
            <div class="card__date">
                June 14, 1984
            </div>
            <div class="card__label">
                <i class="fas fa-map-marker-alt"></i>
                Carver-Hawkeye Arena
            </div>
        </div>

        <p>Applications can be submitted via Iowa’s web application portal, the Common Application, and Coalition App. Once submitted, <a href="/">you</a> can track the status of your application through MyUI, a one-stop resource for current and prospective Iowa students.</p>

    </div>
</div>
  • Content:
    @mixin card-enclosed {
      @include breakpoint(sm) {
        border: 1px solid;
      }
      .card__body {
        padding: 2rem;
      }
    
      .bttn {
        margin-bottom: 0;
      }
    }
    
    
    @mixin card-header {
      margin: 0 0 $sm;
      padding: 0;
      font-size: 1.5rem;
      font-weight: $font-weight-medium;
      line-height: 1.2;
    
      a {
        text-decoration: none;
    
        &:hover,
        &:focus {
          text-decoration: underline;
        }
      }
    }
    
    
    @mixin card-title {
      margin-bottom: .75rem;
    }
    
    @mixin card-body {
      flex: 1;
      padding: 2rem;
      min-height: 1px;
      line-height: 1.7;
    
      h2,
      h3,
      h4,
      h5,
      h6 {
        &:not(:first-child) {
          margin-top: 0;
        }
      }
    
      @include breakpoint(sm) {
        padding: 2rem 0;
      }
    
      ul,
      ol,
      dl,
      table {
        font-size: 1rem;
        line-height: 1.7;
      }
    }
    
    @mixin card-subtitle {
      opacity: .7;
      font-family: $font-family-serif;
      font-size: 1.3rem;
      font-weight: $font-weight-medium;
      line-height: 1.3;
    }
    
    @mixin card {
      position: relative;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      margin-bottom: 1.6rem;
      text-decoration: none;
      flex-grow: 1;
      @include flexbox;
      @include flex($fg: 1, $fs: 1, $fb: 0%);
      @include flex-direction($value: column);
      border: 1px solid;
    
      &:focus-within .card__title a:focus {
        text-decoration: underline;
      }
    
      @include breakpoint(sm) {
        border: none;
        margin-bottom: 0;
      }
    }
    
    @mixin card-paragraph {
      margin-bottom: 0;
      margin-top: 0;
      font-size: 1rem;
      line-height: 1.7;
    
      a {
        position: relative;
        z-index: 1;
      }
    }
    
    @mixin card-img-top {
      min-height: 1px;
    }
    
    
    @mixin card-media {
      flex-shrink: 0;
      width: 100%;
      min-height: 1px;
    
      img {
        flex-shrink: 0;
        width: 100%;
        @include card-img-top;
      }
    }
    
    @mixin card-media-horizontal-right {
      @include breakpoint(sm) {
        flex: 0 0 35%;
        max-width: 35%;
        margin-left: $gutter;
      }
    }
    
    @mixin card-media-small {
      @include breakpoint(sm) {
        flex: 0 0 25%;
        width: 25%;
      }
    }
    
    @mixin card-media-medium {
      @include breakpoint(sm) {
        flex: 0 0 37.5%;
        width: 37.5%;
      }
    }
    
    @mixin card-media-large {
      @include breakpoint(sm) {
        flex: 0 0 50%;
        width: 50%;
      }
    }
    
  • URL: /components/raw/card/_card-mixins.scss
  • Filesystem Path: src/components/card/_card-mixins.scss
  • Size: 2.1 KB
  • Content:
    .card {
      position: relative;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      margin-bottom: 1.6rem;
      text-decoration: none;
      flex-grow: 1;
      display: flex;
      flex: 1 1 0%;
      flex-direction: column;
      border: 1px solid; }
      .card:focus-within .card__title a:focus {
        text-decoration: underline; }
      @media (min-width: 768px) {
        .card {
          border: none;
          margin-bottom: 0; } }
      @media (min-width: 768px) {
        [class*="bg-"] .card.card--stacked[class*="bg-"] .media--circle {
          margin-top: 2rem; } }
      @media (min-width: 768px) {
        [class*="bg-"] .card.card--stacked[class*="bg-"] .media--circle.card__media--large {
          padding: 0 2rem 0 2rem;
          margin-top: 2rem; } }
      @media (min-width: 768px) {
        .card--stacked[class*="bg-"] .media--circle.card__media--small,
        .card--stacked[class*="bg-"] .media--circle.card__media--medium,
        .card--stacked[class*="bg-"] .media--circle.card__media--large {
          margin-top: 2rem; } }
      @media (min-width: 768px) {
        .card--stacked .media--circle.card__media--large {
          padding: 0 2rem; } }
      @media (min-width: 768px) {
        .card--enclosed {
          border: 1px solid; } }
      .card--enclosed .card__body {
        padding: 2rem; }
      .card--enclosed .bttn {
        margin-bottom: 0; }
      @media (min-width: 768px) {
        .card--enclosed.card--stacked .media--circle,
        .card--enclosed.card--stacked .card__media--small,
        .card--enclosed.card--stacked .card__media--medium {
          margin-top: 2rem; } }
      .card__title {
        margin: 0 0 0.625rem;
        padding: 0;
        font-size: 1.5rem;
        font-weight: 500;
        line-height: 1.2; }
        .card__title a {
          text-decoration: none; }
          .card__title a:hover, .card__title a:focus {
            text-decoration: underline; }
        .card__title.headline {
          font-size: 1.5rem; }
        .card__title:focus-within ~ .bttn {
          background-position: 0px;
          background-size: 200% 100%; }
          .card__title:focus-within ~ .bttn i,
          .card__title:focus-within ~ .bttn svg {
            color: #151515; }
      .card .bttn {
        background-image: linear-gradient(to bottom, #ffffff00 0%, #ffffff00 90%, #ffcd00 90%, #ffcd00 100%);
        background-position: 0px -20px;
        background-size: 200% 200%;
        transition: all .25s ease-in; }
        .card .bttn:after {
          content: "";
          transform: translate(-50%) scaleX(0);
          transition: transform .3s ease-in-out; }
        .card .bttn:hover, .card .bttn:focus {
          background: transparent; }
          .card .bttn:hover:after, .card .bttn:focus:after {
            transform: translate(-50%, 0) scaleX(1); }
      .card p + .bttn,
      .card p + .btn {
        margin-top: 1.05rem; }
      .card__subtitle + p,
      .card__subtitle + .bttn,
      .card__subtitle + .btn {
        margin-top: 0.625rem; }
      .card--centered {
        text-align: center; }
        .card--centered.card--media-right, .card--centered.card--media-left {
          flex-direction: column; }
          @media (min-width: 768px) {
            .card--centered.card--media-right .card__media + .card__body, .card--centered.card--media-left .card__media + .card__body {
              padding: 2rem 0 0 0; } }
      @media (min-width: 768px) {
        .card .card__media--small,
        .card .card__media--medium,
        .card .card__media--large {
          justify-content: center;
          margin: 0 auto; } }
      @media (min-width: 768px) {
        .card.card--stacked .card__media--large {
          display: block; } }
      @media (min-width: 768px) {
        .card.card--stacked .card__media--small.media--circle {
          max-width: 150px; } }
      @media (min-width: 768px) {
        .card.media--widescreen .card__media--small {
          max-width: 60%; } }
      @media (min-width: 768px) {
        .card.media--widescreen .card__media--medium {
          max-width: 75%; } }
      @media (min-width: 768px) {
        .card.media--square .card__media--small, .card.media--circle .card__media--small {
          max-width: 160px; } }
      .card.media--square .card__media--small img, .card.media--circle .card__media--small img {
        align-self: start; }
      @media (min-width: 768px) {
        .card .card__media--medium {
          max-width: 60%; } }
      .card .card__media--medium img {
        align-self: start; }
      .card__media {
        flex-shrink: 0;
        width: 100%;
        min-height: 1px; }
        .card__media img {
          flex-shrink: 0;
          width: 100%;
          min-height: 1px; }
      .card__img {
        align-self: start;
        width: 100%; }
      .card__body {
        flex: 1;
        padding: 2rem;
        min-height: 1px;
        line-height: 1.7; }
        .card__body h2:not(:first-child),
        .card__body h3:not(:first-child),
        .card__body h4:not(:first-child),
        .card__body h5:not(:first-child),
        .card__body h6:not(:first-child) {
          margin-top: 0; }
        @media (min-width: 768px) {
          .card__body {
            padding: 2rem 0; } }
        .card__body ul,
        .card__body ol,
        .card__body dl,
        .card__body table {
          font-size: 1rem;
          line-height: 1.7; }
      .card__details {
        margin: 0 0 0.625rem; }
      .card p {
        margin-bottom: 0;
        margin-top: 0;
        font-size: 1rem;
        line-height: 1.7; }
        .card p a {
          position: relative;
          z-index: 1; }
      .card__subtitle {
        opacity: .7;
        font-family: "Zilla Slab", serif;
        font-size: 1.3rem;
        font-weight: 500;
        line-height: 1.3; }
      .card__date {
        font-family: "Roboto", sans-serif;
        font-size: 1.1rem;
        line-height: 1.4;
        font-weight: 400; }
      .card__label {
        font-family: "Zilla Slab", serif;
        font-size: 1.2rem;
        font-weight: 400;
        padding-left: 20px;
        line-height: 1.3;
        margin-top: 0.325rem; }
        .card__label .fas,
        .card__label .svg-inline--fa {
          opacity: .6;
          padding-right: 0.325rem;
          font-size: 1rem;
          line-height: 1.2;
          position: absolute;
          margin-left: -20px; }
        .card__label .svg-inline--fa {
          width: 17px; }
      @media (min-width: 768px) {
        .card.card--media-right.card--enclosed, .card.card--media-right[class*="bg-"]:not(.bg--white), .card.card--media-left.card--enclosed, .card.card--media-left[class*="bg-"]:not(.bg--white) {
          padding: 2rem; } }
      @media (min-width: 768px) {
        .card.card--media-right .card__media--small, .card.card--media-left .card__media--small {
          flex: 0 0 25%;
          width: 25%; } }
      @media (min-width: 768px) {
        .card.card--media-right .card__media--small.media--circle, .card.card--media-left .card__media--small.media--circle {
          flex: 0 0 25%;
          width: 25%;
          max-width: 150px; } }
      @media (min-width: 768px) {
        .card.card--media-right .card__media--medium, .card.card--media-left .card__media--medium {
          flex: 0 0 37.5%;
          width: 37.5%; } }
      @media (min-width: 768px) {
        .card.card--media-right .card__media--medium.media--circle, .card.card--media-left .card__media--medium.media--circle {
          flex: 0 0 25%;
          width: 25%; } }
      @media (min-width: 768px) {
        .card.card--media-right .card__media--large, .card.card--media-left .card__media--large {
          flex: 0 0 50%;
          width: 50%; } }
      @media (min-width: 768px) {
        .card.card--media-right .card__media--large.media--circle, .card.card--media-left .card__media--large.media--circle {
          flex: 0 0 37%;
          width: 37%; } }
      @media (min-width: 768px) {
        .card.card--media-right.media--square .card__media--medium, .card.card--media-left.media--square .card__media--medium {
          flex: 0 0 25%;
          width: 25%; } }
      @media (min-width: 768px) {
        .card.card--media-right.media--square .card__media--large, .card.card--media-left.media--square .card__media--large {
          flex: 0 0 37%;
          width: 37%; } }
      @media (min-width: 768px) {
        .card.card--media-right .card__media + .card__body, .card.card--media-left .card__media + .card__body {
          padding: 0 0 1.05rem 2rem; } }
      @media (min-width: 768px) {
        .card.card--media-right .media--circle.card__media--small + .card__body, .card.card--media-left .media--circle.card__media--small + .card__body {
          padding: 0 0 0 1.25rem; } }
      @media (min-width: 768px) {
        .card.card--media-right.card--media-right .card__media + .card__body, .card.card--media-left.card--media-right .card__media + .card__body {
          padding: 0 2rem 1.05rem 0; } }
      .card.card--media-right .card__body, .card.card--media-left .card__body {
        flex: 0 1 100%;
        padding: 2rem;
        min-height: 1px; }
        @media (min-width: 768px) {
          .card.card--media-right .card__body, .card.card--media-left .card__body {
            padding: 0; } }
      @media (min-width: 768px) {
        .card.card--media-right, .card.card--media-left {
          display: flex;
          flex-wrap: nowrap;
          flex-direction: unset;
          width: 100%;
          margin-bottom: 1.6rem; } }
      .card.card--media-right .card__title, .card.card--media-left .card__title {
        font-family: "Zilla Slab", serif;
        font-weight: 700; }
        @media (min-width: 768px) {
          .card.card--media-right .card__title, .card.card--media-left .card__title {
            padding: 0;
            margin: 0 0 0.325rem; } }
      .card--media-right {
        flex-direction: row-reverse; }
        .card--media-right.card--enclosed, .card--media-right.card {
          flex-direction: row-reverse; }
      .card__head {
        flex-wrap: wrap;
        padding: 0;
        text-align: center;
        display: flex;
        justify-content: center; }
        @media (min-width: 768px) {
          .card__head {
            padding: 0 0 2rem 0; } }
        @media (min-width: 855px) {
          .card__head {
            margin: 0;
            display: block; } }
        .card__head p {
          color: #63666A !important;
          margin: 0; }
        .card__head .bold-headline {
          display: block; }
        .card__head .bttn {
          flex-basis: 100%;
          padding-top: 0.625rem; }
          @media (min-width: 768px) {
            .card__head .bttn {
              padding-top: 1.05rem; } }
          .card__head .bttn.bttn--link:hover, .card__head .bttn.bttn--link:focus {
            background: transparent;
            text-decoration: underline; }
        .card__head h2 {
          margin: 0;
          padding: 0; }
    
    @media (min-width: 768px) {
      [class*="bg-"] .card.card--stacked[class*="bg-"] .card__body,
      .card.card--stacked[class*="bg-"]:not(.bg--white) .card__body {
        padding: 2rem; } }
    
    .card.card--enclosed[class*="bg--white"] {
      border: 1px solid rgba(0, 0, 0, 0.125); }
      [class*="bg-"] .card.card--enclosed[class*="bg--white"] {
        border: 1px solid rgba(0, 0, 0, 0.125); }
    
    [class*="bg-"] .card[class*="bg--white"] .bttn--outline {
      border-color: #FFCD00; }
    
    .card[class*="bg--white"] .bttn--outline {
      border-color: #FFCD00; }
    
    @media (min-width: 768px) {
      [class*="bg-"] .card--media-left.card, [class*="bg-"] .card--media-right.card {
        padding: 2rem; } }
    
    @media (min-width: 768px) {
      [class*="bg-"] .card--media-left.card:not([class*="bg-"]), [class*="bg-"] .card--media-right.card:not([class*="bg-"]) {
        padding: 0; } }
    
    @media (min-width: 768px) {
      [class*="bg-"] .card--media-left.card--enclosed:not([class*="bg-"]), [class*="bg-"] .card--media-right.card--enclosed:not([class*="bg-"]) {
        padding: 2rem; } }
    
  • URL: /components/raw/card/card.css
  • Filesystem Path: src/components/card/card.css
  • Size: 11 KB
  • Content:
    const cards = document.querySelectorAll('.card');
    const link_elements = ['.card__title a', '.card__media a', 'a.bttn'];
    Array.prototype.forEach.call(cards, card => {
      let up, down, link, i;
      // Loop through options and break on the first match.
      for (i = 0; i < link_elements.length; i++) {
        if (link = card.querySelector(link_elements[i])) {
          break;
        }
      }
    
      // If we have a match, attach behaviors.
      if (link) {
        card.style.cursor = 'pointer';
        card.onmousedown = () => down = +new Date();
        card.onmouseup = () => {
          up = +new Date();
          // Trigger click event if the duration is short enough.
          if ((up - down) < 200) {
            link.click();
          }
        }
      }
    });
    
  • URL: /components/raw/card/card.js
  • Filesystem Path: src/components/card/card.js
  • Size: 704 Bytes
  • Content:
    @import '../../assets/scss/variables';
    @import '../../assets/scss/utilities';
    @import '_card-mixins.scss';
    
    
    .card {
      @include card;
    
      // Adjust margin and padding for stacked circle if there is a background section color
      [class*="bg-"] & {
    
        &.card--stacked[class*="bg-"] {
          .media--circle {
            @include breakpoint(sm) {
              margin-top: 2rem;
            }
    
            &.card__media--large {
              @include breakpoint(sm) {
                padding: 0 2rem 0 2rem;
                margin-top: 2rem;
              }
            }
          }
        }
      }
    
      &--stacked {
    
        // Adjust margin if circle is within stacked version with bg color
        &[class*="bg-"] {
    
          .media--circle.card__media--small,
          .media--circle.card__media--medium,
          .media--circle.card__media--large {
            @include breakpoint(sm) {
              margin-top: 2rem;
            }
          }
        }
    
        // Add padding if large circle stacked is enclosed or has bg color
        .media--circle.card__media--large {
          @include breakpoint(sm) {
            padding: 0 2rem;
          }
        }
      }
    
      &--enclosed {
        @include card-enclosed;
    
        &.card--stacked {
    
          .media--circle,
          .card__media--small,
          .card__media--medium {
            @include breakpoint(sm) {
              margin-top: 2rem;
            }
          }
        }
      }
    
      &__title {
        @include card-header;
    
        &.headline {
          font-size: 1.5rem;
        }
    
    
        &:focus-within~.bttn {
          background-position: 0px;
          background-size: 200% 100%;
    
          i,
          svg {
            color: $secondary;
          }
        }
      }
    
      .bttn {
        background-image: linear-gradient(to bottom, #ffffff00 0%, #ffffff00 90%, #ffcd00 90%, #ffcd00 100%);
        background-position: 0px -20px;
        background-size: 200% 200%;
        transition: all .25s ease-in;
    
        &:after {
          content: "";
          transform: translate(-50%) scaleX(0);
          transition: transform .3s ease-in-out;
        }
    
        &:hover,
        &:focus {
          background: transparent;
    
          &:after {
            transform: translate(-50%, 0) scaleX(1);
    
          }
        }
      }
    
      p+.bttn,
      p+.btn {
        margin-top: $md;
      }
    
      &__subtitle+p,
      &__subtitle+.bttn,
      &__subtitle+.btn {
        margin-top: $sm;
      }
    
      &--centered {
        text-align: center;
    
    
        &.card--media-right,
        &.card--media-left {
          flex-direction: column;
    
          .card__media+.card__body {
            @include breakpoint(sm) {
              padding: 2rem 0 0 0;
            }
          }
        }
      }
    
      .card__media--small,
      .card__media--medium,
      .card__media--large {
        @include breakpoint(sm) {
          justify-content: center;
          margin: 0 auto;
        }
      }
    
      &.card--stacked {
        .card__media--large {
          @include breakpoint(sm) {
            display: block;
          }
        }
    
        // set fixed small size for card stacked small circle
        .card__media--small.media--circle {
          @include breakpoint(sm) {
            max-width: 150px;
          }
        }
      }
    
      &.media--widescreen {
        .card__media--small {
          @include breakpoint(sm) {
            max-width: 60%;
          }
        }
    
        .card__media--medium {
          @include breakpoint(sm) {
            max-width: 75%;
          }
        }
      }
    
      &.media--square,
      &.media--circle {
        .card__media--small {
          @include breakpoint(sm) {
            max-width: 160px;
          }
    
          img {
            align-self: start;
          }
        }
      }
    
      .card__media--medium {
        @include breakpoint(sm) {
          max-width: 60%;
        }
    
        img {
          align-self: start;
        }
      }
    
      &__media {
        @include card-media;
      }
    
      &__img {
        align-self: start;
        width: 100%;
      }
    
      &__body {
        @include card-body;
      }
    
      &__details {
        margin: 0 0 $sm;
      }
    
      p {
        @include card-paragraph;
      }
    
      &__subtitle {
        @include card-subtitle;
      }
    
      &__date {
        font-family: $font-family-sans-serif;
        font-size: 1.1rem;
        line-height: 1.4;
        font-weight: $font-weight-normal;
      }
    
      &__label {
        font-family: "Zilla Slab", serif;
        font-size: 1.2rem;
        font-weight: 400;
        padding-left: 20px;
        line-height: 1.3;
        margin-top: $xsm;
    
        .fas,
        .svg-inline--fa {
          opacity: .6;
          padding-right: $xsm;
          font-size: 1rem;
          line-height: 1.2;
          position: absolute;
          margin-left: -20px;
        }
    
        .svg-inline--fa {
          width: 17px;
        }
      }
    
      &.card--media-right,
      &.card--media-left {
    
        &.card--enclosed,
        &[class*="bg-"]:not(.bg--white) {
          @include breakpoint(sm) {
            padding: 2rem;
          }
        }
    
        .card__media--small {
          @include card-media-small;
    
          &.media--circle {
            @include breakpoint(sm) {
              flex: 0 0 25%;
              width: 25%;
              max-width: 150px;
            }
          }
        }
    
        .card__media--medium {
          @include card-media-medium;
    
          &.media--circle {
            @include breakpoint(sm) {
              flex: 0 0 25%;
              width: 25%;
            }
          }
        }
    
        .card__media--large {
          @include card-media-large;
    
          &.media--circle {
            @include breakpoint(sm) {
              flex: 0 0 37%;
              width: 37%;
            }
          }
        }
    
        &.media--square {
    
          // Size adjustments for square format
          .card__media--medium {
            @include breakpoint(sm) {
              flex: 0 0 25%;
              width: 25%;
            }
          }
    
          .card__media--large {
            @include breakpoint(sm) {
              flex: 0 0 37%;
              width: 37%;
            }
          }
        }
    
    
        .card__media+.card__body {
          @include breakpoint(sm) {
            padding: 0 0 $md 2rem;
          }
        }
    
        // Reduce padding for small circle crop next to card__body
        .media--circle.card__media--small {
    
          +.card__body {
            @include breakpoint(sm) {
              padding: 0 0 0 $gutter;
            }
          }
        }
    
        // Adjust card body padding on image if "right" option is selected
        &.card--media-right {
    
          .card__media+.card__body {
            @include breakpoint(sm) {
              padding: 0 2rem $md 0;
            }
          }
        }
    
        .card__body {
          flex: 0 1 100%;
          padding: 2rem;
    
          @include breakpoint(sm) {
            padding: 0;
          }
    
          min-height: 1px;
        }
    
        @include breakpoint(sm) {
          display: flex;
          flex-wrap: nowrap;
          flex-direction: unset;
          width: 100%;
          margin-bottom: 1.6rem;
        }
    
        .card__title {
          font-family: $font-family-serif;
          font-weight: $font-weight-bold;
    
          @include breakpoint(sm) {
            padding: 0;
            margin: 0 0 $xsm;
          }
        }
    
        .bttn--outline {
    
          &:after {
            //width: auto;
          }
        }
      }
    
      &--media-right {
        flex-direction: row-reverse;
    
        &.card--enclosed,
        &.card {
          flex-direction: row-reverse;
        }
      }
    
      // @todo move card header to separate component
      &__head {
        flex-wrap: wrap;
        padding: 0;
        text-align: center;
        @include center(horizontal);
    
        @include breakpoint(sm) {
          padding: 0 0 2rem 0;
        }
    
        @include breakpoint(menu) {
          margin: 0;
          display: block;
        }
    
        p {
          @include brand-cool-gray;
          margin: 0;
        }
    
        .bold-headline {
          display: block;
        }
    
        .bttn {
          flex-basis: 100%;
          padding-top: $sm;
    
          @include breakpoint(sm) {
            padding-top: $md;
          }
    
          &.bttn--link:hover,
          &.bttn--link:focus {
            background: transparent;
            text-decoration: underline;
          }
        }
    
        h2 {
          margin: 0;
          padding: 0;
        }
      }
    }
    
    // set padding if background color is different from card color
    [class*="bg-"] .card.card--stacked[class*="bg-"],
    .card.card--stacked[class*="bg-"]:not(.bg--white) {
      .card__body {
        @include breakpoint(sm) {
          padding: 2rem;
        }
      }
    }
    
    // set card enclosed border for only bg--white
    .card.card--enclosed {
    
      &[class*="bg--white"] {
        [class*="bg-"] & {
          border: 1px solid rgba(0, 0, 0, 0.125);
        }
    
        border: 1px solid rgba(0, 0, 0, 0.125);
      }
    }
    
    // set button border color for only the bg--white version
    .card[class*="bg--white"] {
    
      [class*="bg-"] & {
        .bttn--outline {
          border-color: $primary;
        }
      }
    
      .bttn--outline {
        border-color: $primary;
      }
    }
    
    [class*="bg-"] {
      .card {
    
        // Adjust padding if a card container has a background color.
        &--media-left.card,
        &--media-right.card {
          @include breakpoint(sm) {
            padding: 2rem;
          }
    
          // Remove padding if there's a section background color but no card bg set
          &:not([class*="bg-"]) {
            @include breakpoint(sm) {
              padding: 0;
            }
          }
    
          // Add padding if there's a section background color but no card bg set with border
          &--enclosed:not([class*="bg-"]) {
            @include breakpoint(sm) {
              padding: 2rem;
            }
          }
        }
      }
    }
    
  • URL: /components/raw/card/card.scss
  • Filesystem Path: src/components/card/card.scss
  • Size: 8.7 KB