<article class="media-card media-card--red">
    <div class="media-card__content">
        <header class="media-card__header">
            <h3 class="media-card__heading">Rachel Rank</h3>
            <span class="media-card__subtitle">Chief Operating Officer</span>
        </header>
        <p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipisicing elit</a>. Harum quod vel voluptas recusandae dignissimos fugit deserunt molestiae, quae, blanditiis autem nesciunt odio consectetur error facilis. Ipsum, maiores cumque quo atque. Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae magni. </p>
    </div>

    <div class="media-card__image-wrapper">
        <img src="https://www.threesixtygiving.org/wp-content/uploads/47319360032_51d21156a2_c.jpg" class="media-card__image" />
    </div>
</article>
<article class="media-card media-card--red">
  <div class="media-card__content">
    <header class="media-card__header">
      <h3 class="media-card__heading">Rachel Rank</h3>
      <span class="media-card__subtitle">Chief Operating Officer</span>
    </header>
    <p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipisicing elit</a>. Harum quod vel voluptas recusandae dignissimos fugit deserunt molestiae, quae, blanditiis autem nesciunt odio consectetur error facilis. Ipsum, maiores cumque quo atque. Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae magni. </p>
  </div>
  
  <div class="media-card__image-wrapper">
    <img src="https://www.threesixtygiving.org/wp-content/uploads/47319360032_51d21156a2_c.jpg" class="media-card__image" />
  </div>
</article>
/* No context defined. */
  • Content:
    .media-card {
      --media-card-text-hsl: var(--base-hsl);
      --media-card-color-hsl: ;
      
      background-color: hsla(var(--white-hsl), 1);
      box-shadow: 0px 4px 8px hsla(var(--base-hsl), .15);
      display: flex;
      position: relative;
    
      &:before {
        content: '';
        background-color: hsla(var(--media-card-color-hsl, transparent), 1);
        width: 4px;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }
    
      &__header {
        display: flex;
        padding-bottom: 16px;
        flex-direction: column;
    
        @include breakpoint($medium) { 
          flex-direction: row; 
          align-items: baseline;
        }
      }
    
      &__heading,
      &__subtitle,
      &__links {
        line-height: 1;
        margin: 0;
        @include breakpoint($medium-max) { margin-bottom: 8px; } 
      }
    
      &__heading { 
        padding-right: 16px; 
        font-size: 1.5rem;
        font-weight: 400;
        line-height: 1.4;
      }
    
      &__subtitle {
        flex: 1;
        color: hsla(var(--media-card-text-hsl), 1);
        font-weight: 400;
      }
    
      &__links {
        margin-bottom: -4px;
      }
    
      &__link,
      &__link > svg {
        max-height: 24px;
        max-width: 24px;
        fill: hsla(var(--base-hsl), .4);
        &:hover { fill: hsla(var(--orange-dark-hsl), 1); }
      }
    
      &__link + &__link { margin-left: 12px; }
      
      &__content { 
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1;
        padding: 48px;
        @include breakpoint($large) { padding: 32px 48px 32px 48px; }
    
        @media print {
          padding: 0;
          display: block;
        }
      }
    
      &__content_no_image { 
        justify-content: center;
        padding: 20px;
        width: 100vw;
      }
       
      &__image-wrapper {
        width: 30%;
        max-width: 320px;
        min-height: 320px;
      }
    
      div.media-card__image {
        height: 0;
        width: 100%;
        padding-bottom: 100%;
        background-position: center;
        background-size: cover;
      }
    
      img.media-card__image {
        height: 100%;
        width: 100%;
        object-fit: cover;
      }
    
      &__byline {
        font-size: .8rem;
        font-style: italic;
        font-weight: 400;
        color: hsla(var(--base-hsl), 1);
      }
    
      &__byline > a { 
        color: hsla(var(--base-hsl), 1); 
        text-decoration: underline;
      }
    
      &__category-tags {
        margin-bottom: .5rem;
      }
    
      &__category-tag {
        padding: .2rem .5rem;
        background-color: hsla(var(--media-card-color-hsl),.1);
        color: hsla(var(--media-card-text-hsl), 1);
        border-radius: 2px;
    
        & + & { margin-left: .3rem; }
      }
    
      &__box_container {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
      }
    
      &__box {
        padding-top: 5px;
        padding-bottom: 20px;
        padding-left: 15px;
        padding-right: 15px;
        width: 33%;
        font-size: 15px;
        text-align: center;
        @include breakpoint($large) {
          width: 20%;
        }
      }
    }
    
    .media-card--teal {
      --media-card-text-hsl: var(--teal-dark-hsl);
      --media-card-color-hsl: var(--teal-hsl);
    }
    
    .media-card--orange { 
      --media-card-text-hsl: var(--orange-dark-hsl);
      --media-card-color-hsl: var(--orange-hsl); 
    }
    
    .media-card--yellow {
      --media-card-text-hsl: var(--yellow-dark-hsl);
      --media-card-color-hsl: var(--yellow-hsl); 
    }
    
    .media-card--red { 
      --media-card-text-hsl: var(--red-hsl);
      --media-card-color-hsl: var(--red-hsl);
    }
    
    .media-card--base { 
      --media-card-text-hsl: var(--base-hsl);
      --media-card-color-hsl: var(--base-hsl);
    }
    
    .media-card--self-contained { margin-right: 8px; }
    
    .media-card--minimal {
      .media-card__content {
        padding: 0;
        @include breakpoint($large) { padding: 0; }
      }
    }
    
  • URL: /components/raw/media-card/media-card.scss
  • Filesystem Path: src/components/04-modules/media-card/media-card.scss
  • Size: 3.5 KB

No notes defined.