PDJ Brandbox

brand-bar 

<div class="brand-bar">
    <div class="brand-bar__inner">

        <a href="https://alphatheta.com" class="brand-bar__logo">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 117 18.7" width="117" height="18.7">
                <title>AlphaTheta</title>
                <path fill="currentColor" d="m32.28 2.62 4.89 12.69h-2.38l-1.19-3.36h-5.06l-1.19 3.36h-2.29l4.87-12.69h2.36ZM31.05 4.8l-1.92 5.45H33L31.1 4.8h-.05Zm9.47-2.18v12.69h-2.03V2.62h2.03Zm11.18 8.14c0 2.42-1.21 4.8-3.96 4.8-1.15 0-2.45-.41-3.07-1.44h-.04v4.58H42.6V6.12h1.92v1.24h.04c.59-1.07 1.67-1.49 2.84-1.49 2.88 0 4.3 2.2 4.3 4.89Zm-4.57 3.19c1.83 0 2.54-1.63 2.54-3.23s-.76-3.25-2.56-3.25c-1.88 0-2.56 1.6-2.56 3.25s.78 3.23 2.58 3.23Zm7.95-11.33v4.71h.04c.59-.92 1.62-1.46 2.77-1.46 2.11 0 3.23 1.23 3.23 3.06v6.38h-2.03V9.62c0-1.17-.36-2.15-1.79-2.15s-2.22 1.16-2.22 2.36v5.47h-2.03V2.62h2.03Zm15.69 5.86v4.83c0 .48.11.64.55.64.11 0 .28 0 .43-.04v1.4c-.52.14-1.05.23-1.28.23-.89 0-1.42-.36-1.56-1.12-.73.73-2.06 1.12-3.18 1.12-1.81 0-3.15-1-3.15-2.68s1.01-2.4 2.38-2.68c.69-.14 1.46-.23 2.31-.34 1.23-.14 1.6-.43 1.6-1.14 0-.8-.64-1.24-1.9-1.24s-1.94.53-2.03 1.46h-2.03c.14-2.01 1.6-3.06 4.18-3.06 2.22 0 3.68 1.05 3.68 2.61Zm-4.43 5.47c1.39 0 2.4-.69 2.4-1.69V10.7c-.55.34-.82.34-2.22.52-1.33.16-1.92.64-1.92 1.47 0 .76.64 1.26 1.74 1.26ZM81.41 2.62v1.92h-4.03v10.77h-2.22V4.54h-4.02V2.62h10.27Zm3.04 0v4.71h.04c.59-.92 1.62-1.46 2.77-1.46 2.11 0 3.23 1.23 3.23 3.06v6.38h-2.03V9.62c0-1.17-.36-2.15-1.79-2.15s-2.22 1.16-2.22 2.36v5.47h-2.03V2.62h2.03Zm16.19 7.92c0 .23-.02.46-.04.69h-6.75c0 1.51.87 2.72 2.47 2.72 1.12 0 1.87-.46 2.24-1.53h1.92c-.41 1.97-2.15 3.13-4.16 3.13-2.9 0-4.5-2.03-4.5-4.82s1.71-4.87 4.44-4.87c2.59 0 4.37 2.13 4.37 4.67Zm-2.07-.64c-.11-1.28-.94-2.43-2.33-2.43s-2.33 1.08-2.4 2.43h4.73Zm6.21-6.54v2.75h1.83v1.51h-1.83v5.01c0 .96.23 1.16 1.01 1.16.37 0 .75-.04.82-.07v1.56c-.8.09-1.03.11-1.31.11-1.94 0-2.54-.62-2.54-2.47V7.63h-1.53V6.12h1.53V3.37h2.03Zm11.24 5.12v4.83c0 .48.11.64.55.64.11 0 .28 0 .43-.04v1.4c-.52.14-1.05.23-1.28.23-.89 0-1.42-.36-1.56-1.12-.73.73-2.06 1.12-3.18 1.12-1.81 0-3.14-1-3.14-2.68s1.01-2.4 2.38-2.68c.69-.14 1.46-.23 2.31-.34 1.23-.14 1.6-.43 1.6-1.14 0-.8-.64-1.24-1.9-1.24s-1.94.53-2.03 1.46h-2.03c.14-2.01 1.6-3.06 4.18-3.06 2.22 0 3.68 1.05 3.68 2.61Zm-4.42 5.47c1.39 0 2.4-.69 2.4-1.69V10.7c-.55.34-.82.34-2.22.52-1.33.16-1.92.64-1.92 1.47 0 .76.64 1.26 1.74 1.26ZM18.46 1.35C15.26-1.26 10.62.22 7.85 3.19c-.37.4-.71.84-1.03 1.3 1.61-2.12 4.01-3.46 6.35-3.28 3.44.26 5.42 3.69 4.44 7.66-.98 3.97-4.56 6.98-8 6.72-3.08-.23-4.99-3-4.65-6.43 1.03-.57 2.18-.78 3.21-.51 2.02.54 2.86 2.75 1.95 5 .29-.64.49-1.31.55-1.96.03-.29.03-.58 0-.88-.18-2.24-1.97-4.18-4.93-3.68-4.78.81-7.31 6.14-4.68 9.28 1.61 1.91 4.48 1.63 6.52.27 1.58 1.12 3.75 1.51 6.26.58 7.28-2.69 9.66-11.77 4.61-15.9ZM4.31 17.12c-2.09-.56-2.92-2.91-1.85-5.25.53-1.16 1.43-2.1 2.45-2.68-.14.81-.18 1.62-.11 2.39l.06.53c.04.29.11.57.18.85.41 1.48 1.26 2.79 2.46 3.66-1.02.56-2.17.77-3.2.5Z" />
            </svg>

        </a>

    </div>
