BFNA Design System

Footer 

<footer class="footer">
    <div class="wrapper wrapper--padded">
        <div class="footer__content footer--top">
            <p class="footer__tagline">Transatlantic Perspectives on Global Challenges</p>
            <div class="footer__social">
                <a class="footer__button" href="#" target="_blank">
          <svg role="img" fill="white" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"><path d="M445 643h-90V419h-75v-87h75v-64c0-75 45-115 112-115 37 0 67 3 67 3v78h-46c-36 0-43 18-43 43v55h86l-11 87h-75v224z"/></svg>
        </a>
                <a class="footer__button" href="#" target="_blank">
          <svg role="img" fill="white" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"><path d="M679 239s-21 34-55 57c7 156-107 329-314 329-103 0-169-50-169-50s81 17 163-45c-83-5-103-77-103-77s23 6 50-2c-93-23-89-110-89-110s23 14 50 14c-84-65-34-148-34-148s76 107 228 116c-22-121 117-177 188-101 37-6 71-27 71-27s-12 41-49 61c30-2 63-17 63-17z"/></svg>
        </a>
                <a class="footer__button" href="#" target="_blank">
          <svg role="img" fill="white" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"><path d="M400 224c144 0 201 2 224 25 17 17 26 52.125 26 151s-9 134-26 151c-23 23-80 25-224 25s-201-2-224-25c-17-17-26-52.125-26-151s9-134 26-151c23-23 80-25 224-25zm-52 100v141l135-70z"/></svg>
        </a>
                <a class="footer__button" href="#" target="_blank">
          <svg role="img" fill="white" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"><path d="M400 309c-51 0-92 41-92 90s41 90 92 90 93-41 93-90-42-90-93-90zm178 56h-40c27 97-50 178-138 178s-164-82-137-178h-42v194c0 10 8 18 18 18h321c10 0 18-8 18-18V365zm-73-144c-11 0-21 10-21 21v49c0 11 10 21 21 21h52c11 0 21-10 21-21v-49c0-11-10-21-21-21h-52zm-276-51h342c32 0 59 27 59 59v342c0 32-27 59-59 59H229c-32 0-59-27-59-59V229c0-32 27-59 59-59z"/></svg>
        </a>
            </div>
        </div>

        <div class="footer__content">

            <div class="footer__section">
                <h3 class="footer__heading">Topics</h3>
                <ul class="footer__links">

                    <li><a class="footer__link" href="/democracy">Democracy</a></li>

                    <li><a class="footer__link" href="/future-leadership">Future Leadership</a></li>

                    <li><a class="footer__link" href="/digital-world">Digital World</a></li>

                    <li><a class="footer__link" href="/politics-society">Politics &amp; Society</a></li>

                </ul>
            </div>

            <div class="footer__section">
                <h3 class="footer__heading">The Foundation</h3>
                <ul class="footer__links">

                    <li><a class="footer__link" href="/about">About</a></li>

                    <li><a class="footer__link" href="/board-of-directors">Board of Directors</a></li>

                    <li><a class="footer__link" href="/team">Team</a></li>

                    <li><a class="footer__link" href="/bertelsmann-stiftung">Bertelsmann Stiftung</a></li>

                </ul>
            </div>

            <div class="footer__section">
                <h3 class="footer__heading">Updates</h3>
                <ul class="footer__links">

                    <li><a class="footer__link" href="/articles">Publications</a></li>

                    <li><a class="footer__link" href="/infographics">Infographics</a></li>

                    <li><a class="footer__link" href="/videos">Videos</a></li>

                </ul>
            </div>

            <div class="footer__section">
                <h3 class="footer__heading">Contact</h3>
                <p class="footer__address">Bertelsmann Foundation<br>1108 16th Street, NW Floor 1, Washington, DC, USA 20036 +1.202.384.1980</p>
            </div>
        </div>
    </div>
    <div class="footer__ribbon">
        <div class="wrapper">
            <p class="footer__copyright">© 2020 Copyright Bertelsmann Foundation.</p>
            <p class="footer__by-line"><a href="https://ccmdesign.ca" target="_blank">by ccm.design</a></p>
        </div>
    </div>
</footer>
 
