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

Component Preview
<div class="card click-container bg--white card--stacked">
          <div class="card__media ">
              <img class="card__img" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature1.jpg" alt="Alt Text">
          </div>

          <div class="card__body">
              <h2 class="headline card__title">
                  <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                      <span class="headline__text">Dedicated to having an impact on human health</span>
                  </a>
              </h2>

              <div class="card__details">
                  <div class="card__subtitle">By Lee Hermiston</div>
                  <div class="card__meta">
                      June 14, 1984
                  </div>
              </div>

              <p>Molecular <a href="https://hr.uiowa.edu">medicine PhD</a> student Jordan Kohlmeyer is researching new therapies for malignant peripheral nerve sheath tumors, which are deadly, resistant to drug therapies, and often unable to be operated upon due to their location.</p>

              <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                  View Story
                  <i class="fas fa-arrow-right"></i>
              </div>
          </div>
      </div>
  • Content:
    @mixin card-enclosed {
      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 0 0;
      @include breakpoint(sm) {
        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);
    
      &: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:
    /* Base card styles
       ========================================================================== */
    .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; }
      .card:focus-within .card__title a:focus {
        text-decoration: underline; }
      @media (min-width: 768px) {
        .card {
          border: none;
          margin-bottom: 0; } }
      .card--enclosed {
        border: 1px solid; }
        .card--enclosed .card__body {
          padding: 2rem; }
        .card--enclosed .bttn {
          margin-bottom: 0; }
      .card--stacked.card--enclosed .card__body {
        padding: 2rem; }
      .card--stacked.card--enclosed .card__media + .card__body {
        padding: 2rem; }
      .card--stacked .card__body {
        padding: 0; }
      .card--stacked .card__media + .card__body {
        padding: 2rem 0 0; }
        @media (min-width: 768px) {
          .card--stacked .card__media + .card__body {
            padding: 2rem 0 0; } }
      .card--media-left .card__body, .card--media-right .card__body {
        padding: 0;
        min-height: 1px; }
        @media (min-width: 768px) {
          .card--media-left .card__body, .card--media-right .card__body {
            flex: 0 1 100%; } }
      .card--media-left .card__media + .card__body, .card--media-right .card__media + .card__body {
        padding: 2rem 0 0; }
        @media (min-width: 768px) {
          .card--media-left .card__media + .card__body, .card--media-right .card__media + .card__body {
            padding: 0; } }
      .card--media-left[class*="bg-"] .card__body, .card--media-right[class*="bg-"] .card__body {
        padding: 2rem; }
        @media (min-width: 768px) {
          .card--media-left[class*="bg-"] .card__body, .card--media-right[class*="bg-"] .card__body {
            padding: 0; } }
      .card--media-left.card--enclosed .card__body, .card--media-right.card--enclosed .card__body {
        padding: 2rem; }
        @media (min-width: 768px) {
          .card--media-left.card--enclosed .card__body, .card--media-right.card--enclosed .card__body {
            padding: 0; } }
      .card--centered {
        text-align: center; }
      .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: 0;
          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: 0 -20px;
        background-size: 200% 200%;
        transition: all 0.25s ease-in; }
        .card .bttn:after {
          content: "";
          transform: translate(-50%) scaleX(0);
          transition: transform 0.3s ease-in-out; }
        .card .bttn:focus:after, .card .bttn:hover:after {
          transform: translate(-50%, 0) scaleX(1); }
      .card p + .btn,
      .card p + .bttn {
        margin-top: 1.05rem; }
      .card__subtitle + .btn,
      .card__subtitle + .bttn,
      .card__subtitle + p {
        margin-top: 0.625rem; }
      .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 0 0;
        min-height: 1px;
        line-height: 1.7; }
        @media (min-width: 768px) {
          .card__body {
            padding: 2rem; } }
        .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", "Zilla-fallback", serif;
        font-size: 1.3rem;
        font-weight: 500;
        line-height: 1.3; }
      .card__date, .card__meta {
        font-family: "Roboto", sans-serif;
        font-size: 1.1rem;
        line-height: 1.4;
        font-weight: 400; }
        .card__date .fas, .card__meta .fas {
          margin-right: .3rem; }
      .card__label {
        font-family: "Zilla Slab", serif;
        font-size: 1.2rem;
        font-weight: 400;
        padding-left: 20px;
        line-height: 1.3;
        margin-top: .125rem; }
        .card__label .fas,
        .card__label .svg-inline--fa {
          opacity: 0.6;
          padding-right: 0.325rem;
          font-size: 1rem;
          line-height: 1.2;
          position: absolute;
          margin-left: -20px; }
        .card__label .svg-inline--fa {
          width: 17px; }
    
    /* Margin and padding adjustments for media--circle
       ========================================================================== */
    [class*="bg-"] .card.card--stacked[class*="bg-"] .media--circle {
      margin-top: 2rem; }
      [class*="bg-"] .card.card--stacked[class*="bg-"] .media--circle.card__media--large {
        padding: 0 2rem; }
    
    .card--media-left .media--circle.card__media--large, .card--media-right .media--circle.card__media--large, .card--stacked .media--circle.card__media--large {
      padding: 0 2rem; }
    
    .card--media-left[class*="bg-"] .media--circle, .card--media-right[class*="bg-"] .media--circle, .card--stacked[class*="bg-"] .media--circle {
      margin-top: 2rem; }
      @media (min-width: 768px) {
        .card--media-left[class*="bg-"] .media--circle, .card--media-right[class*="bg-"] .media--circle, .card--stacked[class*="bg-"] .media--circle {
          margin-top: 0; } }
    
    @media (min-width: 768px) {
      .card--media-left .media--circle.card__media--large, .card--media-right .media--circle.card__media--large {
        padding: 0; } }
    
    .card--stacked[class*="bg-"] .media--circle {
      margin-top: 2rem; }
    
    .card--enclosed.card--media-left .media--circle, .card--enclosed.card--media-right .media--circle, .card--enclosed.card--stacked .media--circle {
      margin-top: 2rem; }
    
    @media (min-width: 768px) {
      .card--enclosed.card--media-left .media--circle, .card--enclosed.card--media-right .media--circle {
        margin-top: 0; } }
    
    /* Card media styles
       ========================================================================== */
    .card .card__media--large,
    .card .card__media--medium,
    .card .card__media--small {
      margin-left: auto;
      margin-right: auto; }
      @media (min-width: 768px) {
        .card .card__media--large,
        .card .card__media--medium,
        .card .card__media--small {
          justify-content: center;
          margin: 0 auto; } }
    
    @media (min-width: 768px) {
      .card .card__media--small {
        flex: 0 0 25%;
        width: 25%; } }
    
    .card .card__media--small.media--circle {
      max-width: 150px; }
    
    @media (min-width: 768px) {
      .card .card__media--medium {
        flex: 0 0 37.5%;
        width: 37.5%; } }
    
    .card .card__media--medium img {
      align-self: start; }
    
    .card .card__media--medium.media--circle {
      width: 50%; }
    
    .card.card--stacked .card__media--small.media--circle {
      flex: unset;
      width: 40%; }
    
    @media (min-width: 768px) {
      .card.card--stacked .card__media--medium.media--circle {
        flex: unset;
        width: 60%; } }
    
    @media (min-width: 768px) and (min-width: 768px) {
      .card.card--media-left .card__media--large, .card.card--media-right .card__media--large {
        flex: 0 0 50%;
        width: 50%; } }
    
    @media (min-width: 768px) {
      .card.card--media-left .card__media--large.media--circle, .card.card--media-right .card__media--large.media--circle {
        flex: 0 0 37%;
        width: 37%; } }
    
    @media (min-width: 768px) {
      .card.card--media-left .card__media--medium.media--circle, .card.card--media-right .card__media--medium.media--circle {
        flex: 0 0 25%;
        width: 25%; } }
    
    /* Card left/right styles
     ========================================================================== */
    .card {
      /*
        &.card--media-right {
    
        }
        */ }
      @media (min-width: 768px) {
        .card--media-left, .card--media-right {
          flex-direction: row; } }
      @media (min-width: 768px) {
        .card--media-left.card--enclosed, .card--media-left[class*="bg-"]:not(.bg--white), .card--media-right.card--enclosed, .card--media-right[class*="bg-"]:not(.bg--white) {
          padding: 2rem; } }
      @media (min-width: 768px) {
        .card--media-left, .card--media-right {
          display: flex;
          flex-wrap: nowrap;
          flex-direction: unset;
          width: 100%;
          margin-bottom: 1.6rem; } }
      .card--media-left .card__title, .card--media-right .card__title {
        font-family: "Zilla Slab", "Zilla-fallback", serif;
        font-weight: 700; }
        @media (min-width: 768px) {
          .card--media-left .card__title, .card--media-right .card__title {
            padding: 0;
            margin: 0 0 0.325rem; } }
      @media (min-width: 768px) {
        .card--media-left .card__media + .card__body {
          padding: 0 0 1.05rem 2rem; } }
      .card--media-right.card--enclosed .card__media + .card__body {
        padding: 2rem; }
        @media (min-width: 768px) {
          .card--media-right.card--enclosed .card__media + .card__body {
            padding: 0 2rem 1.05rem 0; } }
      @media (min-width: 768px) {
        .card--media-right .card__media + .card__body {
          padding: 0 2rem 1.05rem 0; } }
      @media (min-width: 768px) {
        .card--media-right {
          flex-direction: row-reverse; } }
      @media (min-width: 768px) {
        .card--media-right.card, .card--media-right.card--enclosed {
          flex-direction: row-reverse; } }
    
    /* Background color adjustments
     ========================================================================== */
    [class*="bg-"] .card.card--stacked[class*="bg-"] .card__body,
    .card.card--stacked[class*="bg-"]:not([class*="bg--white"]) .card__body {
      padding: 2rem; }
    
    .card.card--enclosed[class*="bg--white"], .card.card--enclosed[class*="bg--gray"], .card.card--enclosed[class*="bg--gold"] {
      border: 1px solid rgba(0, 0, 0, 0.125); }
      [class*="bg-"] .card.card--enclosed[class*="bg--white"], [class*="bg-"] .card.card--enclosed[class*="bg--gray"], [class*="bg-"] .card.card--enclosed[class*="bg--gold"] {
        border: 1px solid rgba(0, 0, 0, 0.125); }
    
    [class*="bg--white"] .card.card--enclosed,
    [class*="bg--gray"] .card.card--enclosed,
    [class*="bg--gold"] .card.card--enclosed {
      border: 1px solid rgba(0, 0, 0, 0.125); }
    
    [class*="bg--black"] .card.card--enclosed {
      border-color: rgba(255, 255, 255, 0.325); }
    
    .card:not([class*="bg-"]) {
      border-color: rgba(0, 0, 0, 0.125); }
    
    .card[class*="bg--black"] .bttn--sans-serif {
      border-color: rgba(255, 255, 255, 0.425); }
    
    [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.6 KB
  • Content:
    @import '../../assets/scss/variables';
    @import '../../assets/scss/utilities';
    @import '_card-mixins.scss';
    /* Base card styles
       ========================================================================== */
    .card {
      @include card;
    
      &--enclosed {
        @include card-enclosed;
      }
    
      &--stacked {
        &.card--enclosed {
          .card__body {
            padding: 2rem;
          }
          .card__media + .card__body {
            padding: 2rem;
          }
        }
        .card__body {
          padding: 0;
        }
        .card__media + .card__body {
          padding: 2rem 0 0;
          @include breakpoint(sm) {
            padding: 2rem 0 0;
          }
        }
      }
    
      &--media-left,
      &--media-right {
    
        .card__body {
          padding: 0;
          @include breakpoint(sm) {
            flex: 0 1 100%;
          }
          min-height: 1px;
        }
    
        .card__media + .card__body {
          padding: 2rem 0 0;
          @include breakpoint(sm) {
            padding: 0;
          }
        }
    
        &[class*="bg-"] {
          .card__body {
            padding: 2rem;
            @include breakpoint(sm) {
              padding: 0;
            }
          }
        }
    
        &.card--enclosed {
          .card__body {
            padding: 2rem;
            @include breakpoint(sm) {
              padding: 0;
            }
          }
        }
      }
    
      &--centered {
        text-align: center;
      }
    
      &__title {
        @include card-header;
    
        &.headline {
          font-size: 1.5rem;
        }
    
        &:focus-within ~ .bttn {
          background-position: 0;
          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: 0 -20px;
        background-size: 200% 200%;
        transition: all 0.25s ease-in;
    
        &:after {
          content: "";
          transform: translate(-50%) scaleX(0);
          transition: transform 0.3s ease-in-out;
        }
    
        &:focus,
        &:hover {
          &:after {
            transform: translate(-50%, 0) scaleX(1);
          }
        }
      }
    
      p + .btn,
      p + .bttn {
        margin-top: $md;
      }
    
      &__subtitle + .btn,
      &__subtitle + .bttn,
      &__subtitle + p {
        margin-top: $sm;
      }
    
      &__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;
      }
      // @todo remove card__date class in 4.x branch.
      &__date,
      &__meta {
        font-family: $font-family-sans-serif;
        font-size: 1.1rem;
        line-height: 1.4;
        font-weight: $font-weight-normal;
        .fas {
          margin-right: .3rem;
        }
      }
      // @todo remove card__label class in 4.x branch.
      &__label {
        font-family: "Zilla Slab", serif;
        font-size: 1.2rem;
        font-weight: 400;
        padding-left: 20px;
        line-height: 1.3;
        margin-top: .125rem;
    
        .fas,
        .svg-inline--fa {
          opacity: 0.6;
          padding-right: $xsm;
          font-size: 1rem;
          line-height: 1.2;
          position: absolute;
          margin-left: -20px;
        }
    
        .svg-inline--fa {
          width: 17px;
        }
      }
    }
    /* Margin and padding adjustments for media--circle
       ========================================================================== */
    .card {
      // Adjust margin and padding for stacked circle if there is a background section color
      [class*="bg-"] & {
        &.card--stacked[class*="bg-"] {
          .media--circle {
            margin-top: 2rem;
    
            &.card__media--large {
              padding: 0 2rem;
            }
          }
        }
      }
    
      &--media-left,
      &--media-right,
      &--stacked {
        // Add padding if large circle stacked is enclosed or has bg color
        .media--circle.card__media--large {
          padding: 0 2rem;
        }
    
        &[class*="bg-"] {
          .media--circle {
            margin-top: 2rem;
            @include breakpoint(sm) {
              margin-top: 0;
            }
          }
        }
      }
      // override the above rule to remove left/right padding at sm breakpoint
      &--media-left,
      &--media-right {
        .media--circle.card__media--large {
          @include breakpoint(sm) {
            padding: 0;
          }
        }
      }
      // override the above rule for stacked
      &--stacked {
        &[class*="bg-"] {
          .media--circle {
            margin-top: 2rem;
          }
        }
      }
    
      &--enclosed {
        &.card--media-left,
        &.card--media-right,
        &.card--stacked {
          .media--circle {
            margin-top: 2rem;
          }
        }
        // remove top margin for left/right above sm breakpoint
        &.card--media-left,
        &.card--media-right {
          .media--circle {
            @include breakpoint(sm) {
              margin-top: 0;
            }
          }
        }
      }
    }
    /* Card media styles
       ========================================================================== */
    .card {
      .card__media--large,
      .card__media--medium,
      .card__media--small {
        margin-left: auto;
        margin-right: auto;
        @include breakpoint(sm) {
          justify-content: center;
          margin: 0 auto;
        }
      }
    
      .card__media--small {
        @include card-media-small;
    
        &.media--circle {
          max-width: 150px;
        }
      }
    
      .card__media--medium {
        @include card-media-medium;
    
        img {
          align-self: start;
        }
    
        &.media--circle {
          width: 50%;
        }
      }
      // Stacked only
      &.card--stacked {
        .card__media--small {
          &.media--circle {
            flex: unset;
            width: 40%;
          }
        }
        .card__media--medium {
          &.media--circle {
            @include breakpoint(sm) {
              flex: unset;
              width: 60%;
            }
          }
        }
      }
      // Left/right only
      &.card--media-left,
      &.card--media-right {
        .card__media--large {
          @include breakpoint(sm) {
            @include card-media-large;
          }
    
          &.media--circle {
            @include breakpoint(sm) {
              flex: 0 0 37%;
              width: 37%;
            }
          }
        }
    
        .card__media--medium {
          &.media--circle {
            @include breakpoint(sm) {
              flex: 0 0 25%;
              width: 25%;
            }
          }
        }
      }
    }
    /* Card left/right styles
     ========================================================================== */
    .card {
      &--media-left,
      &--media-right {
    
        @include breakpoint(sm) {
          flex-direction: row;
        }
        &.card--enclosed,
        &[class*="bg-"]:not(.bg--white) {
          @include breakpoint(sm) {
            padding: 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;
            }
          }
        }
    
        @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;
          }
        }
      }
      /*
        &.card--media-right {
    
        }
        */
      &--media-left {
        .card__media+.card__body {
          // padding: 2rem 0 0;
          @include breakpoint(sm) {
            padding: 0 0 $md 2rem;
          }
        }
      }
    
      &--media-right {
    
        &.card--enclosed {
          .card__media+.card__body {
            padding: 2rem;
            @include breakpoint(sm) {
              padding: 0 2rem $md 0;
            }
          }
        }
    
        .card__media+.card__body {
          @include breakpoint(sm) {
            padding: 0 2rem $md 0;
          }
        }
        @include breakpoint(sm) {
          flex-direction: row-reverse;
        }
    
        &.card,
        &.card--enclosed {
          @include breakpoint(sm) {
            flex-direction: row-reverse;
          }
        }
      }
    }
    /* Background color adjustments
     ========================================================================== */
    
    // set padding if background color is different from card color
    [class*="bg-"] .card.card--stacked[class*="bg-"],
    .card.card--stacked[class*="bg-"]:not([class*="bg--white"]) {
      .card__body {
        padding: 2rem;
      }
    }
    // set card enclosed borders to override defaults set in background.scss
    .card.card--enclosed {
      &[class*="bg--white"],
      &[class*="bg--gray"],
      &[class*="bg--gold"] {
        [class*="bg-"] & {
          border: 1px solid rgba(0, 0, 0, 0.125);
        }
        border: 1px solid rgba(0, 0, 0, 0.125);
      }
      [class*="bg--white"] &,
      [class*="bg--gray"] &,
      [class*="bg--gold"] & {
        border: 1px solid rgba(0, 0, 0, 0.125);
      }
      [class*="bg--black"] & {
        border-color: rgba(255,255,255,.325);
      }
    }
    
    // Border color adjustments
    .card:not([class*="bg-"]) {
      border-color: rgba(0,0,0,.125);
    }
    
    .card[class*="bg--black"] {
      .bttn--sans-serif {
        border-color: rgba(255,255,255,.425);
      }
    }
    
    // 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;
      }
    }
    // Cards within sections with background colors
    [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: 9.4 KB