Documentation Footer — Neo Brutalism

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!--
Snippet Name: Documentation Footer — Neo Brutalism
Description: Neo Brutalism footer: Documentation footer.
Author: DevSnips Contributors
Usage Example: Drop this snippet into any Tailwind CSS page.
-->

<style>
  /* DevSnips style-helper classes (self-contained snippet) */
  .f-sans{font-family:'Archivo',sans-serif}.f-mono{font-family:'JetBrains Mono',monospace}.f-disp{font-family:'Archivo',sans-serif}
      .nb-grid{background-image:linear-gradient(#0001px,transparent 1px),linear-gradient(90deg,#0001px,transparent 1px);background-size:28px 28px;background-image:linear-gradient(rgba(0,0,0,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.06) 1px,transparent 1px);background-size:28px 28px}
      .nb-shadow{box-shadow:8px 8px 0 0 #000}.nb-shadow-sm{box-shadow:4px 4px 0 0 #000}.nb-press{transition:transform .1s ease,box-shadow .1s ease}.nb-press:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 0 #000}
</style>
<footer class="relative w-full text-black" data-footer="neo-brutalism">
<div class="mx-auto max-w-7xl px-5 sm:px-6 lg:px-8 py-14 sm:py-20">
<div class="grid grid-cols-1 gap-8 lg:grid-cols-[1.4fr_1fr_1fr_1fr]"><div><span class="inline-flex items-center gap-2 h-7" style="color:currentColor"><svg viewBox="0 0 24 24" fill="none" class="h-full w-auto" aria-hidden="true"><path d="M12 2 2 19h20L12 2z" fill="currentColor"/></svg><span class="font-semibold tracking-tight">Flowbase Docs</span></span><p class="mt-4 text-sm text-black/60">Everything you need to build with Flowbase.</p><div class="mt-4 flex items-center gap-2"><span class="inline-flex items-center gap-1.5 border-2 border-black bg-[#FFE600] px-2.5 py-1 f-mono text-[11px] font-bold uppercase tracking-wider"><svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg> v3.0</span><span class="inline-flex items-center gap-1.5 border-2 border-black bg-[#FFE600] px-2.5 py-1 f-mono text-[11px] font-bold uppercase tracking-wider">Latest</span></div></div><div><h3 class="text-sm font-semibold">Guides</h3><ul class="mt-4 space-y-2.5"><li><a href="#" class="text-sm text-black/60 hover:opacity-100">Quickstart</a></li><li><a href="#" class="text-sm text-black/60 hover:opacity-100">Installation</a></li><li><a href="#" class="text-sm text-black/60 hover:opacity-100">Config</a></li><li><a href="#" class="text-sm text-black/60 hover:opacity-100">Deploy</a></li></ul></div><div><h3 class="text-sm font-semibold">Reference</h3><ul class="mt-4 space-y-2.5"><li><a href="#" class="text-sm text-black/60 hover:opacity-100">API</a></li><li><a href="#" class="text-sm text-black/60 hover:opacity-100">SDKs</a></li><li><a href="#" class="text-sm text-black/60 hover:opacity-100">Webhooks</a></li><li><a href="#" class="text-sm text-black/60 hover:opacity-100">Events</a></li></ul></div><div><h3 class="text-sm font-semibold">Community</h3><ul class="mt-4 space-y-2.5"><li><a href="#" class="text-sm text-black/60 hover:opacity-100">Forum</a></li><li><a href="#" class="text-sm text-black/60 hover:opacity-100">Discord</a></li><li><a href="#" class="text-sm text-black/60 hover:opacity-100">Examples</a></li></ul></div></div><div class="mt-10 border-t border-current/10 pt-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"><p class="text-sm text-black/60">© 2026 Flowbase · Docs</p><div class="flex gap-4 text-sm text-black/60"><a href="#" class="hover:opacity-100">Edit this page</a><a href="#" class="hover:opacity-100">Report issue</a></div></div>
</div>
</footer>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

# Documentation Footer — Neo Brutalism

> Neo Brutalism footer: Documentation footer.

![Preview](./preview.html)

## Features

- documentation footer
- version badge
- edit/report links
- 3 link columns
- responsive split

## Responsive support

- Mobile-first layout
- Breakpoints: `sm` (640px), `md` (768px), `lg` (1024px)
- Stacks gracefully on small screens, expands on large viewports

## Browser support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## Usage

1. Copy the markup from `code.html` into your Tailwind CSS project.
2. Include the corresponding Google Fonts in your document `<head>` if the style requires them.
3. The snippet is self-contained and copy-paste ready — no build step or JavaScript required.

## Design language

**Neo Brutalism** — part of the DevSnips Tailwind Sections library. Every section is
original, accessible, and production-ready.

## Files

- `preview.html` — full standalone preview page (Tailwind CDN + fonts)
- `code.html` — copy-paste snippet only (no `<head>` / CDN)
- `metadata.json` — structured metadata
- `README.md` — this file