PDJ Brandbox

hero-a 

<section class="hero-a">
    <div class="hero-a__in">
        <div class="hero-a__inner">
            <picture class="visual">
                <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>

        </div>

        <header class="hero-a__header">
            <div class="hero-a__heading">
                <span class="heading heading--0">Lorem title text with a max of 50 characters!</span>
            </div>
        </header>
    </div>
</section>
 
<section class="hero-a">
  <div class="hero-a__in">
    <div class="hero-a__inner">
      {{#if visual }}
      {{render '@visual' visual merge=true }}
      {{/if}}

      {{#if video-player }}
      {{render '@video-player' video-player merge=true }}
      {{/if}}

      {{#if video-bg }}
      {{render '@video-bg' video-bg merge=true }}
      {{/if}}
    </div>

    {{#if heading }}
    <header class="hero-a__header">
      <div class="hero-a__heading">
        <span class="heading heading--0">{{ heading }}</span>
      </div>
    </header>
    {{/if}}
  </div>
</section>
 
heading: Lorem title text with a max of 50 characters!
visual: true
  • Content: 
    .hero-a {
  display: block;
  width: 100%;
}

.hero-a__in {
  position: relative;
  max-height: 660px;
  overflow: hidden;
}

.hero-a__inner {
  display: block;
  width: 100%;
  height: 0;
  padding-top: (206 / 352) * 100%;
}

.hero-a__header {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: var(--gutter--bucket);
}

.hero-a__heading {
  flex: 0 1 var(--section--6);
  color: var(--color--neutrals-0);
  font-weight: 500;
  text-align: center;
}

.hero-a__heading .heading {
  font-weight: 500;
}
  • URL: /components/raw/hero-a/hero-a.scss
  • Filesystem Path: ../src/04_organisms/hero-a/hero-a.scss
  • Size: 603 Bytes

No notes defined.