360Giving Design System - Components

Footer: Default 

<footer class="footer">
    <div class="footer__row wrapper">
        <div class="footer__column-2 footer__branding">
            <div class="footer__logo"><img src="/images/360-giving-logo-white.svg" alt="360Giving"></div>
            <p class="footer__tagline">Open data for more effective grantmaking</p>
        </div>
        <div class="footer__column-1 footer__social hide-print">
            <a href="#" class="github-icon"><img src="/images/github-logo.svg" alt="Check our Github"></a>
            <a href="#" class="twitter-icon"><img src="/images/twitter-logo.svg" alt="Follow us on Twitter"></a>
        </div>
    </div>

    <div class="footer__row wrapper hide-print">
        <div class="footer__column-2 footer__section medium-up">
            <h3 class="footer__heading">Products</h3>
            <ul>
                <li><a href="#">GrantNav</a></li>
                <li><a href="#">Insights</a></li>
                <li><a href="#">Resources</a></li>
                <li><a href="#">Cove</a></li>
            </ul>
        </div>

        <div class="footer__column-2 footer__section medium-up">
            <h3 class="footer__heading">Other Products</h3>
            <ul>
                <li><a href="#">Data Registry</a></li>
                <li><a href="#">Data Standard</a></li>
                <li><a href="#">Data Challenge</a></li>
                <li><a href="#">Data Champions</a></li>
            </ul>
        </div>

        <div class="footer__column-3 footer__section">
            <h3 class="footer__heading">360 Resources</h3>
            <p>Data in JSON format is ideal for direct use by developers building visualisations and web apps. The JSON should conform to the 360Giving JSON Schemas. Anyone automating the publication of their data from their internal databases or via</p>
        </div>

        <div class="footer__column-3 footer__section">
            <h3 class="footer__heading">360 Resources</h3>
            <p>Data in JSON format is ideal for direct use by developers building visualisations and web apps. The JSON should conform to the 360Giving JSON Schemas. Anyone automating the publication of their data from their internal databases or via</p>

        </div>
    </div>

    <div class="wrapper footer__small-print">
        <p>
            <strong>360 Giving</strong> (Trading as <strong>360Giving</strong>) is a registered charity <a href="https://register-of-charities.charitycommission.gov.uk/charity-details/?regId=1164883&subId=0">1164883</a> and a registered company <a href="https://beta.companieshouse.gov.uk/company/09668396">09668396</a>.
            <br>Registered address: 360 Giving, c/o Sayer Vincent, 110 Golden Lane, London, EC1Y 0TG
        </p>
    </div>

    <div class="footer__row wrapper footer__small-print">

        <div class="footer__column-2">
            <p>© Copyright 2021 360Giving.<br>Licensed under a <a href="#" target="_blank">Creative Commons Attribution 4.0 International License</a>.</p>
        </div>
        <div class="footer__column-2 footer__policy-links hide-print">
            <p><a href="#">Privacy Notice</a> | <a href="#">Terms & Conditions</a> | <a href="#">Cookie Policy</a> | <a href="#">Take Down Policy</a> | <a href="#">License</a></p>
        </div>
    </div>
</footer>
 
<footer class="footer">
  <div class="footer__row wrapper">
    <div class="footer__column-2 footer__branding">
      <div class="footer__logo"><img src="/images/360-giving-logo-white.svg" alt="360Giving"></div>
      <p class="footer__tagline">Open data for more effective grantmaking</p>
    </div>
    <div class="footer__column-1 footer__social hide-print">
      <a href="#" class="github-icon"><img src="/images/github-logo.svg" alt="Check our Github"></a>
      <a href="#" class="twitter-icon"><img src="/images/twitter-logo.svg" alt="Follow us on Twitter"></a>
    </div>
  </div>
  
  <div class="footer__row wrapper hide-print">
    <div class="footer__column-2 footer__section medium-up">
      <h3 class="footer__heading">Products</h3>
      <ul>
        <li><a href="#">GrantNav</a></li>
        <li><a href="#">Insights</a></li>
        <li><a href="#">Resources</a></li>
        <li><a href="#">Cove</a></li>
      </ul>
    </div>

    <div class="footer__column-2 footer__section medium-up">
      <h3 class="footer__heading">Other Products</h3>
      <ul>
        <li><a href="#">Data Registry</a></li>
        <li><a href="#">Data Standard</a></li>
        <li><a href="#">Data Challenge</a></li>
        <li><a href="#">Data Champions</a></li>
      </ul>
    </div>

    <div class="footer__column-3 footer__section">
      <h3 class="footer__heading">360 Resources</h3>
      <p>Data in JSON format is ideal for direct use by developers building visualisations and web apps. The JSON should conform to the 360Giving JSON Schemas. Anyone automating the publication of their data from their internal databases or via</p>
    </div>

    <div class="footer__column-3 footer__section">
      <h3 class="footer__heading">360 Resources</h3>
      <p>Data in JSON format is ideal for direct use by developers building visualisations and web apps. The JSON should conform to the 360Giving JSON Schemas. Anyone automating the publication of their data from their internal databases or via</p>

    </div>
  </div>

  <div class="wrapper footer__small-print">
      <p>
        <strong>360 Giving</strong> (Trading as <strong>360Giving</strong>) is a registered charity <a href="https://register-of-charities.charitycommission.gov.uk/charity-details/?regId=1164883&subId=0">1164883</a> and a registered company <a href="https://beta.companieshouse.gov.uk/company/09668396">09668396</a>.
         <br>Registered address: 360 Giving, c/o Sayer Vincent, 110 Golden Lane, London, EC1Y 0TG
      </p>
  </div>

  <div class="footer__row wrapper footer__small-print">
    
    <div class="footer__column-2">
    <p>© Copyright 2021 360Giving.<br>Licensed under a <a href="#" target="_blank">Creative Commons Attribution 4.0 International License</a>.</p>
    </div>
    <div class="footer__column-2 footer__policy-links hide-print">
      <p><a href="#">Privacy Notice</a> | <a href="#">Terms & Conditions</a> | <a href="#">Cookie Policy</a> | <a href="#">Take Down Policy</a> | <a href="#">License</a></p>
    </div>
  </div>
