Section
Resources
Filterable resources grid with type tags.
- 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/Content/content-resources Vanilla/Sections/Content/content-resources <!-- Snippet Name: Resources | Family: Content | Description: Filterable resources grid with type tags. | 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>Resources | DevSnips</title>
<meta name="description" content="Neo-brutalist vanilla HTML/CSS/JS section: content-resources. 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}
}
.cr .head{text-align:center;margin-bottom:30px}.cr .head h2{margin:12px 0 8px}
.cr .tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}
.cr .tabs button{font:inherit;font-weight:700;border:3px solid var(--border);background:var(--surface);padding:8px 16px;border-radius:999px;cursor:pointer;box-shadow:var(--shadow)}
.cr .tabs button[aria-pressed="true"]{background:var(--primary);color:#fff}
.cr .grid{grid-template-columns:1fr;gap:14px}
.cr .res{border:3px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:var(--shadow);padding:18px;display:flex;flex-direction:column;gap:8px;transition:transform .14s,box-shadow .14s}
.cr .res:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-lg)}
.cr .res .ic{width:40px;height:40px;border:3px solid var(--border);border-radius:10px;background:var(--accent);display:grid;place-items:center;color:#0a0a0a}
.cr .res:nth-child(2) .ic{background:var(--primary);color:#fff}.cr .res:nth-child(3) .ic{background:var(--lime)}
.cr .res h3{font-size:1rem}.cr .res p{font-size:.85rem;color:var(--muted)}
.cr .res .tag{font-size:.7rem;font-weight:800;text-transform:uppercase;color:var(--muted)}
@media(min-width:760px){.cr .grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.cr .grid{grid-template-columns:repeat(3,1fr)}}</style>
</head>
<body class="nb">
<a class="skip" href="#main">Skip to content</a>
<section class="cr" aria-labelledby="cr-title">
<div class="container">
<div class="head"><span class="eyebrow">Resources</span><h2 id="cr-title">Learn & level up.</h2></div>
<div class="tabs" role="group" aria-label="Filter resources">
<button type="button" aria-pressed="true">All</button>
<button type="button" aria-pressed="false">Guides</button>
<button type="button" aria-pressed="false">Videos</button>
<button type="button" aria-pressed="false">Kits</button>
</div>
<div class="grid">
<article class="res"><span class="ic"><svg class="is" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d='M8 5v14l11-7z'/></svg></span><span class="tag">Webinar</span><h3>Scaling to 1M users</h3><p>Video · 38 min</p></article>
<article class="res"><span class="ic"><svg class="is" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d='M16 18l6-6-6-6M8 6l-6 6 6 6'/></svg></span><span class="tag">Template</span><h3>Next.js starter</h3><p>Code · MIT</p></article>
<article class="res"><span class="ic"><svg class="is" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x='3' y='5' width='18' height='14' rx='2'/><path d='M3 7l9 6 9-6'/></svg></span><span class="tag">Newsletter</span><h3>The Friday Brief</h3><p>Email · weekly</p></article>
<article class="res"><span class="ic"><svg class="is" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d='M3 3h7v7H3zM14 3h7v7H3zM3 14h7v7H3zM14 14h7v7H3z'/></svg></span><span class="tag">Kit</span><h3>Brand assets</h3><p>ZIP · 12 MB</p></article>
<article class="res"><span class="ic"><svg class="is" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d='M3 3v18h18M7 14l3-4 4 3 5-7'/></svg></span><span class="tag">Report</span><h3>State of SaaS 2026</h3><p>PDF · 24 pp</p></article>
<article class="res"><span class="ic"><svg class="is" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x='4' y='11' width='16' height='9' rx='2'/><path d='M8 11V7a4 4 0 018 0v4'/></svg></span><span class="tag">Checklist</span><h3>SOC2 readiness</h3><p>Doc · 40 items</p></article>
</div>
</div>
</section>
</body>
</html># Resources
Filterable resources grid with type tags.
**Technology:** Vanilla HTML/CSS/JS
**Category:** sections / content
**Design:** Neo-Brutalist (flat colors, hard shadows, bold borders)
**Responsive:** Mobile-first (320px → 1920px)
**Dark mode:** via `prefers-color-scheme`
**Tags:** resources, grid, filters
**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. 111 lines UTF-8 · LF · Spaces: 2
Continue browsing