Fractal Starter
Project version : 0.1.2
<section class="section-card-section">
    <div class="container">

        <div class="wrapper wrapper--four">
            <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">
                        <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">
                        <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">
                        <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">
                        <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">
                        <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">
                        <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">
                        <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">
                        <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">
                        <img src="https://source.unsplash.com/random" alt="" />
                        <h3 class="h4">Sonorisation</h3>
                    </div>
                </a>
            </article>
        </div>
    </div>
</section>
<section class="section-card-section">
   <div class="container">
      {{#if section_card_section.title }}
         <h3>{{section_card_section.title}}</h3>
      {{/if}}

      <div class="wrapper wrapper--four">
         {{#each section_card_section.items }}
            {{> @card-subsection card_section=this }}
         {{/each}}
      </div>
   </div>
</section>
{
  "section_card_section": {
    "items": [
      {
        "title": "Sonorisation",
        "thumbnail": "<img src=\"https://source.unsplash.com/random\" alt=\"\" />"
      },
      {
        "title": "Sonorisation",
        "thumbnail": "<img src=\"https://source.unsplash.com/random\" alt=\"\" />"
      },
      {
        "title": "Sonorisation",
        "thumbnail": "<img src=\"https://source.unsplash.com/random\" alt=\"\" />"
      },
      {
        "title": "Sonorisation",
        "thumbnail": "<img src=\"https://source.unsplash.com/random\" alt=\"\" />"
      },
      {
        "title": "Sonorisation",
        "thumbnail": "<img src=\"https://source.unsplash.com/random\" alt=\"\" />"
      },
      {
        "title": "Sonorisation",
        "thumbnail": "<img src=\"https://source.unsplash.com/random\" alt=\"\" />"
      },
      {
        "title": "Sonorisation",
        "thumbnail": "<img src=\"https://source.unsplash.com/random\" alt=\"\" />"
      },
      {
        "title": "Sonorisation",
        "thumbnail": "<img src=\"https://source.unsplash.com/random\" alt=\"\" />"
      },
      {
        "title": "Sonorisation",
        "thumbnail": "<img src=\"https://source.unsplash.com/random\" alt=\"\" />"
      },
      {
        "title": "Sonorisation",
        "thumbnail": "<img src=\"https://source.unsplash.com/random\" alt=\"\" />"
      }
    ]
  }
}
  • Content:
    .section-card-section {
       // .wrapper{
       //    display: flex;
       //    flex-flow: row wrap;
       //    margin-left: calc((var(--gap, 1rem) / 2) * -1);
       //    margin-right: calc((var(--gap, 1rem) / 2) * -1);
          
       //    article{
       //       flex: 1 0 calc(100% - var(--gap, 1rem));
       //       margin: calc(var(--gap, 1rem) / 2);
       //       max-width: calc(var(--flex-wmax-four, 100%) - var(--gap, 1rem));
       //    }
       // }
    }
  • URL: /components/raw/section-card-subsection/section-card-subsection.scss
  • Filesystem Path: components/06-components/10-sections/03-section-card-subsection/section-card-subsection.scss
  • Size: 432 Bytes

There are no notes for this item.