Modern SaaS Footer: Newsletter Footer

Newsletter Footer closes a page for an insights product. Its top row pairs a short title and a two line lede with an email field and a primary pill. Under it sit four equal link columns, the middle two holding a second group each, with the social glyphs at the foot of the last column, and a hairline over the legal row.

The type stays quiet: group headings are small and medium weight, links are regular and muted, and no link carries a badge or an arrow.

When to use

Use it on a product site with a lot to link to, such as resources, community pages and topics, and a reason to collect email addresses. The signup sits in the top row, so it is the first thing the footer offers.

A natural flow around it on a Modern SaaS page:

Before

• CTAs that ask for the sign up one last time
• FAQs to clear the final questions

What you can customize

• Columns. Edit the columns array: each column holds one or more groups of a heading and its links. Keep every link to one line. On phones the groups sit two to a row in mobileOrder; list them so each pair has a similar number of links and the two columns end level.
• Signup. Change the title, lede, placeholder and pill label, and point the form at your mailing list.
• Socials. Edit socials. Instagram and YouTube come from @icons-pack/react-simple-icons; LinkedIn and Twitter are in components/ui/brand-icons.tsx.

Tip: keep the column headings to one word each so all four line up on a single row at every width.