PDJ Brandbox

footer: Old 

<footer class="footer theme-2020">
    <div class="footer__brand">
        <div class="footerBrand">
            <div class="footerBrand__logo">
                <svg class="logo logo--small" viewBox="0 0 39 25" version="1" xmlns="http://www.w3.org/2000/svg">
                    <path fill="currentColor" d="M25.122 2.049c2.395 1.86 2.787 4.38 1.8 7.019-.919 2.442-2.98 4.81-6.22 6.642-3.592 1.994-7.308 2.525-11.363 2.525H0L6.844 0h8.209c4.14 0 7.638.164 10.069 2.049zm-5.057 6.883c.538-1.437.4-3.579-.552-4.723-1.07-1.27-2.719-1.419-5.1-1.419l-1.163.026s-1-.113-1.407.796c-.248.57.104-.426-3.92 10.305-.53 1.423.735 1.493.735 1.493s4.54.277 8.34-2.352c1.61-1.114 2.562-2.772 3.067-4.126zm9.65-2.385L39 6.594l-4.7 12.564C32.767 23.25 29.594 25 23.231 25l-4.969-.066 1.188-2.837c7.193.343 8.49-2.86 8.717-3.475l3-8.07s.516-1.437-.652-1.437h-1.84l1.04-2.568z" />
                </svg>

            </div>

            <nav class="footerBreadcrumb">
                <ul class="footerBreadcrumb__list">
                    <li class="footerBreadcrumb__item">
                        <a href="#" class="footerBreadcrumb__link">Breadcrumb</a>
                    </li>
                    <li class="footerBreadcrumb__item">
                        We are here
                    </li>
                </ul>
            </nav>

        </div>

    </div>

    <div class="footer__nav">
        <nav class="footerNav">
            <div class="footerNav__content">
                <h3 class="footerNav__title heading heading--4">
                    <a href="https://pioneerdj.com/en/product/" class="footerNav__title__link">Products</a>

                    <span class="footerNav__trigger footerNav__triggerIcon"></span>
                </h3>

                <div class="footerNav__menu" style="height: 264px;">
                    <ul class="footerNav__list">
                        <li class="footerNav__item">
                            <a href="https://pioneerdj.com/en/product/player/" class="footerNav__link">DJ players</a>
                        </li>

                        <li class="footerNav__item">
                            <a href="https://pioneerdj.com/en/product/mixer/" class="footerNav__link">DJ mixers</a>
                        </li>

                        <li class="footerNav__item">
                            <a href="https://pioneerdj.com/en/product/controller/" class="footerNav__link">DJ controllers</a>
                        </li>

                        <li class="footerNav__item">
                            <a href="https://pioneerdj.com/en/product/turntable/" class="footerNav__link">Turntables</a>
                        </li>

                        <li class="footerNav__item">
                            <a href="https://pioneerdj.com/en/product/all-in-one-system/" class="footerNav__link">All-in-one DJ systems</a>
                        </li>

                        <li class="footerNav__item">
                            <a href="https://pioneerdj.com/en/product/effector/" class="footerNav__link">Remix stations</a>
                        </li>

                        <li class="footerNav__item">
                            <a href="https://pioneerdj.com/en/product/dj-sampler/" class="footerNav__link">DJ samplers</a>
                        </li>

                        <li class="footerNav__item">
                            <a href="https://pioneerdj.com/en/product/production/" class="footerNav__link">Music production</a>
                        </li>

                        <li class="footerNav__item">
                            <a href="https://pioneerdj.com/en/product/headphones/" class="footerNav__link">Headphones</a>
                        </li>

                        <li class="footerNav__item">
                            <a href="https://pioneerdj.com/en/product/monitor-speakers/" class="footerNav__link">Monitor speakers</a>
                        </li>

                        <li class="footerNav__item">
                            <a href="https://pioneerdj.com/en/product/pa-speakers/" class="footerNav__link">PA speakers</a>
                        </li>

                        <li class="footerNav__item">
                            <a href="https://pioneerdj.com/en/product/software/" class="footerNav__link">DJ software &amp; Interfaces</a>
                        </li>

                        <li class="footerNav__item">
                            <a href="https://pioneerdj.com/en/product/accessories/" class="footerNav__link">Accessories</a>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="footerNav__content">
                <h3 class="footerNav__title heading heading--4">
                    <a href="https://pioneerdj.com/en/support/" class="footerNav__title__link">Support</a>

                    <span class="footerNav__trigger footerNav__triggerIcon"></span>
                </h3>

                <div class="footerNav__menu" style="height: 192px;">
                    <ul class="footerNav__list">
                        <li class="footerNav__item">
                            <a href="https://pioneerdj.com/en/support/contact/" class="footerNav__link" title="Contact">Contact</a>
                        </li>

                        <li class="footerNav__item">
                            <a href="https://pioneerdj.com/en/support/documents/" class="footerNav__link">Manuals</a>
                        </li>

                        <li class="footerNav__item">
                            <a href="https://pioneerdj.com/en/support/software/" class="footerNav__link">Software &amp; firmware</a>
                        </li>

                        <li class="footerNav__item">
                            <a href="https://pioneerdj.com/en/support/software-information/" class="footerNav__link">Software information</a>
                        </li>

                        <li class="footerNav__item">
                            <a href="http://faq.pioneerdj.com" class="footerNav__link" target="_blank">FAQ
                                <span class="footerNav__icon">
                                    <svg class="icon-external" viewBox="0 0 32 32">
                                        <path fill="currentColor" d="M20 0l3.2 3.2H1.6C.8 3.2 0 4 0 4.96V30.4c0 .8.8 1.6 1.6 1.6h24.8c.96 0 1.6-.8 1.6-1.76V8.48l.16-.16 3.84 4V0H20zm4.8 28.64H3.36V6.56h17.76l-12 12.32 4.48 4.48 11.2-11.52v16.8z" />
                                    </svg>

                                </span>
                            </a>
                        </li>

                        <li class="footerNav__item">
                            <a href="http://forums.pioneerdj.com/home" class="footerNav__link" target="_blank">Forum
                                <span class="footerNav__icon">
                                    <svg class="icon-external" viewBox="0 0 32 32">
                                        <path fill="currentColor" d="M20 0l3.2 3.2H1.6C.8 3.2 0 4 0 4.96V30.4c0 .8.8 1.6 1.6 1.6h24.8c.96 0 1.6-.8 1.6-1.76V8.48l.16-.16 3.84 4V0H20zm4.8 28.64H3.36V6.56h17.76l-12 12.32 4.48 4.48 11.2-11.52v16.8z" />
                                    </svg>

                                </span>
                            </a>
                        </li>

                        <li class="footerNav__item">
                            <a href="https://pioneerdj.com/en/landing/pioneer-dj-certified/" class="footerNav__link">Certification program</a>
                        </li>

                        <li class="footerNav__item">
                            <a href="https://pioneerdj.com/en/account/about/" class="footerNav__link">About your account</a>
                        </li>

                        <li class="footerNav__item">
                            <a href="https://pioneerdj.com/en/support/important-product-notice/" class="footerNav__link">Important product notices</a>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="footerNav__content">
                <h3 class="footerNav__title heading heading--4">
                    <a href="https://pioneerdj.com/en/news/" class="footerNav__title__link" title="News">News</a>
                </h3>

                <h3 class="footerNav__title heading heading--4">
                    <a href="https://pioneerdj.com/en/shops/search/" class="footerNav__title__link">Where to buy</a>
                </h3>

                <h3 class="footerNav__title heading heading--4">
                    <a href="https://pioneerdj.com/en/company/company-info/" class="footerNav__title__link">About us</a>

                    <span class="footerNav__trigger footerNav__triggerIcon"></span>
                </h3>

                <div class="footerNav__menu" style="height: 48px;">
                    <ul class="footerNav__list">
                        <li class="footerNav__item">
                            <a href="https://pioneerdj.com/en/company/company-info" class="footerNav__link">Company info</a>
                        </li>

                        <li class="footerNav__item">
                            <a href="https://pioneerdj.com/en/corporate-contact/" class="footerNav__link">Corporate contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

    </div>

    <div class="footer__links">
        <div class="footer__links__inner">
            <div class="footer__external">
                <nav class="externalNav">
                    <ul class="externalNav__list">
                        <li class="externalNav__item">
                            <a href="http://www.kuvo.com/" class="externalNav__link" target="_blank">
                                <span class="externalNav__symbol" style="background-image: url('https://www.pioneerdj.com/-/media/pioneerdj/images/navigation/kuvo-org.png')"></span>
                                KUVO
                            </a>
                        </li>

                        <li class="externalNav__item">
                            <a href="http://www.pioneerdjradio.com/" class="externalNav__link" target="_blank">
                                <span class="externalNav__symbol" style="background-image: url('https://www.pioneerdj.com/-/media/pioneerdj/images/navigation/dj-radio-org.png')"></span>
                                Radio
                            </a>
                        </li>

                        <li class="externalNav__item">
                            <a href="http://www.pioneerdjinibiza.com" class="externalNav__link" target="_blank">
                                <span class="externalNav__symbol" style="background-image: url('https://www.pioneerdj.com/-/media/pioneerdj/images/navigation/ibiza-org.png')"></span>
                                Ibiza
                            </a>
                        </li>

                        <li class="externalNav__item">
                            <a href="http://www.pioneerproaudio.com" class="externalNav__link" target="_blank">
                                <span class="externalNav__symbol" style="background-image: url('https://www.pioneerdj.com/-/media/pioneerdj/images/navigation/pro-audio-gold.png')"></span>
                                Pioneer Pro Audio
                            </a>
                        </li>
                    </ul>
                </nav>

            </div>

            <div class="footer__social">
                <nav class="socialNav">
                    <ul class="socialNav__list">
                        <li class="socialNav__item socialNav__item--youtube">
                            <a href="https://www.youtube.com/user/pioneerdjglobal" class="socialNav__link" target="_blank">
                                <span class="socialNav__symbol">
                                    <svg class="icon-youtube" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 70">
                                        <path fill="currentColor" d="M97.91 10.93a12.513 12.513 0 0 0-8.84-8.84C81.27 0 50 0 50 0S18.73 0 10.93 2.09a12.53 12.53 0 0 0-8.84 8.84C0 18.73 0 35 0 35s0 16.27 2.09 24.07c1.15 4.31 4.54 7.69 8.84 8.84C18.73 70 50 70 50 70s31.27 0 39.07-2.09c4.31-1.15 7.69-4.54 8.84-8.84C100 51.27 100 35 100 35s0-16.27-2.09-24.07ZM39.99 50V20l25.98 15-25.98 15Z" />
                                    </svg>

                                </span>

                                <span class="screenReader">YouTube</span>
                            </a>
                        </li>

                        <li class="socialNav__item socialNav__item--instagram">
                            <a href="https://www.instagram.com/pioneerdjglobal/" class="socialNav__link" target="_blank">
                                <span class="socialNav__symbol">
                                    <svg class="icon-instagram" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                                        <path fill="currentColor" d="M50 9.01c13.35 0 14.93.05 20.21.29 13.55.62 19.88 7.05 20.5 20.5.24 5.27.29 6.85.29 20.2s-.05 14.93-.29 20.2c-.62 13.44-6.93 19.88-20.5 20.5-5.27.24-6.85.29-20.21.29s-14.93-.05-20.2-.29c-13.58-.62-19.88-7.08-20.5-20.5-.24-5.27-.29-6.85-.29-20.2s.05-14.93.29-20.2c.62-13.45 6.93-19.88 20.5-20.5 5.27-.24 6.85-.29 20.2-.29ZM50 0C36.42 0 34.72.06 29.39.3 11.23 1.13 1.14 11.21.3 29.38.05 34.72 0 36.42 0 50s.06 15.28.3 20.62c.83 18.16 10.91 28.25 29.08 29.08 5.34.24 7.04.3 20.62.3s15.28-.06 20.62-.3c18.14-.83 28.26-10.91 29.08-29.08.25-5.33.3-7.04.3-20.62s-.06-15.28-.3-20.61C98.88 11.25 88.8 1.14 70.62.31 65.28.06 63.58 0 50 0Zm0 24.32c-14.18 0-25.68 11.5-25.68 25.68S35.82 75.68 50 75.68 75.68 64.18 75.68 50 64.18 24.32 50 24.32Zm0 42.35c-9.2 0-16.67-7.46-16.67-16.67S40.79 33.33 50 33.33 66.67 40.79 66.67 50 59.21 66.67 50 66.67Zm26.69-49.36c-3.32 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.68-6-6-6Z" />
                                    </svg>

                                </span>

                                <span class="screenReader">Instagram</span>
                            </a>
                        </li>

                        <li class="socialNav__item socialNav__item--facebook">
                            <a href="https://www.facebook.com/pioneer.dj.global" class="socialNav__link" target="_blank">
                                <span class="socialNav__symbol">
                                    <svg class="icon-facebook" viewBox="0 0 256.8 482.7">
                                        <path fill="currentColor" d="M175.2,0.6C120.4,6.7,86,38.4,78.1,90.3c-1.8,11.6-1.9,15.4-1.9,53.2l0,39.4H0l0.2,43.4l0.2,43.3l38,0.2l38,0.2l-0.2,105.6 l-0.2,105.6h4c2.7,0,4.1,0.2,4.2,0.8c0.2,0.6,8.5,0.8,38.9,0.8s38.7-0.2,38.9-0.8c0.2-0.5,1.6-0.8,4.2-0.8h4L170,375.6L169.8,270 l34.4,0c18.9,0,34.7-0.2,35-0.5c0.6-0.4,1.3-3.8,4.4-24.1c0.6-4.1,1.4-9.1,1.7-11.1c0.6-3.9,1.4-9.2,2.5-16.1 c0.4-2.4,0.9-5.8,1.2-7.6c0.6-3.9,1.5-9.4,2.4-15.6c0.4-2.5,0.9-5.8,1.2-7.4c0.3-1.6,0.5-3.3,0.5-3.8c0-0.8-5.7-0.9-41.7-0.9h-41.7 l0-30.1c0-30.2,0.2-33.5,2.3-41.9c3.8-15.1,15.5-25.9,31.6-29.3c7.9-1.7,11.4-1.9,31.6-1.9h21.5L256.7,43l-0.2-36.7l-2.1-0.5 c-1.2-0.3-4-0.7-6.3-1c-2.3-0.3-7.3-1-11.1-1.5C214.3,0.3,188.1-0.8,175.2,0.6" />
                                    </svg>

                                </span>

                                <span class="screenReader">Facebook</span>
                            </a>
                        </li>

                        <li class="socialNav__item socialNav__item--x">
                            <a href="https://twitter.com/PioneerDJglobal" class="socialNav__link" target="_blank">
                                <span class="socialNav__symbol">
                                    <svg class="icon-twitter" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97.85 100">
                                        <path fill="currentColor" d="M58.23 42.34 94.66 0h-8.63L54.4 36.77 29.14 0H0l38.2 55.6L0 100h8.63l33.4-38.83L68.71 100h29.14L58.23 42.34ZM46.41 56.09l-3.87-5.54L11.74 6.5H25l24.85 35.55 3.87 5.54L86.03 93.8H72.77L46.41 56.09Z" />
                                    </svg>

                                </span>

                                <span class="screenReader">X</span>
                            </a>
                        </li>
                    </ul>
                </nav>

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

    <div class="footer__legal">
        <nav class="legalNav">
            <ul class="legalNav__list">
                <li class="legalNav__item">
                    <a href="https://alphatheta.com/" class="legalNav__link">
                        <strong>&copy; AlphaTheta</strong>
                    </a>
                </li>

                <li class="legalNav__item">
                    <a href="https://pioneerdj.com/en/company/privacy-policy/" class="legalNav__link">Privacy policy</a>
                </li>

                <li class="legalNav__item">
                    <a href="https://pioneerdj.com/en/company/terms-of-use/" class="legalNav__link">terms of use</a>
                </li>

                <li class="legalNav__item">
                    <a href="https://pioneerdj.com/en/company/trademarks/" class="legalNav__link">trademarks</a>
                </li>

            </ul>
        </nav>

    </div>
