Fractal Starter
Project version : 0.1.2

Card News 

<article class="card card-news">
    <a href="#" title="RCF NX15">
      <img src="https://source.unsplash.com/random" alt=""/>

      <div class="card-news__content">
         <h2>RCF NX15</h2>
         <span>Lire cette actualité</span>
      </div>
   </a>
</article>
 
<article class="card card-news">
   <a href="{{card_news.link}}" title="{{card_news.title}}">
      {{{card_news.thumbnail}}}

      <div class="card-news__content">
         <h2>{{card_news.title}}</h2>
         <span>Lire cette actualité</span>
      </div>
   </a>
</article>
 
{
  "card_news": {
    "title": "RCF NX15",
    "link": "#",
    "thumbnail": "<img src=\"https://source.unsplash.com/random\" alt=\"\"/>",
    "content": "<p>Le retour de scène NX 15-SMA est équipé d'un nouvel amplificateur numérique de 700 watts et d'un nouvea transducteur 15\" coaxial à moteur néodyme qui garantissent une qualité et une définition son sans égal.</p>"
  }
}
  • Content: 
    .card-news {
   margin-bottom: $margin-l;
   
   > a {
      position: relative;
      height: 0;
      padding-top: 40%;
      display: block;
      text-decoration: none;
      padding-bottom: $margin-m;

      > img {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         object-fit: cover;
         z-index: 3;
      }

      .card-news__content {
         position: absolute;
         bottom: -1rem;
         left: 1rem;
         width: calc(100% - 2rem);
         padding-top: 1rem;
         margin: 0;
         border-top: 1px solid $c-white;
         z-index: 6;
         transition: .3s ease;
         border-bottom: 1px solid transparent;
         
         h3 {
            margin-bottom: 0;
            color: $c-white;
            transition: .3s ease;
         }
            
         span {
            font-size: rem(16);
            font-family: $font-primary;
            color: $c-white;
            opacity: 0;
            transition: .3s ease;
         }
      }

      &::before {
         content: '';
         position: absolute;
         display: block;
         width: 100%;
         height: 100%;
         left: 0;
         top: 0;
         background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
         opacity: .8;
         z-index: 4;
         transition: .3s ease;
      }

      &::after {
         content: '';
         position: absolute;
         display: block;
         width: 100%;
         height: 100%;
         left: 0;
         top: 0;
         background: linear-gradient(180deg, #A79360 0%, #71591C 100%);
         opacity: 0;
         z-index: 5;
         transition: .3s ease;
      }

      &:hover, &:focus {
         box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);

         .card-news__content {
            bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid $c-white;
            span { opacity: 1 }
         }

         &::before { opacity: 0 }
         &::after { opacity: .8 }
      }
   }
}
  • URL: /components/raw/card-news/card-news.scss
  • Filesystem Path: components/06-components/03-cards/01-card-news/card-news.scss
  • Size: 2.1 KB

There are no notes for this item.