There's a new version of UIDS!

UIDS - UI Design System

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: Horizontal collection

Component Preview 
<div class="card__wrapper">

    <div class="card click-container card--media-left card__row">
        <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/events-01.jpg" alt="Alt Text">
        </div>

        <div class="card__body">
            <h2 class="headline card__title">
                <a href="https://uiowa.edu/" class="click-target">
                    <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                </a>
            </h2>

            <div class="card__details">
                <div class="card__subtitle">Card Subtitle</div>
                <div class="card__meta">
                    June 14, 1984
                </div>
                <div class="card__meta">
                    <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 aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                View Story
                <i class="fas fa-arrow-right"></i>
            </div>
        </div>
    </div>

    <div class="card click-container card--media-left card__row">
        <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/events-01.jpg" alt="Alt Text">
        </div>

        <div class="card__body">
            <h2 class="headline card__title">
                <a href="https://uiowa.edu/" class="click-target">
                    <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                </a>
            </h2>

            <div class="card__details">
                <div class="card__subtitle">Card Subtitle</div>
                <div class="card__meta">
                    June 14, 1984
                </div>
                <div class="card__meta">
                    <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 aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                View Story
                <i class="fas fa-arrow-right"></i>
            </div>
        </div>
    </div>

    <div class="card click-container bg--gray card--media-left card__row">
        <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/events-01.jpg" alt="Alt Text">
        </div>

        <div class="card__body">
            <h2 class="headline card__title">
                <a href="https://uiowa.edu/" class="click-target">
                    <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                </a>
            </h2>

            <div class="card__details">
                <div class="card__subtitle">Card Subtitle</div>
                <div class="card__meta">
                    June 14, 1984
                </div>
                <div class="card__meta">
                    <i class="fas fa-map-marker-alt"></i>
                    Carver-Hawkeye Arena
                </div>
            </div>

            <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
            <blockquote>
                <p>Blockquote Text</p>
            </blockquote>
            <h2>Heading 2</h2>
            <h3>Heading 3</h3>
            <h4>Heading 4</h4>
            <h6>Heading 6</h6>

            <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                View Story
                <i class="fas fa-arrow-right"></i>
            </div>
        </div>
    </div>

</div>

<style>
    @media (min-width: 855px) {
        .card__row {
            margin-right: 1.6rem;
            margin-bottom: 0;
            margin-left: 1.6rem
        }

        .card__row:first-of-type {
            margin-left: 0
        }

        .card__row:last-of-type {
            margin-right: 0
        }
    }

    .card__wrapper {
        margin: 1.25rem 1.25rem
    }

    @media (min-width: 855px) {
        .card__wrapper {
            padding: 1.25rem 3rem;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex
        }
    }

    // ie11
    @media all and (-ms-high-contrast: none),
    (-ms-high-contrast: active) {
        .card__body {
            flex: auto !important;
        }
    }
</style>
  • 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: var(--brand-secondary); }
  .card .bttn {
    background-image: linear-gradient(to bottom, #ffffff00 0%, #ffffff00 90%, var(--brand-primary) 90%, var(--brand-primary) 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: var(--brand-primary); }

.card[class*="bg--white"] .bttn--outline {
  border-color: var(--brand-primary); }

@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%, $primary 90%, $primary 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