PDJ Brandbox

col-three 

<section class="col-three">
    <div class="col-three__inner">
        <div class="col-three__content">
            <div class="col-three__item">
                <div class="col-three__item__inner">
                    <article class="snippet-c">
                        <div class="snippet-c__visual">
                            <div class="snippet-c__image">
                                <div class="video-player">
                                    <picture class="visual">
                                        <img data-sizes="auto" data-src="/graphics/DSI_Breda.jpg" class="lazyload" alt="">
                                    </picture>

                                    <span class="video-player__trigger">
                                        <span class="video-ID">agkb5TSjEmc</span>

                                        <span class="icon-play">
                                            <span class="icon-play__inner"></span>
                                            <span class="icon-play__icon">
                                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7.6 14">
                                                    <path fill="currentColor" d="M7.4,6.3l-5.6-6c-0.4-0.4-1-0.4-1.4,0C0.1,0.5,0,0.7,0,1v12c0,0.6,0.4,1,1,1c0.3,0,0.5-0.1,0.7-0.3l5.6-6C7.7,7.3,7.7,6.7,7.4,6.3z" />
                                                </svg>
                                            </span>
                                        </span>
                                    </span>
                                </div>

                            </div>
                        </div>

                        <div class="snippet-c__content">

                            <h4 class="snippet-c__heading heading">
                                Snippet heading
                            </h4>

                            <div class="snippet-c__description">
                                Description text explicabo asperiores, quidem excepturi veniam eos odio tenetur corporis! Aut quae quisquam vitae architecto, quasi esse incidunt. Ipsa nemo repellendus molestias. Doloremque.
                            </div>
                        </div>
                    </article>

                </div>
            </div>
            <div class="col-three__item">
                <div class="col-three__item__inner">
                    <article class="snippet-c">
                        <div class="snippet-c__visual">
                            <div class="snippet-c__image">
                                <div class="video-player">
                                    <picture class="visual">
                                        <img data-sizes="auto" data-src="/graphics/Ibiza_Blau_Music.jpg" class="lazyload" alt="">
                                    </picture>

                                    <span class="video-player__trigger">
                                        <span class="video-ID">agkb5TSjEmc</span>

                                        <span class="icon-play">
                                            <span class="icon-play__inner"></span>
                                            <span class="icon-play__icon">
                                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7.6 14">
                                                    <path fill="currentColor" d="M7.4,6.3l-5.6-6c-0.4-0.4-1-0.4-1.4,0C0.1,0.5,0,0.7,0,1v12c0,0.6,0.4,1,1,1c0.3,0,0.5-0.1,0.7-0.3l5.6-6C7.7,7.3,7.7,6.7,7.4,6.3z" />
                                                </svg>
                                            </span>
                                        </span>
                                    </span>
                                </div>

                            </div>
                        </div>

                        <div class="snippet-c__content">

                            <h4 class="snippet-c__heading heading">
                                Ipsa nemo repellendus molestias. Doloremque snippet heading.
                            </h4>

                            <div class="snippet-c__description">
                                Description text within a range 300 a 350 chars.
                            </div>
                        </div>
                    </article>

                </div>
            </div>
            <div class="col-three__item">
                <div class="col-three__item__inner">
                    <article class="snippet-c">
                        <div class="snippet-c__visual">
                            <div class="snippet-c__image">
                                <div class="video-player">
                                    <picture class="visual">
                                        <img data-sizes="auto" data-src="/graphics/Microfusa.jpg" class="lazyload" alt="">
                                    </picture>

                                    <span class="video-player__trigger">
                                        <span class="video-ID">agkb5TSjEmc</span>

                                        <span class="icon-play">
                                            <span class="icon-play__inner"></span>
                                            <span class="icon-play__icon">
                                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7.6 14">
                                                    <path fill="currentColor" d="M7.4,6.3l-5.6-6c-0.4-0.4-1-0.4-1.4,0C0.1,0.5,0,0.7,0,1v12c0,0.6,0.4,1,1,1c0.3,0,0.5-0.1,0.7-0.3l5.6-6C7.7,7.3,7.7,6.7,7.4,6.3z" />
                                                </svg>
                                            </span>
                                        </span>
                                    </span>
                                </div>

                            </div>
                        </div>

                        <div class="snippet-c__content">

                            <h4 class="snippet-c__heading heading">
                                Snippet heading
                            </h4>

                            <div class="snippet-c__description">
                                Description text within a range 300 a 350 chars. Ipsa nemo repellendus molestias. Doloremque, Aut quae quisquam vitae architecto, quasi esse incidunt. Explicabo asperiores, quidem excepturi veniam eos odio tenetur corporis! Aut quae quisquam vitae architecto, quasi esse incidunt. Ipsa nemo repellendus molestias. Doloremque.
                            </div>
                        </div>
                    </article>

                </div>
            </div>
            <div class="col-three__item">
                <div class="col-three__item__inner">
                    <article class="snippet-c">
                        <div class="snippet-c__visual">
                            <div class="snippet-c__image">
                                <div class="video-player">
                                    <picture class="visual">
                                        <img data-sizes="auto" data-src="/graphics/Music_Academy_Rimini.jpg" class="lazyload" alt="">
                                    </picture>

                                    <span class="video-player__trigger">
                                        <span class="video-ID">agkb5TSjEmc</span>

                                        <span class="icon-play">
                                            <span class="icon-play__inner"></span>
                                            <span class="icon-play__icon">
                                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7.6 14">
                                                    <path fill="currentColor" d="M7.4,6.3l-5.6-6c-0.4-0.4-1-0.4-1.4,0C0.1,0.5,0,0.7,0,1v12c0,0.6,0.4,1,1,1c0.3,0,0.5-0.1,0.7-0.3l5.6-6C7.7,7.3,7.7,6.7,7.4,6.3z" />
                                                </svg>
                                            </span>
                                        </span>
                                    </span>
                                </div>

                            </div>
                        </div>

                        <div class="snippet-c__content">

                            <h4 class="snippet-c__heading heading">
                                Snippet heading
                            </h4>

                            <div class="snippet-c__description">
                                Description text within a range 300 a 350 chars. Quasi esse incidunt. Explicabo asperiores, quidem excepturi veniam eos odio tenetur corporis! Aut quae quisquam vitae architecto, quasi esse incidunt. Ipsa nemo repellendus molestias. Doloremque.
                            </div>
                        </div>
                    </article>

                </div>
            </div>
            <div class="col-three__item">
                <div class="col-three__item__inner">
                    <article class="snippet-c">
                        <div class="snippet-c__visual">
                            <div class="snippet-c__image">
                                <div class="video-player">
                                    <picture class="visual">
                                        <img data-sizes="auto" data-src="/graphics/Musiluz.jpg" class="lazyload" alt="">
                                    </picture>

                                    <span class="video-player__trigger">
                                        <span class="video-ID">agkb5TSjEmc</span>

                                        <span class="icon-play">
                                            <span class="icon-play__inner"></span>
                                            <span class="icon-play__icon">
                                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7.6 14">
                                                    <path fill="currentColor" d="M7.4,6.3l-5.6-6c-0.4-0.4-1-0.4-1.4,0C0.1,0.5,0,0.7,0,1v12c0,0.6,0.4,1,1,1c0.3,0,0.5-0.1,0.7-0.3l5.6-6C7.7,7.3,7.7,6.7,7.4,6.3z" />
                                                </svg>
                                            </span>
                                        </span>
                                    </span>
                                </div>

                            </div>
                        </div>

                        <div class="snippet-c__content">

                            <h4 class="snippet-c__heading heading">
                                Snippet heading
                            </h4>

                            <div class="snippet-c__description">
                                Description text within a range 300 a 350 chars. Ipsa nemo repellendus molestias.
                            </div>
                        </div>
                    </article>

                </div>
            </div>
        </div>
    </div>
