5 Footer inspiration for your next project with ui prompt
Compare five website footer layouts for ecommerce, SaaS, studios, and product brands. Explore live previews, see the React code, and copy a UI prompt for your project.
People reach a footer with a job to do. A shopper might need a support number, a SaaS customer might need the terms, and a prospective client might be looking for a way to start a project. Start with that job and give its link or action a clear place.
These five footers come from the UI Design Prompts demo library. Each example includes a desktop and mobile preview, the React reference component, and a copyable UI prompt. Links give local feedback in the previews, and the Kova signup stays in the browser.
Five website footer designs at a glance
| Footer | Best for | On mobile | Tradeoff |
|---|---|---|---|
| Ecommerce contact | Stores with several support channels | Contact details first, then store links and brand | Contact details need maintenance |
| SaaS utility | Products with a short set of utility links | Centered, wrapping link row | Crowds quickly as destinations grow |
| Monochrome studio | Portfolios and agencies | Large wordmark above Studio and Contact | Takes more vertical space |
| Bauhaus sign-off | Design practices and short portfolios | Red brand block over wrapping links | One link group limits depth |
| DTC newsletter | Product brands with an active email program | Full-width email field and signup button | Adds form and consent requirements |
01. BestTech’s contact-first ecommerce footer
BestTech gives phone, email, and address the first column. Orange icons make the channels easy to distinguish. Useful links occupy the middle column, and a short store introduction sits on the right. A fine rule sets the copyright and social links apart from the main grid.
The preview keeps that arrangement and replaces the source demo’s filler with sample store copy and contact details. When the columns stack, the contact options stay first. That keeps the most practical part of the footer in reach for someone checking an order from their phone.
02. LinkForge’s compact SaaS utility footer
LinkForge fits its wordmark, four utility links, and copyright into a single row on desktop. The pale surrounding canvas and thin document border make the white footer feel like the last line of the page. Privacy and Terms stay beside product-specific destinations such as Site Inventory.
The same content stacks in three centered rows on mobile. The middle row wraps so longer labels stay readable at narrow widths.
03. UNIT’s high-contrast studio footer
UNIT opens with a heavy black rule and an oversized wordmark on white. The type establishes the brand, then two labeled groups separate browsing the studio’s work from making contact. A smaller copyright line closes the page.
On mobile, the wordmark sits above both groups. The two columns keep Work and Start a project visible at the same level. The preview keeps the links visible immediately and darkens secondary text for readability.
04. Form’s red-block Bauhaus sign-off
Form splits the footer into two surfaces. A fixed-width red block carries the wordmark, while the white side holds a short uppercase navigation list and a copyright line. A thick black rule and divider make the two surfaces feel like one composition.
The preview deepens the red slightly for the white wordmark and turns the vertical divider into a horizontal rule on mobile. Links wrap in the white panel, with the original order intact.
05. Kova’s newsletter-led DTC footer
Kova uses a charcoal surface with the wordmark and social links on the left, quick links in the middle, and a gold Subscribe button on the right. A separate lower row holds the copyright and payment names.
The preview adds a visible email label, native email validation, and confirmation text. The field and button stack at narrow widths. It replaces the source demo’s subscriber count with a description of what readers would receive.
Choose a footer by its main job
If shoppers need help after a purchase, start with BestTech’s contact column. If you only need a few policy and utility destinations, use LinkForge’s compact row. UNIT gives a studio room for a project inquiry alongside its work. Form fits a portfolio with a shorter list of links. Choose Kova when email signup earns a dedicated place alongside support and product links.
Once you’ve picked a structure, try it with your actual labels and longest contact details. Check that every link wraps cleanly, each group has a clear name, and the footer still works by keyboard.
How to use the AI prompts
- 1Open the example that matches the main job of your footer.
- 2Copy its UI prompt and tell your coding agent which page or layout should use it.
- 3Provide your real brand, link groups, and contact details. For the newsletter example, supply the signup integration and privacy copy.
- 4Compare the result with both previews. Check keyboard focus, narrow screens, and every link or form outcome.
Each prompt includes the exact React reference shown in the Code tab. Keep the layout and reading order when adapting it to another stack.
Keep exploring