</div>
 
<div class="brand-bar">
  <div class="brand-bar__inner">

    <a href="https://alphatheta.com" class="brand-bar__logo">
      {{ render '@logo--alphatheta' }}
    </a>

  </div>
</div>
 
/* No context defined. */
  • Content: 
    .brand-bar {
  position: relative;
  z-index: 998;

  display: block;
  margin: 0;
  padding: 0;

  background-color: var(--color--neutrals-10);
  color: var(--color--neutrals-0);

  &__inner {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    margin: 0 auto;
    padding: var(--gap--2) var(--gap--4);
    max-width: var(--section--10);
  }

  &__logo {
    display: block;
    margin: 0;
    padding: 0;

    color: currentColor;
    transition: opacity 150ms ease-out;

    svg {
      display: block;
      height: 18px;
    }

    &:hover {
      color: currentColor;
      opacity: .8;
    }
  }

  &:after {
    content: '';

    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;

    display: block;
    width: 100%;
    height: 4px;

    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJoZWFkZXJfX2Jhci1ncmFkaWVudCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgdmlld0JveD0iMCAwIDE5MjAgNCI+CiAgPHBhdGggZmlsbD0idXJsKCNoZWFkZXItZ3JhZGllbnQtYmFyKSIgZD0iTTAgMGgxOTIwdjRIMHoiLz4KICA8ZGVmcz4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iaGVhZGVyLWdyYWRpZW50LWJhciIgeDE9IjAiIHgyPSIxOTIwIiB5MT0iNCIgeTI9IjQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0YxOEIwMCIvPgogICAgICA8c3RvcCBvZmZzZXQ9Ii4wMTk3NjY2IiBzdG9wLWNvbG9yPSIjRUM1MDA3Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iLjAzNzQzNDYiIHN0b3AtY29sb3I9IiNFODI0MEQiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIuMDUxMDM5NiIgc3RvcC1jb2xvcj0iI0U2MDkxMCIvPgogICAgICA8c3RvcCBvZmZzZXQ9Ii4wNTg5NTQyIiBzdG9wLWNvbG9yPSIjRTYwMDEyIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iLjA2MzQ3ODQiIHN0b3AtY29sb3I9IiNFNDAwMjMiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIuMDczOTM5NSIgc3RvcC1jb2xvcj0iI0UyMDA0MyIvPgogICAgICA8c3RvcCBvZmZzZXQ9Ii4wODQ5MzQ1IiBzdG9wLWNvbG9yPSIjRTAwMDVDIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iLjA5NjQ2MTYiIHN0b3AtY29sb3I9IiNERjAwNkQiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIuMTA4NDYxIiBzdG9wLWNvbG9yPSIjREUwMDc4Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iLjEyMjQxNCIgc3RvcC1jb2xvcj0iI0RFMDA3QyIvPgogICAgICA8c3RvcCBvZmZzZXQ9Ii4yMzAxNzYiIHN0b3AtY29sb3I9IiM2NTAwNjQiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIuMzU0MTM3IiBzdG9wLWNvbG9yPSIjNDExQzY0Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iLjM3NTU5NSIgc3RvcC1jb2xvcj0iIzBEMDY1NCIvPgogICAgICA8c3RvcCBvZmZzZXQ9Ii40MDM3MDMiIHN0b3AtY29sb3I9IiMwQjA1NDQiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIuNDM1ODAyIiBzdG9wLWNvbG9yPSIjMDkwNDM2Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iLjQ3MDczOCIgc3RvcC1jb2xvcj0iIzA3MDMyQSIvPgogICAgICA8c3RvcCBvZmZzZXQ9Ii41MDk5MyIgc3RvcC1jb2xvcj0iIzA1MDIxRiIvPgogICAgICA8c3RvcCBvZmZzZXQ9Ii41NTMxODQiIHN0b3AtY29sb3I9IiMwNDAyMTciLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIuNjAzNTY1IiBzdG9wLWNvbG9yPSIjMDMwMTEwIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iLjY2NjY5OCIgc3RvcC1jb2xvcj0iIzAzMDEwQyIvPgogICAgICA8c3RvcCBvZmZzZXQ9Ii43NTUxMDIiIHN0b3AtY29sb3I9IiMwMjAxMDkiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMDIwMTA4Ii8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogIDwvZGVmcz4KPC9zdmc+Cg==");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: 0 0;
  }
}
  • URL: /components/raw/brand-bar/_brand-bar.scss
  • Filesystem Path: ../src/03_molecules/brand-bar/_brand-bar.scss
  • Size: 3 KB
  • Content: 
    <svg xmlns="http://www.w3.org/2000/svg" class="header__bar-gradient" preserveAspectRatio="none" viewBox="0 0 1920 4">
  <path fill="url(#header-gradient-bar)" d="M0 0h1920v4H0z"/>
  <defs>
    <linearGradient id="header-gradient-bar" x1="0" x2="1920" y1="4" y2="4" gradientUnits="userSpaceOnUse">
      <stop stop-color="#F18B00"/>
      <stop offset=".0197666" stop-color="#EC5007"/>
      <stop offset=".0374346" stop-color="#E8240D"/>
      <stop offset=".0510396" stop-color="#E60910"/>
      <stop offset=".0589542" stop-color="#E60012"/>
      <stop offset=".0634784" stop-color="#E40023"/>
      <stop offset=".0739395" stop-color="#E20043"/>
      <stop offset=".0849345" stop-color="#E0005C"/>
      <stop offset=".0964616" stop-color="#DF006D"/>
      <stop offset=".108461" stop-color="#DE0078"/>
      <stop offset=".122414" stop-color="#DE007C"/>
      <stop offset=".230176" stop-color="#650064"/>
      <stop offset=".354137" stop-color="#411C64"/>
      <stop offset=".375595" stop-color="#0D0654"/>
      <stop offset=".403703" stop-color="#0B0544"/>
      <stop offset=".435802" stop-color="#090436"/>
      <stop offset=".470738" stop-color="#07032A"/>
      <stop offset=".50993" stop-color="#05021F"/>
      <stop offset=".553184" stop-color="#040217"/>
      <stop offset=".603565" stop-color="#030110"/>
      <stop offset=".666698" stop-color="#03010C"/>
      <stop offset=".755102" stop-color="#020109"/>
      <stop offset="1" stop-color="#020108"/>
    </linearGradient>
  </defs>
</svg>
  • URL: /components/raw/brand-bar/brand-bar.svg
  • Filesystem Path: ../src/03_molecules/brand-bar/brand-bar.svg
  • Size: 1.5 KB

No notes defined.