<article class="media-card media-card--teal">
    <div class="media-card__content">
        <header class="media-card__header">
            <h3 class="media-card__heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
        </header>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quod vel voluptas recusandae dignissimos fugit deserunt molestiae, quae, blanditiis autem nesciunt odio consectetur error facilis.</p>
        <div class="media-card__byline">Written by Rachel Rank on October 30, 2019.</div>
    </div>

    <div class="media-card__image-wrapper">
        <div class="media-card__image" style="background-image: url(https://www.threesixtygiving.org/wp-content/uploads/47319360032_51d21156a2_c.jpg)"></div>
    </div>

</article>
<article class="media-card media-card--teal">
  <div class="media-card__content">
    <header class="media-card__header">
      <h3 class="media-card__heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
    </header>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quod vel voluptas recusandae dignissimos fugit deserunt molestiae, quae, blanditiis autem nesciunt odio consectetur error facilis.</p>
    <div class="media-card__byline">Written by Rachel Rank on October 30, 2019.</div>
  </div>
  
  <div class="media-card__image-wrapper">
    <div class="media-card__image" style="background-image: url(https://www.threesixtygiving.org/wp-content/uploads/47319360032_51d21156a2_c.jpg)"></div>  
  </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.