</footer>
 
<footer class="footer theme-2020">
  <div class="footer__brand">
    {{render '@footer-brand' . }}
  </div>

  <div class="footer__nav">
    {{render '@nav-footer' }}
  </div>

  <div class="footer__links">
    <div class="footer__links__inner">
      <div class="footer__external">
        {{render '@nav-external' }}
      </div>

      <div class="footer__social">
        {{render '@nav-social' }}
      </div>
    </div>
  </div>

  <div class="footer__legal">
    {{render '@nav-legal' extralegal merge=true }}
  </div>
</footer>
 
extralegal:
  cookies: false
breadcrumbs:
  - url: '#'
    label: Breadcrumb
  - label: We are here
  • Content: 
    .footer {
  color: var(--color--neutrals-3);
  background-color: transparent;
}

.footer__brand {
  display: none;
  background-color: var(--color--neutrals-9);

  @media all and (min-width: 1024px) {
    display: block;
    padding: var(--gap--8) var(--gap--4) 0;
  }

  .page--home &,
  .page--service-survey & {
    display: none;
  }
}

.footer__nav {
  display: block;
  width: 100%;
  padding: var(--gap--4) 0 0;
  background-color: var(--color--neutrals-9);

  @media all and (min-width: 1024px) {
    padding: var(--gap--4) var(--gap--4) 0;
  }

  .page--home & {
    @media all and (min-width: 1024px) {
      padding-top: var(--gap--8);
    }
  }

  &--spacing.footer__nav {
    padding-top: var(--gap--4);
    padding-bottom: var(--gap--4);

    @media all and (min-width: 1024px) {
      padding-top: var(--gap--8);
      padding-bottom: var(--gap--8);
    }
  }

  .footer-ext-nav {
    color: var(--color--neutrals-0);
  }
}

.footer__links {
  background-color: var(--color--neutrals-9);

  @media all and (min-width: 1024px) {
    padding: var(--gap--4) var(--gap--4) 0;
  }
}

.footer__links__inner {
  @media all and (min-width: 1024px) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: var(--section--9);
    margin: 0 auto;
  }
}

.footer__external {
  padding: var(--gap--4);

  @media all and (min-width: 1024px) {
    padding: 0;
  }
}

.footer__social {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap--4) 0;
  border-top: 1px solid var(--color--neutrals-10);
  border-bottom: 1px solid var(--color--neutrals-10);

  @media all and (min-width: 1024px) {
    padding: 0;
    border: none;
  }
}

.footer__legal {
  display: block;
  width: 100%;
  padding: var(--gap--2) var(--gap--4);
  background-color: var(--color--neutrals-9);

  @media all and (min-width: 1024px) {
    padding-bottom: var(--gap--4);
  }
}
  • URL: /components/raw/footer/footer.scss
  • Filesystem Path: ../src/04_organisms/footer/footer.scss
  • Size: 1.9 KB

No notes defined.