<footer class="footer">
  <div class="wrapper wrapper--padded">
    <div class="footer__content footer--top">
      <p class="footer__tagline">Transatlantic Perspectives on Global Challenges</p>
      <div class="footer__social">
        <a class="footer__button" href="#" target="_blank">
          <svg role="img" fill="white" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"><path d="M445 643h-90V419h-75v-87h75v-64c0-75 45-115 112-115 37 0 67 3 67 3v78h-46c-36 0-43 18-43 43v55h86l-11 87h-75v224z"/></svg>
        </a>
        <a class="footer__button" href="#" target="_blank">
          <svg role="img" fill="white" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"><path d="M679 239s-21 34-55 57c7 156-107 329-314 329-103 0-169-50-169-50s81 17 163-45c-83-5-103-77-103-77s23 6 50-2c-93-23-89-110-89-110s23 14 50 14c-84-65-34-148-34-148s76 107 228 116c-22-121 117-177 188-101 37-6 71-27 71-27s-12 41-49 61c30-2 63-17 63-17z"/></svg>
        </a>
        <a class="footer__button" href="#" target="_blank">
          <svg role="img" fill="white" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"><path d="M400 224c144 0 201 2 224 25 17 17 26 52.125 26 151s-9 134-26 151c-23 23-80 25-224 25s-201-2-224-25c-17-17-26-52.125-26-151s9-134 26-151c23-23 80-25 224-25zm-52 100v141l135-70z"/></svg>
        </a>
        <a class="footer__button" href="#" target="_blank">
          <svg role="img" fill="white" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"><path d="M400 309c-51 0-92 41-92 90s41 90 92 90 93-41 93-90-42-90-93-90zm178 56h-40c27 97-50 178-138 178s-164-82-137-178h-42v194c0 10 8 18 18 18h321c10 0 18-8 18-18V365zm-73-144c-11 0-21 10-21 21v49c0 11 10 21 21 21h52c11 0 21-10 21-21v-49c0-11-10-21-21-21h-52zm-276-51h342c32 0 59 27 59 59v342c0 32-27 59-59 59H229c-32 0-59-27-59-59V229c0-32 27-59 59-59z"/></svg>
        </a>
      </div>
    </div>
    
    <div class="footer__content">
      {% for column in columns %}
      <div class="footer__section">
        <h3 class="footer__heading">{{ column.name }}</h3>
        <ul class="footer__links">
        {% for item in column.links %}
          <li><a class="footer__link" href="{{ item.link }}">{{ item.name }}</a></li>
        {% endfor %}
        </ul>
      </div>
      {% endfor %}

      <div class="footer__section">
        <h3 class="footer__heading">{{ contact.name }}</h3>
        <p class="footer__address">Bertelsmann Foundation<br>{{ contact.address }}</p>
      </div>
    </div>
  </div>
  <div class="footer__ribbon">
    <div class="wrapper">
      <p class="footer__copyright">© 2020 Copyright Bertelsmann Foundation.</p>
      <p class="footer__by-line"><a href="https://ccmdesign.ca" target="_blank">by ccm.design</a></p>
    </div>
  </div>
</footer>
 
{
  "columns": [
    {
      "name": "Topics",
      "links": [
        {
          "name": "Democracy",
          "link": "/democracy"
        },
        {
          "name": "Future Leadership",
          "link": "/future-leadership"
        },
        {
          "name": "Digital World",
          "link": "/digital-world"
        },
        {
          "name": "Politics & Society",
          "link": "/politics-society"
        }
      ]
    },
    {
      "name": "The Foundation",
      "links": [
        {
          "name": "About",
          "link": "/about"
        },
        {
          "name": "Board of Directors",
          "link": "/board-of-directors"
        },
        {
          "name": "Team",
          "link": "/team"
        },
        {
          "name": "Bertelsmann Stiftung",
          "link": "/bertelsmann-stiftung"
        }
      ]
    },
    {
      "name": "Updates",
      "links": [
        {
          "name": "Publications",
          "link": "/articles"
        },
        {
          "name": "Infographics",
          "link": "/infographics"
        },
        {
          "name": "Videos",
          "link": "/videos"
        }
      ]
    }
  ],
  "contact": {
    "name": "Contact",
    "address": "1108 16th Street, NW Floor 1, Washington, DC, USA 20036 +1.202.384.1980"
  }
}
  • Content: 
    .footer {
  background-color: var(--color-navy);
  color: var(--colors-white);
  padding-top: 4rem;
  font-size: 1.1rem;
  @include breakpoint($medium) { padding-left: 80px; }

  * { color: currentColor; }
  a { text-decoration: none; }
  ul { padding-left: 0; }
  li { list-style-type: none; }

  &__content { 
    display: flex; 
    flex-wrap: wrap;
  }

  &--top { 
    display: block;

    @include breakpoint($large) {
      display: flex;
      justify-content: space-between;
    }
  }

  &__section { 
    flex-grow: 1;
    flex-basis: 15rem;
  }

  &__copyright,
  &__by-line { color: hsla(var(--white-hsl), 0.25); }
}

.footer__ribbon { 
  background: hsla(var(--black-hsl), 0.2);
  
  > * {
    display: flex;
    justify-content: space-between;
  }

  a:hover { color: white; }
}

.footer__logo {
  background-color: var(--color-navy);
  color: var(--colors-white);
  max-width: 140px;
  opacity: .25;
}

.footer__tagline {
  opacity: .25;
  padding: 0;
  margin: 0;
  font-size: 1rem;
  letter-spacing: 0.56px;

  @include breakpoint($large) {
    font-size: 1.8rem; 
    flex-grow: 3;
  }
}

.footer__social {
  @include breakpoint($large) {
    flex-basis: 14.5rem;
    flex-grow: 1;
  }
}

.footer__button {
  @extend .u-button-reset;
  height: 32px;
  width: 32px;
  padding: 4px;

  border-radius: 0;
  opacity: .25;

  @include breakpoint($large) {
    height: 48px;
    width: 48px;
    padding: 8px;
  }
}

.footer__links {
  a {
    padding: .3rem 0;
  }
}

.footer__link {
  color: var(--colors-white);
  font-size: 1.1rem;
  font-weight: 300;
  
  // We should incorporate this in the mixin (typography)
  // color: var(--theme-color); 
  text-decoration: none;
  position: relative;
  
  &:before {
    content: "";
    position: absolute;
    left: -4px;
    right: -4px;
    bottom: -2px;
    height: 0px;
    // height: 1px;
    // background-color: hsla(var(--theme-hsl), .2);
    background-color: hsla(var(--white-hsl), .2);
    transition: all .2s ease;
  }

  &:hover:before {
    height: 100%; 
    background-color: hsla(var(--white-hsl), .3);
    // background-color: hsla(var(--theme-hsl), .3);
  }
}
  • URL: /components/raw/footer/footer.scss
  • Filesystem Path: src/components/04-modules/footer/footer.scss
  • Size: 2.1 KB

There are no notes for this item.