</footer>
 
/* No context defined. */
  • Content: 
    // Footer Grid
.footer {
  &__row { 
    display: flex; 
    @include breakpoint($small-only) { flex-direction: column; }
  }
  &__column-0 { flex: 0; }
  &__column-1 { 
    flex: 1;
    @include breakpoint($small-only) { min-width: 100px; }
  }
  &__column-2 { 
    flex: 2; 
    @include breakpoint($small-only) { min-width: 200px; }
  }
  &__column-3 { flex: 3; }
}

// Footer Structure and Visuals
.footer {
  padding-top: 24px;
  background-color: hsla(var(--base-hsl), 1);

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

  a {
    color: hsla(var(--white-hsl), 1);
    text-decoration: underline;
    text-underline-offset: under;

    &:hover {
      color: hsla(var(--white-hsl), 1);
      text-decoration: underline;
    }

    @media print {
      color: hsl(var(--base-hsl), 1);
    }
  }

  @include breakpoint($large) {
    padding-top: 48px;
  }

  &__row:first-of-type { 
    padding-bottom: 36px;
    border-bottom: 1px solid hsla(var(--white-hsl), .2); 
    @media print {
      padding-bottom: inherit;
    }
  }

  &__row {
    padding: 16px 0;

    @media print {
      @include reset_print;
    }
  }
  
  &__section {
    @include small_text;
    color: hsla(var(--white-hsl), .7);
    padding: 24px 0 16px;

    & + & { 
      @include breakpoint($medium-up) { margin-left: 48px; }
    }

    & li { margin-top: 8px; }
  }

  &__heading {
    @include h4;
    font-weight: bold;
    letter-spacing: 1px;
    color: hsla(var(--yellow-hsl), 1);
    margin-bottom: 16px;
  }

  &__branding,
  &__social { 
    display: flex; 
    align-items: center;
  }

  &__branding {
    @include breakpoint($small-only) { 
      flex-direction: column; 
      text-align: center;

    }
  }

  &__logo { 
    opacity: .5; 
    @include breakpoint($small-only) {
      margin-bottom: 16px;
    }
    @media print {
      img {
        -webkit-filter: invert(100%);
        filter: invert(100%);
        margin-bottom: 0.5cm;
        opacity: 1;
      }
    }
  }

  &__tagline { 
    padding-bottom: 4px;
    color: hsla(var(--white-hsl), 1);
    font-weight: 300;
    letter-spacing: 1px;
    font-size: 1rem;
    @include breakpoint($small-only) { margin-bottom: 16px; }
    @include breakpoint($medium-up) { margin-left: 48px; }
    @include breakpoint($large) { font-size: 1.3rem; }
  }

  &__social {
    justify-content: flex-end;

    @include breakpoint($small-only) { justify-content: center; }

    * + * { margin-left: 24px;}
    .github-icon { line-height: 3px; }
    .twitter-icon { line-height: 8px; }
  }

  &__small-print {
    @include small_text;
    border-top: 1px solid hsla(var(--white-hsl), .2);
    padding-top: 16px;
    padding-bottom: 12px;
    color: hsla(var(--white-hsl), .7);
    @media print {
      color: hsl(var(--base-hsl), 1);
    }
  }

  .edit-github { float: right; }

  &__policy-links {
    a { display: inline-block; } // To avoid line-breaks in the links
    @include breakpoint($medium-up) { text-align: right; }
    @media print {
      text-align: left;
    }
  }

  &--compact {
    padding-top: 12px;
    .footer__small-print {
      border-top: 0;
    }
  }

  @media print {
    border-top: 4px solid hsl(var(--base-hsl), 1);
    background-color: inherit;
    page-break-inside: avoid;
  }
}

.footer {
  p a:hover { color: hsla(var(--white-hsl), 1); }
}
  • URL: /components/raw/footer/footer.scss
  • Filesystem Path: src/components/04-modules/footer/footer.scss
  • Size: 3.3 KB

No notes defined.