Search

Newsletter

@use 'sprucecss/scss/spruce' as *;

.site-footer-newsletter {
  background-color: color('surface-muted');
  border-block-start: config('border-width-base', $display) solid color('border');
  padding-block: spacer-clamp('l', 'xl') spacer('l');

  &__signup {
    align-items: center;
    border-block-end: config('border-width-base', $display) solid color('border');
    display: grid;
    gap: spacer('m');
    padding-block-end: spacer-clamp('l', 'xl');

    @include breakpoint('md') {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
  }

  &__intro {
    @include layout-stack('xs');

    p {
      color: color('muted');
    }
  }

  &__heading {
    font-size: font-size('h3');
  }

  &__form {
    display: flex;
    flex-wrap: wrap;
    gap: spacer('xs');

    .form-control {
      flex: 1 1 14rem;
    }
  }

  // The GDPR consent takes its own row under the field and the button.
  &__consent {
    flex-basis: 100%;
    font-size: config('font-size-sm', $typography);
  }

  &__columns {
    display: grid;
    gap: spacer('l');
    grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
    padding-block: spacer-clamp('l', 'xl');

    @include breakpoint('lg') {
      grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
    }
  }

  &__brand {
    @include layout-stack('s');

    p {
      color: color('muted');
      font-size: config('font-size-sm', $typography);
      max-inline-size: 20rem;
    }
  }

  &__logo {
    align-items: center;
    color: color('heading');
    display: inline-flex;
    font-family: config('font-family-heading', $typography);
    font-size: font-size('h5');
    font-weight: config('font-weight-heading', $typography);
    gap: spacer('xs');
    text-decoration: none;

    img {
      block-size: 2rem;
      inline-size: 2rem;
    }
  }

  &__column {
    @include layout-stack('s');
  }

  &__title {
    font-family: inherit;
    font-size: config('font-size-sm', $typography);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  &__links {
    list-style: none;
    padding: 0;
    @include layout-stack('xs');

    a {
      color: color('text');
      text-decoration: none;

      &:hover {
        color: color('primary');
        text-decoration: underline;
      }
    }
  }

  &__bottom {
    align-items: center;
    border-block-start: config('border-width-base', $display) solid color('border');
    display: flex;
    flex-wrap: wrap;
    font-size: config('font-size-sm', $typography);
    gap: spacer('s') spacer('m');
    padding-block-start: spacer('l');
  }

  &__copyright {
    color: color('muted');
    margin: 0;
  }

  &__legal {
    display: flex;
    gap: spacer('m');
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      margin: 0;
    }

    a {
      color: color('muted');

      &:hover {
        color: color('primary');
      }
    }

    // The items sit side by side: clear the stack margins of the base list style.
    > li {
      margin-block: 0;
      padding-block: 0;
    }
  }

  &__social {
    display: flex;
    gap: spacer('xxs');
    margin-inline-start: auto;

    a {
      align-items: center;
      border-radius: radius('sm');
      color: color('heading');
      display: inline-flex;
      justify-content: center;
      min-block-size: 2.75rem;
      min-inline-size: 2.75rem;

      &:hover {
        color: color('primary');
      }
    }

    svg {
      block-size: 1.25rem;
      inline-size: 1.25rem;
    }
  }
}
<footer class="site-footer-newsletter">
    <div class="container">
        <div class="site-footer-newsletter__signup">
            <div class="site-footer-newsletter__intro">
                <h2 class="site-footer-newsletter__heading" id="footer-newsletter-title">Get the monthly digest</h2>
                <p>New components, design tips and release notes. No spam, unsubscribe anytime.</p>
            </div>
            <form class="site-footer-newsletter__form" action="#" method="post" aria-labelledby="footer-newsletter-title">
                <label class="sr-only" for="footer-newsletter-email">Email address</label>
                <input class="form-control" id="footer-newsletter-email" name="email" type="email" autocomplete="email" placeholder="you@example.com" required>
                <button class="btn btn--primary" type="submit">Subscribe</button>
                <label class="form-check site-footer-newsletter__consent" for="footer-newsletter-consent">
                    <input class="form-check__control" id="footer-newsletter-consent" name="consent" type="checkbox" required>
                    <span class="form-label form-check__label">I agree to receive the newsletter and accept the <a href="#">privacy policy</a>. Unsubscribe anytime.</span>
                </label>
            </form>
        </div>
        <nav class="site-footer-newsletter__columns" aria-label="Footer">
            <div class="site-footer-newsletter__brand">
                <a class="site-footer-newsletter__logo" href="#">
                    <img src="/img/cone-logo.svg" alt="" width="40" height="40">
                    <span>Cone</span>
                </a>
                <p>Fast, accessible websites and products with Laravel and WordPress.</p>
            </div>
            <div class="site-footer-newsletter__column">
                <h2 class="site-footer-newsletter__title" id="footer-newsletter-column-1">Product</h2>
                <ul class="site-footer-newsletter__links" aria-labelledby="footer-newsletter-column-1">
                    <li><a href="#">Features</a></li>
                    <li><a href="#">Pricing</a></li>
                    <li><a href="#">Changelog</a></li>
                    <li><a href="#">Roadmap</a></li>
                </ul>
            </div>
            <div class="site-footer-newsletter__column">
                <h2 class="site-footer-newsletter__title" id="footer-newsletter-column-2">Resources</h2>
                <ul class="site-footer-newsletter__links" aria-labelledby="footer-newsletter-column-2">
                    <li><a href="#">Documentation</a></li>
                    <li><a href="#">Guides</a></li>
                    <li><a href="#">Components</a></li>
                    <li><a href="#">Support</a></li>
                </ul>
            </div>
            <div class="site-footer-newsletter__column">
                <h2 class="site-footer-newsletter__title" id="footer-newsletter-column-3">Company</h2>
                <ul class="site-footer-newsletter__links" aria-labelledby="footer-newsletter-column-3">
                    <li><a href="#">About</a></li>
                    <li><a href="#">Careers</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </nav>
        <div class="site-footer-newsletter__bottom">
            <p class="site-footer-newsletter__copyright">© 2026 Cone. All rights reserved.</p>
            <ul class="site-footer-newsletter__legal" role="list">
                <li><a href="#">Privacy</a></li>
                <li><a href="#">Terms</a></li>
                <li><a href="#">Cookies</a></li>
            </ul>
            <div class="site-footer-newsletter__social" role="group" aria-label="Follow us">
                <a href="#"><span class="sr-only">LinkedIn</span><svg aria-hidden="true" focusable="false" height="24" style="fill-rule:evenodd;clip-rule:evenodd;fill:currentColor;overflow:visible;" viewBox="0 0 24 24" width="24" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"> <path d="M5.373,24l-4.977,0l0,-16.023l4.977,-0l0,16.023Zm-2.491,-18.209c-1.591,0 -2.882,-1.318 -2.882,-2.909c-0,-1.581 1.301,-2.882 2.882,-2.882c1.581,-0 2.882,1.301 2.882,2.882c0,1.591 -1.291,2.909 -2.882,2.909Zm21.118,18.209l-4.971,0l-0,-7.8c-0,-1.859 -0.038,-4.243 -2.588,-4.243c-2.587,0 -2.984,2.02 -2.984,4.109l0,7.934l-4.971,0l-0,-16.023l4.773,-0l-0,2.185l0.07,0c0.664,-1.258 2.287,-2.587 4.708,-2.587c5.036,-0 5.963,3.316 5.963,7.623l-0,8.802Z"></path> </svg></a>
                <a href="#"><span class="sr-only">X</span><svg aria-hidden="true" focusable="false" height="24" style="fill-rule:evenodd;clip-rule:evenodd;fill:currentColor;overflow:visible;" viewBox="0 0 24 24" width="24" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"> <path d="M18.901,1.153l3.681,0l-8.04,9.189l9.458,12.505l-7.406,-0l-5.801,-7.584l-6.637,7.584l-3.682,-0l8.6,-9.829l-9.074,-11.865l7.594,0l5.243,6.932l6.064,-6.932Zm-1.291,19.491l2.039,0l-13.163,-17.404l-2.188,0l13.312,17.404Z"></path> </svg></a>
                <a href="#"><span class="sr-only">GitHub</span><svg aria-hidden="true" focusable="false" height="24" style="fill-rule:evenodd;clip-rule:evenodd;fill:currentColor;overflow:visible;" viewBox="0 0 24 24" width="24" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"> <path d="m12 .5c-6.63 0-12 5.28-12 11.792 0 5.211 3.438 9.63 8.205 11.188.6.111.82-.254.82-.567 0-.28-.01-1.022-.015-2.005-3.338.711-4.042-1.582-4.042-1.582-.546-1.361-1.335-1.725-1.335-1.725-1.087-.731.084-.716.084-.716 1.205.082 1.838 1.215 1.838 1.215 1.07 1.803 2.809 1.282 3.495.981.108-.763.417-1.282.76-1.577-2.665-.295-5.466-1.309-5.466-5.827 0-1.287.465-2.339 1.235-3.164-.135-.298-.54-1.497.105-3.121 0 0 1.005-.316 3.3 1.209.96-.262 1.98-.392 3-.398 1.02.006 2.04.136 3 .398 2.28-1.525 3.285-1.209 3.285-1.209.645 1.624.24 2.823.12 3.121.765.825 1.23 1.877 1.23 3.164 0 4.53-2.805 5.527-5.475 5.817.42.354.81 1.077.81 2.182 0 1.578-.015 2.846-.015 3.229 0 .309.21.678.825.56 4.801-1.548 8.236-5.97 8.236-11.173 0-6.512-5.373-11.792-12-11.792z"></path> </svg></a>
                <a href="#"><span class="sr-only">Instagram</span><svg aria-hidden="true" focusable="false" height="24" style="fill-rule:evenodd;clip-rule:evenodd;fill:currentColor;overflow:visible;" viewBox="0 0 24 24" width="24" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"> <path d="M12.008,5.843c-3.407,-0 -6.155,2.747 -6.155,6.154c0,3.407 2.748,6.155 6.155,6.155c3.407,-0 6.155,-2.748 6.155,-6.155c-0,-3.407 -2.748,-6.154 -6.155,-6.154Zm0,10.156c-2.201,-0 -4.001,-1.795 -4.001,-4.002c-0,-2.207 1.794,-4.001 4.001,-4.001c2.207,-0 4.001,1.794 4.001,4.001c0,2.207 -1.799,4.002 -4.001,4.002Zm7.842,-10.408c0,0.798 -0.643,1.435 -1.435,1.435c-0.799,0 -1.436,-0.642 -1.436,-1.435c-0,-0.793 0.643,-1.436 1.436,-1.436c0.792,0 1.435,0.643 1.435,1.436Zm4.076,1.457c-0.091,-1.923 -0.53,-3.627 -1.939,-5.03c-1.403,-1.403 -3.106,-1.843 -5.029,-1.939c-1.982,-0.113 -7.923,-0.113 -9.905,-0c-1.917,0.091 -3.621,0.53 -5.03,1.934c-1.408,1.403 -1.842,3.106 -1.939,5.029c-0.112,1.982 -0.112,7.923 0,9.905c0.091,1.923 0.531,3.626 1.939,5.03c1.409,1.403 3.107,1.842 5.03,1.939c1.982,0.112 7.923,0.112 9.905,-0c1.923,-0.091 3.626,-0.531 5.029,-1.939c1.404,-1.404 1.843,-3.107 1.939,-5.03c0.113,-1.982 0.113,-7.917 0,-9.899Zm-2.56,12.025c-0.418,1.05 -1.227,1.859 -2.282,2.282c-1.58,0.627 -5.33,0.482 -7.076,0.482c-1.746,0 -5.501,0.14 -7.076,-0.482c-1.05,-0.418 -1.859,-1.226 -2.282,-2.282c-0.627,-1.58 -0.482,-5.329 -0.482,-7.076c0,-1.746 -0.139,-5.501 0.482,-7.076c0.418,-1.05 1.227,-1.858 2.282,-2.282c1.58,-0.626 5.33,-0.482 7.076,-0.482c1.746,0 5.501,-0.139 7.076,0.482c1.05,0.418 1.859,1.227 2.282,2.282c0.627,1.58 0.482,5.33 0.482,7.076c0,1.747 0.145,5.501 -0.482,7.076Z"></path> </svg></a>
            </div>
        </div>
    </div>
</footer>

Newsletter

On this page

A site footer that opens with a newsletter signup, followed by the brand and three link columns, and the legal links and social profiles at the bottom.

Anatomy

  • .site-footer-newsletter__signup: the __intro (heading and text) and the __form, side by side from the md breakpoint.
  • .site-footer-newsletter__columns: a nav with the __brand (logo and text) and the link __columns, each with a __title and __links.
  • .site-footer-newsletter__bottom: the copyright, the __legal links and the __social links.

Accessibility

  • The form is labeled by the signup heading, and the email field has a hidden label (the placeholder isn't a label).
  • Every link list is labeled by its column title (aria-labelledby), and the column titles are h2s, so screen reader users can jump between them.
  • The social links are icons with hidden text ("GitHub") in a labeled group, and they're at least 2.75rem (44px) in both directions.
  • The logo link's name is the visible brand name; the mark is decorative.

Technical Details

  • The columns are an auto-fit grid on small screens and a fixed 2fr 1fr 1fr 1fr layout from lg.
  • The social links come from a shared include (social-links.html); swap the profiles there.
  • Connect the form to your newsletter provider; use the Newsletter component for a version with the consent checkbox and the states.
  • The form has a required GDPR consent checkbox, unchecked by default (consent must be an active choice), with a link to the privacy policy. Keep the wording specific: what the person signs up for and how to unsubscribe. Store the consent with a timestamp on the server.

Documentation

Learn about Spruce CSS through our extensive documentation.

Read more
Documentation

Components

Explore our UI library of accessible components built with Spruce CSS.

Read more
Components

Blocks and Pages

Full-width page blocks and complete page templates, ready to copy.

Explore
Blocks and Pages

Find us on GitHub

Did you find a bug? Have an idea or a question? Please open an issue to help us develop the project.

GitHub