Fractal Starter
Project version : 0.1.2

Card page: Default 

<article class="card card-section">
    <a href="#" title="Card Page" class="inner-box">
      <img src="https://source.unsplash.com/random" alt="" />

      <div class="card-section--inner">
         <h3 class="h2">Card Page</h3>
         <p>Des liens, des cards, une page</p>
      </div>
   </a>
</article>
 
<article class="card card-section">
   <a href="{{card_page.link}}" title="{{card_page.title}}" class="inner-box">
      {{{card_page.thumbnail}}}

      <div class="card-section--inner">
         <h3 class="h2">{{card_page.title}}</h3>
         {{{card_page.content}}}
      </div>
   </a>
</article>
 
{
  "card_page": {
    "title": "Card Page",
    "content": "<p>Des liens, des cards, une page</p>",
    "link": "#",
    "thumbnail": "<img src=\"https://source.unsplash.com/random\" alt=\"\" />"
  }
}
  • Content: 
    .card-section {
   @include aspect-ratio(16, 9);

   > a {
      border-radius: $border-radius-card $border-radius-card 0
         $border-radius-card;
      overflow: hidden;
      transform: translateZ(0);
      @include transition;

      > img {
         object-fit: cover;
         width: 100%;
         height: 100%;
      }

      .card-section--inner {
         position: absolute;
         bottom: 0;
         left: 0;
         padding: $padding-card-inner;
         color: $c-white;
         z-index: 3;
         transition: 0.2s ease;

         > h3 {
            line-height: 1;
            margin: 0;
            text-transform: uppercase;
            font-size: 2em;
            @include mediaWQuery($media-query-m) {
               font-size: 2.2em;
            }

            @include mediaWQuery($media-query-l) {
               font-size: 2.4em;
            }
         }

         > p {
            line-height: $font-lineheight-s;
            margin: 0;
            font-family: $font-primary;
            @include mediaWQuery($media-query-m) {
               font-size: $font-size-xl;
            }
         }
      }

      &::after {
         content: "";
         @include absPosition($top: 0, $right: false, $bottom: false, $left: 0);
         width: 100%;
         height: 100%;
         background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.3) 49.28%,
            #000000 100%
         );
         opacity: 0.9;
         transition: 0.3s ease-in-out;
         z-index: 2;
      }

      &:hover,
      &:focus {
         box-shadow: $box-shadow-card;
         &::after {
            opacity: 1;
         }
         .card-section--inner {
            transform: translateY(-10px);
         }
      }
   }

   @include mediaWQuery($media-query-s * 1.5) {
      &:nth-child(2) a {
         border-radius: $border-radius-card $border-radius-card
            $border-radius-card 0;
      }
      &:nth-child(3) a {
         border-radius: $border-radius-card 0 $border-radius-card
            $border-radius-card;
      }
      &:nth-child(4) a {
         border-radius: 0 $border-radius-card $border-radius-card
            $border-radius-card;
      }
   }
}
  • URL: /components/raw/card-section/card-section.scss
  • Filesystem Path: components/06-components/03-cards/02-card-section/card-section.scss
  • Size: 2.2 KB

There are no notes for this item.