JMT Alimentation Animal
Project version : 1.0.3

Section Brands 

<section class="section-brands container">
    <h3>Nos marques pour chien</h3>

    <ul class="list--unstyled">
        <li>
            <article class="card card-partner" data-category="chien">
                <a href="">
      <img src="/img/logo-beyond.png" alt="" />
      <h4 class="alt--font">Purina</h4>
   </a>
            </article>
        </li>
        <li>
            <article class="card card-partner" data-category="chien">
                <a href="">
      <img src="/img/logo-beyond.png" alt="" />
      <h4 class="alt--font">Purina</h4>
   </a>
            </article>
        </li>
        <li>
            <article class="card card-partner" data-category="chien">
                <a href="">
      <img src="/img/logo-beyond.png" alt="" />
      <h4 class="alt--font">Purina</h4>
   </a>
            </article>
        </li>
        <li>
            <article class="card card-partner" data-category="chien">
                <a href="">
      <img src="/img/logo-beyond.png" alt="" />
      <h4 class="alt--font">Purina</h4>
   </a>
            </article>
        </li>
        <li>
            <article class="card card-partner" data-category="chien">
                <a href="">
      <img src="/img/logo-beyond.png" alt="" />
      <h4 class="alt--font">Purina</h4>
   </a>
            </article>
        </li>
        <li>
            <article class="card card-partner" data-category="chien">
                <a href="">
      <img src="/img/logo-beyond.png" alt="" />
      <h4 class="alt--font">Purina</h4>
   </a>
            </article>
        </li>
    </ul>

    <div class="button-container button-container--centered">
        <a href="" class="button button--primary button--shadow">Voir toutes nos marques pour chien</a>
    </div>
</section>
 
<section class="section-brands container">
    <h3>Nos marques pour chien</h3>

    <ul class="list--unstyled">
        <li>{{> @card-partner }}</li>
        <li>{{> @card-partner }}</li>
        <li>{{> @card-partner }}</li>
        <li>{{> @card-partner }}</li>
        <li>{{> @card-partner }}</li>
        <li>{{> @card-partner }}</li>
    </ul>

    <div class="button-container button-container--centered">
        <a href="" class="button button--primary button--shadow">Voir toutes nos marques pour chien</a>
    </div>
</section>
 
{
  "card_partner": {
    "marque": "Purina",
    "logo": "/img/logo-beyond.png",
    "category": "chien"
  }
}
  • Content: 
    .section-brands {
    padding: $margin-l $margin-m;
    @include mediaWQuery($media-query-m) {
        padding: $margin-xl $margin-m $margin-xxl;
    }

    > ul {
        display: flex;
        flex-wrap: wrap;
    }

    > ul > li {
        width: 100%;

        @include mediaWQuery($media-query-xs) {
            width: calc(100% / 2);
        }

        @include mediaWQuery($media-query-m) {
            width: calc(100% / 3);
        }

        @include mediaWQuery($media-query-l) {
            width: calc(100% / 6);
        }
    }

    .card-partner {
        > a { border: 0 }

        h4 {
            margin: 0;
            font-size: 0;
            text-indent: 5000px;
        }
    }
}
  • URL: /components/raw/section-brands/section-brands.scss
  • Filesystem Path: components/06-components/10-sections/03-section-brands/section-brands.scss
  • Size: 702 Bytes

There are no notes for this item.