V6 Clearleft Patterns

Footer 

<footer class="Site-footer Footer theme--dark">
    <div class="grid grid--of-two constrain">
        <div class="Footer__content flow--gutter">
            <div class="grid grid--of-two">
                <ul class="Footer__nav flow" role="list">
                    <li><a class="focus" href="#">Services</a></li>
                    <li><a class="focus" href="#">Work</a></li>
                    <li><a class="focus" href="#">Thinking</a></li>
                    <li><a class="focus" href="#">About</a></li>
                    <li><a class="focus" href="#">Contact</a></li>
                </ul>

                <nav>
                    <ul class="Footer__nav flow--xs" role="list">
                        <li class="body small">
                            <span class="block">68 Middle Street</span>
                            <span class="block">Brighton</span>
                            <span class="block">BN1 1AL</span>
                            <span class="block">United Kingdom</span>
                        </li>
                        <li>
                            <a class="focus" href="mailto:info@clearleft.com">
                                info@clearleft.com
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
            <p class="Footer__copyright body small">
                <span class="nowrap">Copyright &copy; 2005-Now Clearleft Ltd.</span>
                <span class="nowrap">All Rights Reserved.</span>
            </p>
        </div>

        <div class="flow--gutter">
            <nav class="Footer__social">
                <ul class="Footer__icons" role="list">
                    <li class="Footer__icon">
                        <a class="Footer__icon-link focus" href="https://twitter.com/clearleft" aria-label="Follow us on twitter">

                            <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--twitter  Icon--m">
                                <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#twitter"></use>
                            </svg>
                        </a>
                    </li>
                    <li class="Footer__icon">
                        <a class="Footer__icon-link focus" href="https://www.instagram.com/weareclearleft/" aria-label="Follow us on instagram">

                            <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--instagram  Icon--m">
                                <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#instagram"></use>
                            </svg>
                        </a>
                    </li>
                    <li class="Footer__icon">
                        <a class="Footer__icon-link focus" href="https://www.linkedin.com/company/clearleft/" aria-label="Follow us on linkedin">

                            <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--linkedin  Icon--m">
                                <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#linkedin"></use>
                            </svg>
                        </a>
                    </li>
                    <li class="Footer__icon">
                        <a class="Footer__icon-link focus" href="https://medium.com/clear-left-thinking" aria-label="Follow us on medium">

                            <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--medium  Icon--m">
                                <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#medium"></use>
                            </svg>
                        </a>
                    </li>
                    <li class="Footer__icon">
                        <a class="Footer__icon-link focus" href="https://www.flickr.com/photos/clearleft/" aria-label="Follow us on flickr">

                            <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--flickr  Icon--m">
                                <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#flickr"></use>
                            </svg>
                        </a>
                    </li>
                    <li class="Footer__icon">
                        <a class="Footer__icon-link focus" href="https://www.youtube.com/channel/UCnCDHgM8pT51sE7tlcgDsZg" aria-label="Follow us on youtube">

                            <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--youtube  Icon--m">
                                <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#youtube"></use>
                            </svg>
                        </a>
                    </li>
                    <li class="Footer__icon">
                        <a class="Footer__icon-link focus" href="https://vimeo.com/clearleft" aria-label="Follow us on vimeo">

                            <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--vimeo  Icon--m">
                                <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#vimeo"></use>
                            </svg>
                        </a>
                    </li>
                </ul>
            </nav>
            <form class="Footer__form flow--xs" action="https://clearleft.us1.list-manage.com/subscribe?u=262832f6c05900ce22e8b14b6&id=02008ae435&email=value" method="post" target="popupwindow">
                <legend class="h h-5">
                    Sign up to our newsletter
                </legend>
                <fieldset class="Footer__form-fieldset">
                    <input type="hidden" name="embed" value="1" />

                    <div class="Text-input flow--2xs Footer__form-input">
                        <label class="Text-input__title small vh" for="tle-email">
                            Email address
                        </label>
                        <input placeholder="Email address" class="Input " type="email" id="tle-email" name="MERGE0" value="" />
                    </div>

                    <button class="Button focus Button--outline-light" type="submit"><span>Sign up</span><svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right  Icon--s">
                            <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
                        </svg></button>
                </fieldset>
                <p class="body small">
                    Every two weeks we send out a newsletter. It's a round-up of
                    handpicked hyperlinks covering design, technology, and culture.
                </p>
            </form>
        </div>
    </div>
</footer>
 
