PDJ Brandbox

visual: in-flow 

<picture class="visual visual--in-flow">
    <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-poster-mobile.webp" type="image/webp">
    <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-poster-mobile.jpg">
    <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.webp" type="image/webp">
    <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.jpg">
    <img data-sizes="auto" data-src="/graphics/video-poster-mobile.jpg" class="lazyload" alt="">
</picture>
 
<picture class="visual{{#if in-flow }} visual--in-flow{{/if}}{{#if contained }} visual--contained{{/if}}">
  {{#if src.mobilew }}
  <source media="(max-width: 899px)" data-sizes="auto" data-srcset="{{ src.mobilew }}" type="image/webp">
  {{/if}}
  {{#if src.mobile }}
  <source media="(max-width: 899px)" data-sizes="auto" data-srcset="{{ src.mobile }}">
  {{/if}}
  {{#if src.desktopw }}
  <source media="(min-width: 900px)" data-sizes="auto" data-srcset="{{ src.desktopw }}" type="image/webp">
  {{/if}}
  {{#if src.desktop }}
  <source media="(min-width: 900px)" data-sizes="auto" data-srcset="{{ src.desktop }}">
  {{/if}}
  <img data-sizes="auto" data-src="{{#if src.mobile }}{{ src.mobile }}{{else}}{{ src }}{{/if}}" class="lazyload" alt="{{ alt }}">
</picture>
 
src:
  mobile: /graphics/video-poster-mobile.jpg
  mobilew: /graphics/video-poster-mobile.webp
  desktop: /graphics/video-poster.jpg
  desktopw: /graphics/video-poster.webp
alt: ''
srcset: >-
  https://via.placeholder.com/500x250 500w, https://via.placeholder.com/1000x500
  1000w, https://via.placeholder.com/2000x1000 2000w
in-flow: true
  • Content: 
    .visual {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 100%;
}

.visual--in-flow {
  position: relative;
}

.visual img {
  display: block;
  width: 100%;
  object-fit: cover;
  object-position: center center;
}

.visual--contained img {
  object-fit: contain;
}
  • URL: /components/raw/visual/visual.scss
  • Filesystem Path: ../src/02_atoms/visual/visual.scss
  • Size: 303 Bytes

No notes defined.