OCDE - Pattern Library v1.13.0

Footer: Industry (Example) 

<footer class="footer footer-industry l-containerxaxis" data-dialog="inertcontainer" data-menu="inertcontainer">
    <div class="footer-x-inner">
        <div class="footer-x-leftcol">
            <div class="footer-x-sponsors">
                <span class="footer-x-sponsorslabel">Sponsors:</span>
                <span>LAOCRC</span>
                <span class="footer-x-bullet">•</span>
                <span>Orange County Regional Consortia</span>
            </div>
            <ul>
                <li>
                    <a href="#">Site Map</a>
                </li>
                <li>
                    <a href="#">Local Administrative Control Login</a>
                </li>
                <li>
                    <a href="#">Report a Problem</a>
                </li>
                <li>
                    Want to see your region in Program Finder? <a href="#">Contact us</a>
                </li>
                <li>
                    <a href="#">Resources</a>
                </li>
            </ul>
        </div>
        <div class="footer-x-rightcol">
            <img src="../../assets/images/footer-logo.svg" alt="California Community Colleges logo" width="272" height="34">
        </div>
    </div>
</footer>
 
<footer class="footer{{#if modifier}} {{modifier}}{{/if}} {{render '@l-containerxaxis'}}" data-dialog="inertcontainer" data-menu="inertcontainer">
  <div class="footer-x-inner">
    <div class="footer-x-leftcol">
      <div class="footer-x-sponsors">
        <span class="footer-x-sponsorslabel">Sponsors:</span>
        <span>LAOCRC</span>
        <span class="footer-x-bullet">•</span>
        <span>Orange County Regional Consortia</span>
      </div>
      <ul>
        <li>
          <a href="#">Site Map</a>
        </li>
        <li>
          <a href="#">Local Administrative Control Login</a>
        </li>
        <li>
          <a href="#">Report a Problem</a>
        </li>
        <li>
          Want to see your region in Program Finder? <a href="#">Contact us</a>
        </li>
        <li>
          <a href="#">Resources</a>
        </li>
      </ul>
    </div>
    <div class="footer-x-rightcol">
      <img src="{{path '/assets/images/footer-logo.svg'}}" alt="California Community Colleges logo" width="272" height="34">
    </div>
  </div>
</footer>
 
{
  "modifier": "footer-industry"
}
  • Content: 
    .footer {
  background-color: $color-light4;
  color: $color-dark5;
  padding-bottom: $gridspacing * 3;
  padding-top: $gridspacing * 3;

  img {
    height: auto;
    max-width: 100%;
  }

  ul {
    padding: 0;
    list-style: none;

    li {
      margin-bottom: $gridspacing;
    }
  }

  .footer-x-sponsors {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: $gridspacing;
  }

  .footer-x-sponsorslabel {
    @include textstyle-smallbold;
    margin-right: $gridspacing * 2;
  }

  .footer-x-bullet {
    margin-left: $gridspacing / 2;
    margin-right: $gridspacing / 2;
  }

  @media (min-width: $media-tablet) {
    padding-bottom: $gridspacing * 5;
    padding-top: $gridspacing * 5;

    .footer-x-inner {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
    }

    .footer-x-rightcol {
      flex-shrink: 0;
    }

    .footer-x-sponsors {
      display: flex;
      align-items: center;
    }
  }

  @media print {
    display: none;
  }
}

.footer-industry {
  @media (min-width: $media-desktop) {
    display: none;
  }
}
  • URL: /components/raw/footer/_footer.scss
  • Filesystem Path: src/scss/02-modules/footer/_footer.scss
  • Size: 1.1 KB

No notes defined.