PDJ Brandbox

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>

</div>
 
<div class="footerBrand">
  <div class="footerBrand__logo">
    {{render '@logo--small' }}
  </div>

  {{#if breadcrumbs }}
    {{render '@footer-breadcrumbs' . }}
  {{/if}}
</div>
 
/* No context defined. */
  • Content: 
    .footerBrand {
  background-color: #2A2937;

  @media all and (min-width: 1024px) {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1340px;
    height: 50px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid #3B3B53;
  }

  .theme-2020 & {
    max-width: var(--section--9);
    border-color: var(--color--neutrals-7);
    background-color: var(--color--neutrals-9);
  }
}

.footerBrand__logo {
  display: flex;
  width: 70px;
  height: 50px;
  padding: 15px;
  color: #FFF;
  border-right: 6px solid #3B3B53;

  .theme-2020 & {
    border-color: var(--color--neutrals-7);
  }
}

.footerBrand__logo svg {
  display: block;
  width: 100%;
  height: 100%;
}
  • URL: /components/raw/footer-brand/footer-brand.scss
  • Filesystem Path: ../src/03_molecules/footer-brand/footer-brand.scss
  • Size: 697 Bytes

No notes defined.