PDJ Brandbox

snippet-c 

<article class="snippet-c">
    <div class="snippet-c__visual">
        <div class="snippet-c__image">
            <div class="video-player">
                <picture class="visual">
                    <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-player-mobile.jpg">
                    <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-player.jpg">
                    <img data-sizes="auto" data-src="/graphics/video-player-mobile.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">
        <span class="snippet-c__label">Label</span>

        <h4 class="snippet-c__heading heading">
            <a href="#" class="link link--default">
                <span class="link__label">This a link</span>
            </a>

        </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>
 
<article class="snippet-c">
  <div class="snippet-c__visual">
    <div class="snippet-c__image">
      {{#if video}}
        {{render '@video-player' video merge=true }}
      {{else}}
        {{#if link}}
          <a href="{{ link.url }}" class="snippet__link"{{#if link.target}} target="{{ link.target }}"{{/if}}>
        {{/if}}
            {{render '@visual' visual}}
        {{#if link}}
          </a>
        {{/if}}
      {{/if}}
    </div>
  </div>

  <div class="snippet-c__content">
    {{#if label }}
    <span class="snippet-c__label">{{ label }}</span>
    {{/if}}

    {{#if heading }}
    <h4 class="snippet-c__heading heading">
      {{#if link}}
        {{render '@link' link merge=true }}
      {{else}}
        {{ heading }}
      {{/if}}
    </h4>
    {{/if}}

    {{#if description }}
    <div class="snippet-c__description">
      {{ description }}
    </div>
    {{/if}}
  </div>
</article>
 
video:
  src: https://via.placeholder.com/260x245
label: Label
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.
link:
  url: '#'
  target: false
  • Content: 
    .snippet-c {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;

  .product-videos & {
    border: 1px solid var(--color--neutrals-2);
  }
}

.snippet-c__visual {
  flex: 0 0 auto;
  display: block;
  overflow: hidden;
  background-color: var(--color--neutrals-1);
}

.snippet-c__image {
  transition: transform 700ms;
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-top: calc(9 / 16 * 100%);
  backface-visibility: hidden;

  .snippet-c__visual:hover & {
    transform: scale(1.05);
  }
}

.snippet-c__content {
  flex: 1 1 auto;
  margin-top: var(--gap--4);
  padding-bottom: var(--gap--4);

  .product-videos & {
    margin-top: 0;
    padding: var(--gap--4);
  }
}

.snippet-c__label {
  display: block;
  margin-bottom: var(--gap--1);
  color: var(--color--neutrals-5);
  font-size: var(--caption);
  line-height: 1;
  font-weight: 400;
  text-align: left;
}

.snippet-c__heading {
  display: block;
  font-size: var(--p--1);
  font-weight: 700;
  line-height: 1.1;
}

.snippet-c__description {
  width: 95%;
  margin-top: var(--gap--2);
  font-size: var(--p--2);
  font-weight: 400;
  line-height: 1.43;
}
  • URL: /components/raw/snippet-c/snippet-c.scss
  • Filesystem Path: ../src/03_molecules/snippet-c/snippet-c.scss
  • Size: 1.2 KB

No notes defined.