Fractal Starter
Project version : 0.1.2

Card Subsection 

<article class="card-subsection">
    <a href="#" class="outer-box">
        <div class="inner-box">
            <img src="https://source.unsplash.com/random" alt="" />
            <h3 class="h4">Sonorisation</h3>
        </div>
    </a>
</article>
 
<article class="card-subsection">
   <a href="#" class="outer-box">
      <div class="inner-box">
         {{{card_section.thumbnail}}}
         <h3 class="h4">{{card_section.title}}</h3>
      </div>
   </a>
</article>
 
{
  "card_section": {
    "title": "Sonorisation",
    "thumbnail": "<img src=\"https://source.unsplash.com/random\" alt=\"\" />"
  }
}
  • Content: 
    .card-subsection {
   .outer-box {
      display: block;
      max-width: 500px;
      @include aspect-ratio(1, 1);
      border-radius: $border-radius-card $border-radius-card 0 $border-radius-card;
      overflow: hidden;
      z-index: 5;

      .inner-box {
         display: flex;
         align-items: flex-end;
         padding: 1rem;
         @include transition;

         @include mediaWQuery($media-query-m) {
            padding: 1.5rem 2rem;
         }

         > img {
            @include absPosition($top: 0, $left: 0);
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;
            @include transition;
            z-index: -2;
         }

         > h3 {
            margin: 0;
            padding: 0;
            color: $c-white;
            text-transform: uppercase;
            font-size: 1.3em;
            line-height: $font-lineheight-s;
         }

         &::after {
            content: '';
            @include absPosition($top:0, $left: 0);
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg,rgba(56, 20, 68, 0) 0%, rgba(29, 12, 40, .9) 100%);
            z-index: -1;
         }
      }

      &:hover, &:focus {
         box-shadow: 0 1rem 2rem rgba(0,0,0,.2);

         .inner-box {
            padding-bottom: 2rem;
            transform: scale(1.1);
            transform-origin: center bottom;

            > img {
               transform: scale(1.1);
            }
         }
      }
   }

   @include mediaWQuery($media-query-s) {
      &:nth-child(2n) .outer-box { border-radius: $border-radius-card $border-radius-card $border-radius-card 0 }
   }

   @include mediaWQuery($media-query-m) {
      &:nth-child(2n) .outer-box { border-radius: $border-radius-card $border-radius-card 0 $border-radius-card }
      &:nth-child(3n) .outer-box { border-radius: $border-radius-card $border-radius-card $border-radius-card 0 }
   }

   @include mediaWQuery($media-query-l) {
      &:nth-child(2n) .outer-box,
      &:nth-child(3n) .outer-box { border-radius: $border-radius-card $border-radius-card 0 $border-radius-card }
      &:nth-child(4n) .outer-box { border-radius: $border-radius-card $border-radius-card $border-radius-card 0 }
   }
}
  • URL: /components/raw/card-subsection/card-subsection.scss
  • Filesystem Path: components/06-components/03-cards/03-card-subsection/card-subsection.scss
  • Size: 2.3 KB

There are no notes for this item.