</section>
 
<section class="col-three">
  <div class="col-three__inner">
    <div class="col-three__content">
      {{#each snippets }}
      <div class="col-three__item">
        <div class="col-three__item__inner">
          {{render '@snippet-c' this }}
        </div>
      </div>
      {{/each}}
    </div>
  </div>
</section>
 
snippets:
  - video:
      image:
        src: /graphics/DSI_Breda.jpg
      video:
        id: agkb5TSjEmc
    heading: Snippet heading
    description: >-
      Description text explicabo asperiores, quidem excepturi veniam eos odio
      tenetur corporis! Aut quae quisquam vitae architecto, quasi esse incidunt.
      Ipsa nemo repellendus molestias. Doloremque.
  - video:
      image:
        src: /graphics/Ibiza_Blau_Music.jpg
      video:
        id: agkb5TSjEmc
    heading: Ipsa nemo repellendus molestias. Doloremque snippet heading.
    description: Description text within a range 300 a 350 chars.
  - video:
      image:
        src: /graphics/Microfusa.jpg
      video:
        id: agkb5TSjEmc
    heading: Snippet heading
    description: >-
      Description text within a range 300 a 350 chars. Ipsa nemo repellendus
      molestias. Doloremque, Aut quae quisquam vitae architecto, quasi esse
      incidunt. Explicabo asperiores, quidem excepturi veniam eos odio tenetur
      corporis! Aut quae quisquam vitae architecto, quasi esse incidunt. Ipsa
      nemo repellendus molestias. Doloremque.
  - video:
      image:
        src: /graphics/Music_Academy_Rimini.jpg
      video:
        id: agkb5TSjEmc
    heading: Snippet heading
    description: >-
      Description text within a range 300 a 350 chars. Quasi esse incidunt.
      Explicabo asperiores, quidem excepturi veniam eos odio tenetur corporis!
      Aut quae quisquam vitae architecto, quasi esse incidunt. Ipsa nemo
      repellendus molestias. Doloremque.
  - video:
      image:
        src: /graphics/Musiluz.jpg
      video:
        id: agkb5TSjEmc
    heading: Snippet heading
    description: >-
      Description text within a range 300 a 350 chars. Ipsa nemo repellendus
      molestias.
  • Content: 
    .col-three {
  padding: 0 var(--gutter--bucket) !important;
  overflow: hidden;
}

.col-three__inner {
  max-width: var(--section--8);
  margin: 0 auto;
}

.col-three__content {
  display: flex;
  flex-wrap: wrap;
  margin: calc(var(--gap--4) * -1) calc(var(--gap--1) * -1);

  @media (min-width: 500px) {
    margin: calc(var(--gap--4) * -1) calc(var(--gap--2) * -1);
  }

  @media (min-width: 750px) {
    margin: calc(var(--gap--4) * -1) calc(var(--gap--1) * -1);
  }

  @media (min-width: 900px) {
    margin: calc(var(--gap--5) * -1) calc(var(--gap--2) * -1);
  }
}

.col-three__item {
  display: flex;
  flex: 0 0 100%;

  @media (min-width: 750px) {
    flex: 0 0 50%;
  }

  @media (min-width: 900px) {
    flex: 0 0 calc(100% / 3);
  }
}

.col-three__item__inner {
  display: flex;
  padding: var(--gap--4) var(--gap--1);
  flex-grow: 1;

  @media (min-width: 500px) {
    padding: var(--gap--4) var(--gap--2);
  }

  @media (min-width: 750px) {
    padding: var(--gap--4) var(--gap--1);
  }

  @media (min-width: 900px) {
    padding: var(--gap--5) var(--gap--2);
  }
}
  • URL: /components/raw/col-three/col-three.scss
  • Filesystem Path: ../src/04_organisms/col-three/col-three.scss
  • Size: 1.1 KB

No notes defined.