{% set socialLinks = [
  {
    url: 'https://twitter.com/clearleft',
    src: 'twitter',
    alt: 'twitter'
  },
  {
    url: 'https://www.instagram.com/weareclearleft/',
    src: 'instagram',
    alt: 'instagram'
  },
  {
    url: 'https://www.linkedin.com/company/clearleft/',
    src: 'linkedin',
    alt: 'linkedin'
  },
  {
    url: 'https://medium.com/clear-left-thinking',
    src: 'medium',
    alt: 'medium'
  },
  {
    url: 'https://www.flickr.com/photos/clearleft/',
    src: 'flickr',
    alt: 'flickr'
  },
  {
    url: 'https://www.youtube.com/channel/UCnCDHgM8pT51sE7tlcgDsZg',
    src: 'youtube',
    alt: 'youtube'
  },
  {
    url: 'https://vimeo.com/clearleft',
    src: 'vimeo',
    alt: 'vimeo'
  }
] %}

<footer class="Site-footer Footer theme--dark">
  <div class="grid grid--of-two constrain">
    <div class="Footer__content flow--gutter">
      <div class="grid grid--of-two">
        <ul class="Footer__nav flow" role="list">
          {% for link in links %}
            <li><a class="focus" href="{{ link.url }}">{{ link.title }}</a></li>
          {% endfor %}
        </ul>

        <nav>
          <ul class="Footer__nav flow--xs" role="list">
            <li class="body small">
              <span class="block">68 Middle Street</span>
              <span class="block">Brighton</span>
              <span class="block">BN1 1AL</span>
              <span class="block">United Kingdom</span>
            </li>
            <li>
              <a class="focus" href="mailto:info@clearleft.com">
                info@clearleft.com
              </a>
            </li>
          </ul>
        </nav>
      </div>
      <p class="Footer__copyright body small">
        <span class="nowrap">Copyright &copy; 2005-Now Clearleft Ltd.</span>
        <span class="nowrap">All Rights Reserved.</span>
      </p>
    </div>

    <div class="flow--gutter">
      <nav class="Footer__social">
        <ul class="Footer__icons" role="list">
          {% for link in socialLinks %}
            <li class="Footer__icon">
              <a class="Footer__icon-link focus"
                href="{{ link.url }}"
                aria-label="Follow us on {{ link.alt }}">
                {% include '@icon' with {
                  id: link.src,
                  size: 'm'
                } %}
              </a>
            </li>
          {% endfor %}
        </ul>
      </nav>
      <form class="Footer__form flow--xs"
        action="https://clearleft.us1.list-manage.com/subscribe?u=262832f6c05900ce22e8b14b6&id=02008ae435&email=value"
        method="post"
        target="popupwindow">
        <legend class="h h-5">
          Sign up to our newsletter
        </legend>
        <fieldset class="Footer__form-fieldset">
          <input type="hidden" name="embed" value="1" />
          {% include '@text-input' with {
            showLabel: false,
            showPlaceholder: true,
            classes: 'Footer__form-input',
            label: 'Email address',
            name: 'MERGE0',
            id: 'tle-email',
            type: 'email',
            required: false,
            errors: [],
            value: ''
          } %}
          {% include '@button' with {
            arrow: true,
            style: 'outline-light',
            text: 'Sign up',
            attributes: {
              type: 'submit'
            }
          } %}
        </fieldset>
        <p class="body small">
          Every two weeks we send out a newsletter. It's a round-up of
          handpicked hyperlinks covering design, technology, and culture.
        </p>
      </form>
    </div>
  </div>
</footer>
 
{
  "links": [
    {
      "url": "#",
      "title": "Services"
    },
    {
      "url": "#",
      "title": "Work"
    },
    {
      "url": "#",
      "title": "Thinking"
    },
    {
      "url": "#",
      "title": "About"
    },
    {
      "url": "#",
      "title": "Contact"
    }
  ]
}
  • Content: 
    .Footer {
  --theme: var(--grey-step-2);

  font-size: var(--step--1);
  margin-top: auto;
  padding: var(--space-xl-2xl) 0;

  &__nav a {
    color: var(--white);
    text-decoration: none;
    border-bottom: solid 1px transparent;

    &:hover,
    &:focus {
      border-bottom: solid 1px currentColor;
    }
  }

  &__content {
    order: 1;
  }

  &__icons {
    display: flex;
    align-items: center;
    gap: var(--space-s);
  }

  &__icon-link {
    display: block;
    line-height: 1;
    color: var(--white);
    transition: color 0.1s var(--confident-ease);

    &:hover,
    &:focus,
    &:active {
      color: var(--green);
    }
  }

  &__form-fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
  }

  &__form-input {
    flex: 1;

    input {
      margin: 0;
    }
  }
}

@media screen and (min-width: 50rem) {
  .Footer {
    &__content {
      order: 0;
    }

    &__social {
      display: flex;
      justify-content: flex-end;
    }
  }
}
  • URL: /components/raw/footer/footer.css
  • Filesystem Path: src/templates/components/footer/footer.css
  • Size: 1 KB

No notes defined.