360Giving Design System - Components

Footer: Default

1179 × 333 
<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> is a trading name of Funders Together.
            <br><strong>Funders Together</strong> is a charitable company registered in England and Wales, Company number: 5596299 and Charity number: 1116201.
            Registered address: 4 Chiswell Street, London EC1Y 4UP.
        </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> is a trading name of Funders Together.
        <br><strong>Funders Together</strong> is a charitable company registered in England and Wales, Company number: 5596299 and Charity number: 1116201.
        Registered address: 4 Chiswell Street, London EC1Y 4UP.
      </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.