hero-product

Done

HTML
View
Context
Assets
Info
Notes


        
        <section class="hero-product">
    <div class="hero-product__in">
        <div class="hero-product__inner">
            <div class="hero-product__media">
                <section class="media media--slider">
                    <div class="media__slider swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="media__slide">
                                    <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>
                            </div>

                            <div class="swiper-slide">
                                <div class="media__slide">
                                    <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>
                            </div>

                            <div class="swiper-slide">
                                <div class="media__slide">
                                    <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>
                            </div>
                        </div>
                    </div>

                    <div class="media__thumbs swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="media__thumb">
                                    <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>
                            </div>

                            <div class="swiper-slide">
                                <div class="media__thumb">
                                    <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>
                            </div>

                            <div class="swiper-slide">
                                <div class="media__thumb">
                                    <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>
                            </div>
                        </div>

                        <div class="media__nav">
                            <div class="media__nav__item">
                                <a class="media__nav__link media__nav__link--prev">
                                    <span class="media__nav__icon">
                                        <svg class="icon-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                                            <path fill="currentColor" d="M11.172 9.82L13 8 9.906 4.99 6.04 1.21c-.281-.28-.703-.28-.914 0l-.914.91c-.281.28-.281.7 0 .91L9.273 8l-5.062 4.97c-.281.28-.281.7 0 .91l.914.91c.281.28.703.28.914 0l5.133-4.97z" />
                                        </svg>
                                    </span>
                                </a>
                            </div>

                            <div class="media__nav__item">
                                <a class="media__nav__link media__nav__link--next">
                                    <span class="media__nav__icon">
                                        <svg class="icon-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                                            <path fill="currentColor" d="M11.172 9.82L13 8 9.906 4.99 6.04 1.21c-.281-.28-.703-.28-.914 0l-.914.91c-.281.28-.281.7 0 .91L9.273 8l-5.062 4.97c-.281.28-.281.7 0 .91l.914.91c.281.28.703.28.914 0l5.133-4.97z" />
                                        </svg>
                                    </span>
                                </a>
                            </div>
                        </div>
                    </div>
                </section>

            </div>

            <div class="hero-product__content">
                <div class="hero-product__back caption">
                    <a href="#" class="link link--underlined">
                        <span class="link__label">&lt; DJ Players</span>
                    </a>

                </div>

                <div class="hero-product__logos">
                    <img src="../../graphics/logo-bt.png" alt="" class="hero-product__logo">
                </div>

                <div class="hero-product__intro">
                    <h1 class="hero-product__heading heading">CDJ-3000</h1>

                    <div class="hero-product__description">
                        Pro-DJ multi player with high-res audio support (black)
                    </div>

                    <div class="hero-product__cross-links">
                        <span class="hero-product__cross-link">
                            <a href="" class="link link--underlined">
                                <span class="link__label">Product link</span>
                            </a>

                        </span>
                        <span class="hero-product__cross-link">
                            <a href="" class="link link--underlined">
                                <span class="link__label">Product link</span>
                            </a>

                        </span>
                    </div>
                </div>

                <div class="hero-product__info">
                    <h2 class="hero-product__subheading heading">The last mixer you’ll need. Period.</h2>

                    <div class="hero-product__description p--2">
                        Born from a fresh design concept, the DJM-V10 is a new breed of mixer, built to enable the most creative DJs to craft original soundscapes.
                    </div>
                </div>

                <div class="hero-product__colors">
                    <div class="hero-product__color">
                        <a href="#" class="radio-color" style="background: #FFFFFF;" title="white"></a>

                    </div>
                    <div class="hero-product__color">
                        <a href="#" class="radio-color" style="background: #000000;" title="black"></a>

                    </div>
                    <div class="hero-product__color">
                        <a href="#" class="radio-color" style="background: #9A2B2F;" title="red"></a>

                    </div>
                </div>

                <div class="hero-product__price">€1999 <span style="font-size: var(--p--2);">(Suggested Retail Price)</span></div>

                <div class="hero-product__actions">
                    <div class="actions actions--stack actions--force">
                        <div class="actions__item">

                            <a href="#" target="_blank" class="action--modal action action--normal action--on-light">
                                <span class="action__label">Buy now</span>
                                <span class="action__bg"></span>
                            </a>

                        </div>

                        <div class="actions__item">
                            <a href="#" class="link link--underlined link--icon-left">
                                <span class="link__icon">
                                    <svg class="icon-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                                        <path fill="currentColor" d="M11.172 9.82L13 8 9.906 4.99 6.04 1.21c-.281-.28-.703-.28-.914 0l-.914.91c-.281.28-.281.7 0 .91L9.273 8l-5.062 4.97c-.281.28-.281.7 0 .91l.914.91c.281.28.703.28.914 0l5.133-4.97z" />
                                    </svg>

                                </span>
                                <span class="link__label">Find a store</span>
                            </a>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


        <section class="hero-product">
  <div class="hero-product__in">
    <div class="hero-product__inner">
      <div class="hero-product__media">
        {{render '@media--slider' }}
      </div>

      <div class="hero-product__content">
        <div class="hero-product__back caption">
          {{render '@link' back-link merge=true }}
        </div>

        {{#if logo }}
          <div class="hero-product__logos">
            <img src="{{path '/graphics/logo-bt.png' }}" alt="" class="hero-product__logo">
          </div>
        {{/if}}

        <div class="hero-product__intro">
          <h1 class="hero-product__heading heading">{{ intro.heading }}</h1>

          <div class="hero-product__description">
            {{ intro.description }}
          </div>

          {{#if intro.crossLinks }}
            <div class="hero-product__cross-links">
              {{#each intro.crossLinks }}
                <span class="hero-product__cross-link">
                  {{render '@link--underlined' this }}
                </span>
              {{/each}}
            </div>
          {{/if}}
        </div>

        <div class="hero-product__info">
          <h2 class="hero-product__subheading heading">{{ info.heading }}</h2>

          <div class="hero-product__description p--2">
            {{ info.description }}
          </div>
        </div>

        <div class="hero-product__colors">
          {{#each colors }}
          <div class="hero-product__color">
            {{render '@radio-color' this merge=true }}
          </div>
          {{/each}}
        </div>

        <div class="hero-product__price">{{{ price }}}</div>

        <div class="hero-product__actions">
          {{#if outofstock}}
          {{render '@overlay-modal' }}
          <h3 class="heading heading--4">Out of stock</h3>

          <div class="spacer spacer--4"></div>

          <div class="actions actions--start actions--force">
            <div class="actions__item">
              {{render '@action' actionoutofstock }}
            </div>
          </div>

          <div class="spacer spacer--6"></div>

          {{/if}}
          <div class="actions actions--stack actions--force">
            {{#unless outofstock}}
              <div class="actions__item">
                {{render '@action' action merge=true }}
              </div>
            {{/unless}}

            <div class="actions__item">
              {{render '@link--icon-left' }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


        
            
            back-link:
  url: '#'
  modifier: underlined
  label: < DJ Players
logo: true
intro:
  heading: CDJ-3000
  description: Pro-DJ multi player with high-res audio support (black)
  crossLinks:
    - href: '#'
      label: Product link
      modifier: underlined
    - href: '#'
      label: Product link
      modifier: underlined
info:
  heading: The last mixer you’ll need. Period.
  description: >-
    Born from a fresh design concept, the DJM-V10 is a new breed of mixer, built
    to enable the most creative DJs to craft original soundscapes.
colors:
  - color: '#FFFFFF'
    label: white
    url: '#'
  - color: '#000000'
    label: black
    url: '#'
  - color: '#9A2B2F'
    label: red
    url: '#'
price: '€1999 <span style="font-size: var(--p--2);">(Suggested Retail Price)</span>'
action:
  url: '#'
  label: Buy now
  class: action--modal
actionoutofstock:
  type: normal
  tint: on-light
  url: ''
  label: Notify me when available
  buttonType: button
  class: overlay-modal__trigger

File:

Content:


                                <?xml version="1.0" encoding="UTF-8"?><svg id="_レイヤー_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 221.77 221.25"><defs><style>.cls-1{fill:#f1b43f;}.cls-2{fill:#fff;}</style></defs><path class="cls-2" d="M221.77,173.32c0,26.36-21.62,47.93-48.04,47.93H48.04c-26.42,0-48.04-21.57-48.04-47.93V47.93C0,21.57,21.62,0,48.04,0h125.69c26.42,0,48.04,21.57,48.04,47.93v125.4Z"/><g><g><path class="cls-1" d="M114.59,57.75c-.03-.06-.06-.12-.11-.18l-.79-1.01c-.15-.19-.37-.31-.61-.34-.24-.03-.48,.05-.66,.2l-7.7,6.35c-.29,.23-.69,.27-1.01,.08l-6.52-3.76c-.2-.11-.34-.3-.41-.52l-1.82-6.26c-.1-.34,.01-.7,.29-.93l8.14-6.71c.37-.31,.43-.85,.14-1.23l-1.03-1.33c-.06-.07-.12-.12-.2-.17-3.17-.64-6.38-.25-9.22,.99-3.54,1.6-6.48,4.53-7.98,8.44-1.81,4.71-1.1,9.75,1.39,13.72,.36,.57,.67,1.1,.94,1.6,1.63,1.97,3.77,3.56,6.33,4.54,2.43,.93,4.96,1.2,7.38,.9,.33-.11,.68-.19,1.06-.22,.21-.02,.42-.05,.64-.08,4.75-1.14,8.87-4.51,10.76-9.4,.6-1.55,.92-3.13,1-4.7Z"/><path class="cls-1" d="M95.97,75.87c-1.63-.15-2.19-.11-3.72-.7-1.66-.64-2.17-1.12-3.56-2.22-2.46,6.35-21.09,49.9-21.09,49.9-1.11,2.89,.33,6.14,3.24,7.25,2.9,1.11,6.16-.33,7.27-3.23l17.86-51.01Zm-7.71,6.39l1.74,.66-12.22,31.75-1.74-.67,12.22-31.75Zm-16.41,45.23c-1.45-.55-2.18-2.18-1.62-3.63,.56-1.45,2.18-2.17,3.63-1.61,1.45,.56,2.17,2.18,1.62,3.63-.56,1.45-2.18,2.17-3.63,1.61Z"/></g><g><polygon class="cls-1" points="138.59 92.46 123.01 54.84 124.09 49.44 118.18 40.93 115.93 41.79 113.69 42.65 115.01 52.92 119.43 56.21 133.08 94.57 138.59 92.46"/><path class="cls-1" d="M141.78,95.59l-8.97,3.43,8.44,27.7c1.36,3.54,5.34,5.3,8.88,3.94,3.54-1.36,5.31-5.32,3.95-8.86l-12.31-26.22Zm5.87,25.71l-1.95,.75-7.7-20.01,1.95-.75,7.7,20.01Z"/></g></g><g><path d="M35.49,155.57l6.11,15.82h-2.98l-1.49-4.19h-6.33l-1.49,4.19h-2.87l6.09-15.82h2.95Zm-1.53,2.73l-2.4,6.8h4.84l-2.38-6.8h-.07Z"/><path d="M45.8,155.57v15.82h-2.53v-15.82h2.53Z"/><path d="M59.77,165.72c0,3.01-1.51,5.98-4.95,5.98-1.44,0-3.06-.51-3.84-1.8h-.04v5.72h-2.53v-15.69h2.4v1.55h.04c.73-1.33,2.09-1.86,3.55-1.86,3.6,0,5.38,2.75,5.38,6.09Zm-5.71,3.99c2.29,0,3.18-2.04,3.18-4.03s-.96-4.05-3.2-4.05c-2.35,0-3.2,1.99-3.2,4.05s.98,4.03,3.22,4.03Z"/><path d="M63.99,155.57v5.87h.04c.73-1.15,2.02-1.82,3.46-1.82,2.64,0,4.04,1.53,4.04,3.81v7.95h-2.53v-7.09c0-1.46-.44-2.68-2.24-2.68s-2.78,1.44-2.78,2.95v6.82h-2.53v-15.82h2.53Z"/><path d="M83.61,162.88v6.03c0,.6,.13,.8,.69,.8,.13,0,.36,0,.53-.04v1.75c-.64,.18-1.31,.29-1.6,.29-1.11,0-1.78-.44-1.95-1.4-.91,.91-2.58,1.4-3.98,1.4-2.27,0-3.93-1.24-3.93-3.35s1.27-2.99,2.98-3.35c.87-.18,1.82-.29,2.89-.42,1.53-.18,2-.53,2-1.42,0-1-.8-1.55-2.38-1.55s-2.42,.66-2.53,1.82h-2.53c.18-2.5,2-3.81,5.22-3.81,2.78,0,4.6,1.31,4.6,3.26Zm-5.53,6.82c1.73,0,3-.86,3-2.1v-1.95c-.69,.42-1.02,.42-2.78,.64-1.67,.2-2.4,.8-2.4,1.84,0,.95,.8,1.57,2.18,1.57Z"/><path d="M96.91,155.57v2.39h-5.04v13.43h-2.78v-13.43h-5.02v-2.39h12.84Z"/><path d="M100.71,155.57v5.87h.04c.73-1.15,2.02-1.82,3.46-1.82,2.64,0,4.04,1.53,4.04,3.81v7.95h-2.53v-7.09c0-1.46-.44-2.68-2.24-2.68s-2.78,1.44-2.78,2.95v6.82h-2.53v-15.82h2.53Z"/><path d="M120.95,165.45c0,.29-.02,.58-.04,.86h-8.44c0,1.88,1.09,3.39,3.09,3.39,1.4,0,2.33-.58,2.8-1.91h2.4c-.51,2.46-2.69,3.9-5.2,3.9-3.62,0-5.62-2.53-5.62-6.01s2.13-6.07,5.55-6.07c3.24,0,5.46,2.66,5.46,5.83Zm-2.58-.8c-.13-1.6-1.18-3.04-2.91-3.04s-2.91,1.35-3,3.04h5.91Z"/><path d="M126.13,156.5v3.43h2.29v1.88h-2.29v6.25c0,1.2,.29,1.44,1.27,1.44,.47,0,.93-.04,1.02-.09v1.95c-1,.11-1.29,.13-1.64,.13-2.42,0-3.18-.78-3.18-3.08v-6.6h-1.91v-1.88h1.91v-3.43h2.53Z"/><path d="M140.19,162.88v6.03c0,.6,.13,.8,.69,.8,.13,0,.36,0,.53-.04v1.75c-.64,.18-1.31,.29-1.6,.29-1.11,0-1.78-.44-1.95-1.4-.91,.91-2.58,1.4-3.98,1.4-2.27,0-3.93-1.24-3.93-3.35s1.27-2.99,2.98-3.35c.87-.18,1.82-.29,2.89-.42,1.53-.18,2-.53,2-1.42,0-1-.8-1.55-2.38-1.55s-2.42,.66-2.53,1.82h-2.53c.18-2.5,2-3.81,5.22-3.81,2.78,0,4.6,1.31,4.6,3.26Zm-5.53,6.82c1.73,0,3-.86,3-2.1v-1.95c-.69,.42-1.02,.42-2.78,.64-1.67,.2-2.4,.8-2.4,1.84,0,.95,.8,1.57,2.18,1.57Z"/><path d="M162.49,160.6h-2.78c-.56-2.1-1.87-3.15-3.95-3.15-3.02,0-4.82,2.5-4.82,6.03s1.78,6.03,4.82,6.03c2.27,0,3.75-1.6,4.04-4.14h2.71c-.29,3.79-2.84,6.4-6.75,6.4-2.24,0-4.06-.8-5.49-2.35-1.4-1.57-2.11-3.57-2.11-5.94,0-4.52,2.82-8.29,7.6-8.29,3.66,0,6.37,2.06,6.73,5.41Z"/><path d="M174.31,162.88v6.03c0,.6,.13,.8,.69,.8,.13,0,.36,0,.53-.04v1.75c-.64,.18-1.31,.29-1.6,.29-1.11,0-1.78-.44-1.95-1.4-.91,.91-2.58,1.4-3.98,1.4-2.26,0-3.93-1.24-3.93-3.35s1.27-2.99,2.98-3.35c.87-.18,1.82-.29,2.89-.42,1.53-.18,2-.53,2-1.42,0-1-.8-1.55-2.38-1.55s-2.42,.66-2.53,1.82h-2.53c.18-2.5,2-3.81,5.22-3.81,2.78,0,4.6,1.31,4.6,3.26Zm-5.53,6.82c1.73,0,3-.86,3-2.1v-1.95c-.69,.42-1.02,.42-2.78,.64-1.67,.2-2.4,.8-2.4,1.84,0,.95,.8,1.57,2.18,1.57Z"/><path d="M183.77,159.69v2.44c-.38-.07-.73-.11-1.09-.11-1.89,0-3.11,1.64-3.11,3.83v5.54h-2.53v-11.46h2.38v2.22h.04c.36-1.46,2.07-2.53,3.35-2.53,.49,0,.58,0,.96,.07Z"/><path d="M195.32,165.45c0,.29-.02,.58-.04,.86h-8.44c0,1.88,1.09,3.39,3.09,3.39,1.4,0,2.33-.58,2.8-1.91h2.4c-.51,2.46-2.69,3.9-5.2,3.9-3.62,0-5.62-2.53-5.62-6.01s2.13-6.07,5.55-6.07c3.24,0,5.46,2.66,5.46,5.83Zm-2.58-.8c-.13-1.6-1.18-3.04-2.91-3.04s-2.91,1.35-3,3.04h5.91Z"/></g></svg>

URL: /components/raw/hero-product/AlphaTheta-Icon.svg
Filesystem Path: ../src/04_organisms/hero-product/AlphaTheta-Icon.svg
Size: 5.1 KB

Content:


                                <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.9093 5.30355L5.30273 15.9102" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5.30355 5.30355L15.9102 15.9102" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

URL: /components/raw/hero-product/close.svg
Filesystem Path: ../src/04_organisms/hero-product/close.svg
Size: 355 Bytes

Content:


                                const HEROPRODUCT = ((w, d, undefined) => {
  'use strict';

  const selectors = {
    wrapper: '.hero-product',
    wrapperLegacy: '.hero-product--legacy',
    description: '.hero-product__info .hero-product__description',
    readmore: '.hero-product__readmore-trigger'
  };

  const defaultLength = 250;

  const showMore = (target, text, wrapper) => {
    const readlesslabel = wrapper.dataset.readlesslabel;

    target.innerHTML = `${text}  <a href="#" class="${ selectors.readmore.replace('.', '') }">${ readlesslabel }</a>`;

    const trigger = target.querySelector(selectors.readmore);

    trigger.addEventListener('click', (e) => {
      e.preventDefault();

      legacyReadMore(wrapper);
    }, { once: true });
  };

  const legacyReadMore = (wrapper) => {
    // if legacy wrapper not found, do nothing
    if (!wrapper) { return; }

    const readmorelabel = wrapper.dataset.readmorelabel;
    const maxchars = parseInt(wrapper.dataset.maxchars, 10) || defaultLength;
    const description = wrapper.querySelector(selectors.description);

    if (!description) { return; }
    const oldTrigger = description.querySelector(selectors.readmore);

    if (oldTrigger) { oldTrigger.remove(); }

    const text = description.innerText;

    if (text.length > maxchars) {
      const newText = text.slice(0, maxchars);

      description.innerHTML = `${newText}... <a href="#" class="${ selectors.readmore.replace('.', '') }">${ readmorelabel }</a>`;

      const trigger = description.querySelector(selectors.readmore);

      trigger.addEventListener('click', (e) => {
        e.preventDefault();

        showMore(description, text, wrapper);
      }, { once: true });
    }

  };

  const init = () => {
    legacyReadMore(document.querySelector(selectors.wrapperLegacy));
  };

  d.addEventListener('DOMContentLoaded', init);
})(window, window.document);

URL: /components/raw/hero-product/hero-product.js
Filesystem Path: ../src/04_organisms/hero-product/hero-product.js
Size: 1.9 KB

Content:


                                .hero-product {
  padding: 0 var(--gutter--bucket);
}

.hero-product__in {
  max-width: var(--section--9);
  margin: 0 auto;
}

.hero-product__inner {
  width: 100%;
  max-width: calc(var(--section--9) - ((var(--section--9) - var(--section--8)) / 2));
  margin-left: auto;

  @media (min-width: 750px) {
    display: flex;
    flex-direction: row-reverse;
  }
}

.hero-product__media {
  position: relative;
  flex: 0 0 auto;
  width: 100%;

  @media (min-width: 750px) {
    width: calc(100% - 380px);
  }
}

.hero-product__content {
  position: relative;
  flex: 0 0 380px;
  margin-top: var(--gap--8);
  padding-right: var(--gap--8);

  @media (min-width: 750px) {
    margin-top: 0;
    padding-bottom: var(--gap--10);
  }

  @media (min-width: 900px) {
    padding-top: var(--gap--20);
  }

  @media (min-width: 1100px) {
    padding-top: var(--gap--30);
  }
}

.hero-product__back {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  color: var(--color--neutrals-5);

  @media (min-width: 900px) {
    display: block;
  }
}

.hero-product__logos {
  display: flex;
  margin-bottom: var(--gap--3);
}

.hero-product__logo {
  width: auto !important;
  max-height: 32px;
  margin-left: var(--gap--2);

  &:first-child {
    margin-left: 0;
  }
}

.hero-product__intro {
  margin-bottom: var(--gap--6);

  @media (min-width: 900px) {
    margin-bottom: var(--gap--15);
  }
}

.hero-product__heading {
  font-size: var(--h--2);
  font-weight: 500;
}

.hero-product__description {
  margin-top: var(--gap--1);

  @media (min-width: 900px) {
    margin-top: var(--gap--2);
  }
}

.hero-product__cross-links {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--gap--2);
  margin-bottom: calc(var(--gap--2) * -1);

  @media (min-width: 900px) {
    margin-top: var(--gap--4);
  }
}

.hero-product__cross-link {
  flex: 0 0 auto;
  margin-bottom: var(--gap--2);
  margin-right: var(--gap--4);
}

.hero-product__subheading {
  margin-bottom: var(--gap--2);
  font-size: var(--h--7);
  font-weight: 700;

  @media (min-width: 900px) {
    margin-bottom: var(--gap--3);
    font-size: var(--h--5);
  }
}

.hero-product__colors {
  display: flex;
  margin-top: var(--gap--4);
}

.hero-product__color {
  margin-left: var(--gap--4);

  &:first-child {
    margin-left: 0;
  }
}

.hero-product__price {
  margin: var(--gap--4) 0;
}

.hero-product--legacy {
  .hero-product__media {
    img {
      object-fit: contain !important;
    }
  }
}

.hero-product--compact {
  .hero-product__content {
    @media (min-width: 1100px) {
      padding-top: var(--gap--10);
    }
  }

  .hero-product__intro {
    @media (min-width: 900px) {
      margin-bottom: var(--gap--6);
    }
  }
}

// New styling
#the-bucket {
  .hero-product__subheading--warranty {
    margin-top: var(--gap--3);
  }
}

.hero-product--care {
  .hero-product {
    &__content {
      padding-top: var(--gap--8);
    }

    &__intro {
      margin-bottom: var(--gap--8);
    }
  }
}

URL: /components/raw/hero-product/hero-product.scss
Filesystem Path: ../src/04_organisms/hero-product/hero-product.scss
Size: 3 KB

Content:


                                <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.4" y="0.4" width="12.2" height="12.2" rx="6.1" stroke="#007DE1" stroke-width="0.8"/>
<path d="M6.87598 7.90527H5.78711C5.79036 7.60254 5.81641 7.34863 5.86523 7.14355C5.91406 6.93522 5.99544 6.74642 6.10938 6.57715C6.22656 6.40788 6.38118 6.22884 6.57324 6.04004C6.72298 5.89681 6.85807 5.76172 6.97852 5.63477C7.09896 5.50456 7.19499 5.36784 7.2666 5.22461C7.33822 5.07812 7.37402 4.91048 7.37402 4.72168C7.37402 4.5166 7.33984 4.34245 7.27148 4.19922C7.20312 4.05599 7.10221 3.94694 6.96875 3.87207C6.83854 3.7972 6.67578 3.75977 6.48047 3.75977C6.31771 3.75977 6.16471 3.79232 6.02148 3.85742C5.87826 3.91927 5.7627 4.01693 5.6748 4.15039C5.58691 4.2806 5.53971 4.45312 5.5332 4.66797H4.35645C4.36296 4.25781 4.46061 3.91276 4.64941 3.63281C4.83822 3.35286 5.09212 3.1429 5.41113 3.00293C5.73014 2.86296 6.08659 2.79297 6.48047 2.79297C6.91667 2.79297 7.28939 2.86784 7.59863 3.01758C7.90788 3.16406 8.14388 3.37891 8.30664 3.66211C8.47266 3.94206 8.55566 4.2806 8.55566 4.67773C8.55566 4.96419 8.4987 5.22461 8.38477 5.45898C8.27083 5.6901 8.12272 5.90658 7.94043 6.1084C7.75814 6.30697 7.5612 6.50553 7.34961 6.7041C7.16732 6.87012 7.04362 7.05078 6.97852 7.24609C6.91341 7.43815 6.87923 7.65788 6.87598 7.90527ZM5.68945 9.42871C5.68945 9.25293 5.74967 9.10482 5.87012 8.98438C5.99056 8.86068 6.15495 8.79883 6.36328 8.79883C6.57161 8.79883 6.736 8.86068 6.85645 8.98438C6.97689 9.10482 7.03711 9.25293 7.03711 9.42871C7.03711 9.60449 6.97689 9.75423 6.85645 9.87793C6.736 9.99837 6.57161 10.0586 6.36328 10.0586C6.15495 10.0586 5.99056 9.99837 5.87012 9.87793C5.74967 9.75423 5.68945 9.60449 5.68945 9.42871Z" fill="#007DE1"/>
</svg>

URL: /components/raw/hero-product/learn-more.svg
Filesystem Path: ../src/04_organisms/hero-product/learn-more.svg
Size: 1.7 KB

Content:
URL: /components/raw/hero-product/logo-bt.png
Filesystem Path: ../src/04_organisms/hero-product/logo-bt.png
Size: 3.7 KB

Handle: @hero-product
Variants (5): Default , Care , Care Oos , Compact , Usa
Preview:
- With layout
- Component only
Filesystem Path: ../src/04_organisms/hero-product/hero-product.hbs
References (7): @media--slider, @link, @link--underlined, @radio-color, @overlay-modal, @action, @link--icon-left
Referenced by (4): @cdj-3000, @cdj-3000-out-of-stock, @vm-50, @onetrust

No notes defined.