grid
Responsive CSS grid. Collapses to a single column on mobile. Direct children of the content slot become grid items — no wrapper needed.
Column counts
Use cols to set the number of columns. All layouts collapse to one column on mobile.
2 columns
grid({ cols: 2, content: left + right })3 columns (default)
grid({ cols: 3, content: items.join('') })4 columns
grid({ cols: 4, content: items.join('') })Gap sizes
Control spacing between items with gap: 'sm' | 'md' | 'lg'. Default is 'md'.
Small gap
grid({ cols: 3, gap: 'sm', content: items.join('') })Large gap
grid({ cols: 3, gap: 'lg', content: items.join('') })With components
Grid accepts any HTML string as content — pass other component outputs directly.
Feature grid
Fast
Sub-100ms server responses with streaming SSR.
Secure
Security headers on every response, including errors.
Simple
No build step, no virtual DOM, no dependencies.
grid({
cols: 3,
content: features.map(f => feature(f)).join(''),
})Stat grid
Monthly users
24.8k
+12%
Revenue
$18.2k
+8.4%
Churn rate
2.1%
−0.3%
Uptime
99.98%
0.0%
grid({
cols: 4,
content: stats.map(s => stat(s)).join(''),
})Testimonial grid
Shipped our redesign in a weekend. No boilerplate, no config hell.
The streaming SSR makes our pages feel instant. Lighthouse is happy.
Finally a UI kit that doesn't fight the platform. Just HTML.
grid({
cols: 3,
content: testimonials.map(t => testimonial(t)).join(''),
})Card grid
Getting started
Install and run your first Pulse app in under five minutes.
Components
30+ accessible, composable UI primitives ready to drop in.
Deployment
Static hosting, Node servers, or edge runtimes — one build.
grid({
cols: 3,
content: docs.map(d => card({
title: d.title,
content: `<p>${d.summary}</p>`,
footer: badge({ label: d.tag }),
})).join(''),
})Single column
Use cols: 1 for a stacked list with consistent spacing — useful for form sections or timelines.
grid({ cols: 1, gap: 'sm', content: steps.join('') })| Prop | Type | Default | |
|---|---|---|---|
content | string (HTML) | — | Raw HTML slot — direct children are grid items |
cols | number | 3 | 1 · 2 · 3 · 4 |
gap | string | 'md' | 'sm' · 'md' · 'lg' |