JMT Alimentation Animal
Project version : 1.0.3

Loud Category 

<div class="loud-category container">
    <div class="loud-category__thumbnail">
        <img src="https://source.unsplash.com/random/?dog" alt="" />
    </div>

    <div class="loud-category__breadcrumb">
        <nav class="nav-breadcrumb">
            <p>
                <span>
               <span>
                  <a href="#">Nos produits</a>
                  <i class="icon icon--chevron-right-red"></i>
                  <span class="breadcrumb_last" aria-current="page">Chiens</span>
                </span>
                </span>
            </p>
        </nav>
    </div>

    <div class="loud-category__description">
        <h1>Chien</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac ex nec orci varius suscipit. Sed sed enim eu erat volutpat venenatis a sed quam. Nullam est velit, faucibus in rhoncus efficitur, eleifend porta nunc.</p>
    </div>

    <nav>
        <strong>Rubriques</strong>
        <ul class="loud-category__listing">
            <li><a href="#">Alimentation</a></li>
            <li><a href="#">Jouets</a></li>
            <li><a href="#">Promenade</a></li>
            <li><a href="#">Santé</a></li>
            <li><a href="#">Hygiène</a></li>
            <li><a href="#">Toilettage</a></li>
            <li><a href="#">Sécurité</a></li>
        </ul>
    </nav>
</div>
 
<div class="loud-category container">
   <div class="loud-category__thumbnail">
      <img src="{{loud_category.thumbnail}}" alt="" />
   </div>

   <div class="loud-category__breadcrumb">
      <nav class="nav-breadcrumb">
         <p>
            <span>
               <span>
                  <a href="#">Nos produits</a>
                  <i class="icon icon--chevron-right-red"></i>
                  <span class="breadcrumb_last" aria-current="page">Chiens</span>
               </span>
            </span>
         </p>
      </nav>
   </div>

   <div class="loud-category__description">
      <h1>{{loud_category.title}}</h1>
      {{{loud_category.description}}}
   </div>

   <nav>
      <strong>Rubriques</strong>
      <ul class="loud-category__listing">
         <li><a href="#">Alimentation</a></li>
         <li><a href="#">Jouets</a></li>
         <li><a href="#">Promenade</a></li>
         <li><a href="#">Santé</a></li>
         <li><a href="#">Hygiène</a></li>
         <li><a href="#">Toilettage</a></li>
         <li><a href="#">Sécurité</a></li>
      </ul>
   </nav>
</div>
 
{
  "loud_category": {
    "thumbnail": "https://source.unsplash.com/random/?dog",
    "title": "Chien",
    "description": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac ex nec orci varius suscipit. Sed sed enim eu erat volutpat venenatis a sed quam. Nullam est velit, faucibus in rhoncus efficitur, eleifend porta nunc.</p>",
    "rubriques": [
      {
        "title": "Alimentation",
        "link": "#"
      },
      {
        "title": "Jouets",
        "link": "#"
      },
      {
        "title": "Promenade",
        "link": "#"
      },
      {
        "title": "Santé",
        "link": "#"
      },
      {
        "title": "Hygiène",
        "link": "#"
      },
      {
        "title": "Toilettage",
        "link": "#"
      },
      {
        "title": "Sécurité",
        "link": "#"
      }
    ]
  }
}
  • Content: 
    .loud-category {
   /* ------------- */
   /* | 1. Layout | */
   /* ------------- */
   @include mediaWQuery($media-query-l) {
      &__description, > nav {
         width: 46%;
         display: inline-block;
      }

      @supports (display: flex) {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;

         &__thumbnail, &__breadcrumb {
            width: 100%;
            flex-basis: 100%;
         }
         &__description {
            width: 50% ;
            flex-basis: 50%;
         }

         > nav {
            width: 40%;
            flex-basis: 40%;
         }
      }
   }


   /* ------------ */
   /* | 2. Style | */
   /* ------------ */

   // 2.0. Components
   // margin-bottom: $margin-xl;

   // @include mediaWQuery($media-query-l) {
   //    margin-bottom: $margin-xxl;
   // }

   @include mediaWQuery($media-query-xl) {
      padding-top: $margin-xl;
   }

   // 2.1. Thumbnail
   &__thumbnail {
      position: relative;
      height: 0;
      padding-top: 370px;

      > img {
         position: absolute;
         top: 0;
         left: 0;
         object-fit: cover;
         width: calc(100% + 2rem);
         height: 100%;
         margin-left: -1rem;
         margin-right: -1rem;

         @include mediaWQuery($media-query-xl) {
            margin: 0;
            width: 100%;
         }
      }
   }

   // 2.2. Breadcrumbs
   &__breadcrumb {
      margin-bottom: $margin-m;
   }

   // 2.3. Description
   &__description {
      margin: $margin-l 0;

      h1 {
         margin: 0 0 $margin-s;
         line-height: 1;
      }

      @include mediaWQuery($media-query-l) { margin: 0 }
   }

   // 2.4. Rubriques
   > nav {
      > ul {
         padding: $margin-m;
         background: $c-brown-lightest;
         border-radius: $border-radius-m;

         > li { display: block }

         > li > a {
            padding: .1rem .5rem;
            color: $c-red;
            text-decoration: underline;
            transition: .2s ease;

            @include mediaWQuery($media-query-m) {
               font-size: rem(18);
            }

            &:hover, &:focus {
               text-decoration-color: transparent;
            }
         }
         
         @include mediaWQuery($media-query-s) { columns: 3 }
         @include mediaWQuery($media-query-m) { columns: 4 }
         @include mediaWQuery($media-query-l) { columns: 3 }
      }
   }
}
  • URL: /components/raw/loud-category/loud-category.scss
  • Filesystem Path: components/06-components/15-louds/02-loud-category/loud-category.scss
  • Size: 2.4 KB

There are no notes for this item.