Section
Roadmap
Three-column roadmap: shipped / in progress / next.
- Section
- Vanilla
- HTML
- MIT
Preview
Live section
No interactive preview for this section.
Install it with the CLI below, or read the implementation on this page.
Install
Add to your project
npx devsnips add Vanilla/Sections/Products/product-roadmap Vanilla/Sections/Products/product-roadmap <!-- Snippet Name: Roadmap | Family: Products | Description: Three-column roadmap: shipped / in progress / next. | Author: DevSnips Contributors | Usage: Copy the .nb section into your page. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Roadmap | DevSnips</title>
<meta name="description" content="Neo-brutalist vanilla HTML/CSS/JS section: product-roadmap. Copy, customize, ship.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<style> /* ---- Neo-Brutalist design tokens ---- */
:root{
--bg:#fbfbf9; --surface:#ffffff; --foreground:#0a0a0a; --muted:#525252;
--border:#0a0a0a; --primary:#4f46e5; --primary-fg:#ffffff;
--accent:#facc15; --pink:#ec4899; --lime:#a3e635; --cyan:#22d3ee;
--radius:6px; --radius-lg:10px;
--shadow:4px 4px 0 var(--border); --shadow-lg:8px 8px 0 var(--border);
--ring:0 0 0 3px #fff, 0 0 0 6px var(--primary);
--container:1200px; --gutter:20px;
--fs-h1:clamp(2.4rem,6vw,4.25rem); --fs-h2:clamp(1.9rem,4vw,2.9rem);
--fs-h3:clamp(1.25rem,2.4vw,1.6rem); --fs-lead:clamp(1.05rem,2vw,1.25rem);
--ff:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){
:root{ --bg:#0a0a0a; --surface:#151515; --foreground:#fafafa; --muted:#a3a3a3;
--border:#fafafa; --ring:0 0 0 3px #000, 0 0 0 6px var(--primary); }
}
/* ---- base layout + components ---- */
*{box-sizing:border-box}
.nb{font-family:var(--ff);background:var(--bg);color:var(--foreground);
line-height:1.6;-webkit-font-smoothing:antialiased;margin:0}
.nb .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.nb section{position:relative;padding-block:clamp(56px,9vw,120px)}
.nb h1,.nb h2,.nb h3,.nb h4{font-weight:800;letter-spacing:-.02em;line-height:1.08;margin:0}
.nb h1{font-size:var(--fs-h1)} .nb h2{font-size:var(--fs-h2)} .nb h3{font-size:var(--fs-h3)}
.nb p{margin:0} .nb a{color:inherit}
.nb .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;
font-weight:700;text-transform:uppercase;letter-spacing:.14em;
border:2px solid var(--border);background:var(--surface);padding:6px 12px;
border-radius:999px;box-shadow:var(--shadow)}
.nb .lead{font-size:var(--fs-lead);color:var(--muted);max-width:62ch}
.nb .muted{color:var(--muted)}
.nb .center{text-align:center;margin-inline:auto}
.nb .grid{display:grid;gap:var(--gutter)}
.nb .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
font:inherit;font-weight:700;font-size:.98rem;line-height:1;cursor:pointer;
text-decoration:none;border:3px solid var(--border);border-radius:var(--radius);
padding:14px 22px;background:var(--primary);color:var(--primary-fg);
box-shadow:var(--shadow);transition:transform .12s ease,box-shadow .12s ease,background .12s}
.nb .btn:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-lg)}
.nb .btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--border)}
.nb .btn.outline{background:var(--surface);color:var(--foreground)}
.nb .btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
.nb .btn.ghost:hover{box-shadow:var(--shadow);border-color:var(--border);transform:translate(-2px,-2px)}
.nb .btn.accent{background:var(--accent);color:#0a0a0a}
.nb .card{background:var(--surface);border:3px solid var(--border);border-radius:var(--radius);
box-shadow:var(--shadow);padding:24px;transition:transform .14s ease,box-shadow .14s ease}
.nb .card.hover:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow-lg)}
.nb .badge{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;
text-transform:uppercase;letter-spacing:.08em;border:2px solid var(--border);
padding:4px 10px;border-radius:999px;background:var(--surface)}
.nb :focus-visible{outline:none;box-shadow:var(--ring);border-radius:4px}
.nb .skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:#000;
padding:10px 16px;border:2px solid var(--border);z-index:50;font-weight:700}
.nb .skip:focus{left:8px}
.nb .visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
@media (prefers-reduced-motion:reduce){
.nb *,.nb *::before,.nb *::after{animation-duration:.001ms!important;
transition-duration:.001ms!important;animation-iteration-count:1!important}
}
.pr .head{margin-bottom:36px}.pr .head h2{margin:12px 0 8px}
.pr .cols{display:grid;gap:16px;grid-template-columns:1fr}
.pr .col{border:3px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:var(--shadow);padding:18px}
.pr .col h3{display:flex;align-items:center;gap:8px;font-size:1rem;margin-bottom:14px}
.pr .col h3 .dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--border)}
.pr .col.shipped h3 .dot{background:var(--lime)}.pr .col.active h3 .dot{background:var(--accent)}.pr .col.next h3 .dot{background:var(--pink)}
.pr .item{border:2px solid var(--border);border-radius:8px;padding:12px;margin-bottom:10px;background:var(--bg)}
.pr .item b{display:block;font-size:.92rem}.pr .item small{color:var(--muted)}
@media(min-width:900px){.pr .cols{grid-template-columns:repeat(3,1fr)}}</style>
</head>
<body class="nb">
<a class="skip" href="#main">Skip to content</a>
<section class="pr" aria-labelledby="pr-title">
<div class="container">
<div class="head"><span class="eyebrow">Roadmap</span><h2 id="pr-title">Where we're going.</h2><p class="lead">Public roadmap, updated monthly. Vote on what's next.</p></div>
<div class="cols">
<div class="col shipped"><h3><span class="dot"></span>Shipped</h3>
<div class="item"><b>Command palette</b><small>v2.4 · Mar</small></div>
<div class="item"><b>SSO/SAML</b><small>v2.3 · Feb</small></div>
<div class="item"><b>Audit logs</b><small>v2.2 · Jan</small></div>
</div>
<div class="col active"><h3><span class="dot"></span>In progress</h3>
<div class="item"><b>Real-time presence</b><small>v2.5 · ETA May</small></div>
<div class="item"><b>Bulk import</b><small>v2.5 · ETA May</small></div>
<div class="item"><b>Mobile v2</b><small>v2.6 · ETA Jun</small></div>
</div>
<div class="col next"><h3><span class="dot"></span>Next up</h3>
<div class="item"><b>AI summaries</b><small>voting</small></div>
<div class="item"><b>Public API v3</b><small>voting</small></div>
<div class="item"><b>Custom roles</b><small>voting</small></div>
</div>
</div>
</div>
</section>
</body>
</html># Roadmap
Three-column roadmap: shipped / in progress / next.
**Technology:** Vanilla HTML/CSS/JS
**Category:** sections / products
**Design:** Neo-Brutalist (flat colors, hard shadows, bold borders)
**Responsive:** Mobile-first (320px → 1920px)
**Dark mode:** via `prefers-color-scheme`
**Tags:** product, roadmap, columns
**Features:** light/dark, responsive
## Usage
1. Copy the contents of `code.html` into your page.
2. The section is self-contained (inline CSS + JS). No build step.
3. Tweak the CSS variables in `:root` to rebrand. 110 lines UTF-8 · LF · Spaces: 2
Continue browsing