Blocks
Ready-made blocks
Whole cards, already built with the components. Download the HTML of one and paste it into your page.
How to use
Each block is an HTML fragment. add downloads the file into unslop/blocks/ and you paste it where you want. They use the CSS and JS from the full package.
curl -fsSL unslop.leallabs.dev/i | sh
curl -fsSL unslop.leallabs.dev/i | sh -s add wall-tasksThe chart cards (chart-*) and AI cards (ai-*) are blocks too, and they're on each one's page.
Sidebar
User, search, items with counters and team.
<article class="u-card u-wall" data-wall="sidebar">
<nav class="u-side" data-u="nav" aria-label="Main navigation">
<div class="u-side__user"><span class="u-avatar u-avatar--sm">A</span><b>Ana Ribeiro <svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><path d="m7 15 5 5 5-5M7 9l5-5 5 5"/></svg></b><button type="button" class="u-btn u-btn--ghost u-btn--icon u-btn--sm" aria-label="Collapse menu"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M15 3v18"/></svg></button></div>
<label class="u-search"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg><input type="search" placeholder="Quick search" aria-label="Quick search"><kbd class="u-kbd">⌘L</kbd></label>
<div class="u-side__nav">
<button type="button" class="u-side__item" aria-current="page"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/></svg>Main<span class="u-side__count">152</span></button>
<button type="button" class="u-side__item"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v18M15 3v18"/></svg>Projects</button>
<button type="button" class="u-side__item"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><path d="m3 11 18-5v12L3 14z"/><path d="M11.6 16.8a3 3 0 1 1-5.8-1.6"/></svg>Deploys</button>
<button type="button" class="u-side__item"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>Calendar</button>
<button type="button" class="u-side__item"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 22h18M6 18v-7M10 18v-7M14 18v-7M18 18v-7M12 2 3 7v2h18V7z"/></svg>Billing</button>
<button type="button" class="u-side__item"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M6 8l12 8M18 8 6 16"/></svg>Reports</button>
<button type="button" class="u-side__item"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><path d="M21 12a9 9 0 1 1-4-7.5"/><path d="M19 3v4M17 5h4"/></svg>Assistant</button>
<button type="button" class="u-side__item"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21"/></svg>Automations</button>
<button type="button" class="u-side__item"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01"/></svg>Profile</button>
</div>
<div class="u-side__spacer"></div>
<div class="u-side__nav">
<button type="button" class="u-side__item"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 14v-2a9 9 0 0 1 18 0v2"/><path d="M21 15a2 2 0 0 1-2 2h-1v-6h1a2 2 0 0 1 2 2zM3 15a2 2 0 0 0 2 2h1v-6H5a2 2 0 0 0-2 2z"/></svg>Support</button>
<button type="button" class="u-side__item"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6h10M18 6h2M4 12h2M10 12h10M4 18h8M16 18h4"/><circle cx="16" cy="6" r="2"/><circle cx="8" cy="12" r="2"/><circle cx="14" cy="18" r="2"/></svg>Settings</button>
</div>
<div class="u-side__team"><span class="u-avatar u-avatar--sm" data-c="1">L</span><div><b>leal labs</b><span>[email protected]</span></div><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true" style="color:var(--fg-3)"><path d="m6 9 6 6 6-6"/></svg></div>
</nav>
</article>curl -fsSL unslop.leallabs.dev/i | sh -s add wall-sidebarCustomer table
Filters, search, selection and pagination.
<article class="u-card u-wall" data-wall="table">
<div data-u="datatable" data-u-props='{"pageSize": 5, "count": 48}'></div>
</article>curl -fsSL unslop.leallabs.dev/i | sh -s add wall-tableTask list
Steps that advance on their own.
2 steps left
- Read the project config
- Generate the light theme tokens
- Generate the dark theme tokens
- Publish the component package
- Run tests and build
<article class="u-card u-wall" data-wall="tasks">
<div class="u-tasks" style="padding:var(--s2)" data-u="tasks" data-u-props='{"auto": true}'>
<div class="u-tasks__head"><svg class="u-tasks__spin" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9" opacity=".18"/><path class="u-arc" d="M12 3a9 9 0 0 1 9 9"/></svg><span data-count aria-live="polite">2 steps left</span></div>
<ul class="u-tasks__list">
<li class="u-task" data-state="done"><span class="u-task__mark"></span><span class="u-task__text">Read the project config</span></li>
<li class="u-task" data-state="done"><span class="u-task__mark"></span><span class="u-task__text">Generate the light theme tokens</span></li>
<li class="u-task" data-state="done"><span class="u-task__mark"></span><span class="u-task__text">Generate the dark theme tokens</span></li>
<li class="u-task" data-state="doing"><span class="u-task__mark"></span><span class="u-task__text">Publish the component package</span></li>
<li class="u-task" data-state="todo"><span class="u-task__mark"></span><span class="u-task__text">Run tests and build</span></li>
</ul>
</div>
</article>curl -fsSL unslop.leallabs.dev/i | sh -s add wall-tasksModels and effort
Model radio and effort slider.
Models
EffortMedium
<article class="u-card u-wall" data-wall="models">
<div class="u-models" style="padding:var(--s2)" data-u="models" role="radiogroup" aria-label="Models">
<div class="u-models__title">Models</div>
<label class="u-models__opt">Fast<span class="u-radio"><input type="radio" name="wm" value="rapido"><span class="u-radio__dot"></span></span></label>
<label class="u-models__opt">Balanced<span class="u-radio"><input type="radio" name="wm" value="equilibrado" checked><span class="u-radio__dot"></span></span></label>
<label class="u-models__opt">Deep<span class="u-radio"><input type="radio" name="wm" value="profundo"><span class="u-radio__dot"></span></span></label>
<label class="u-models__opt">Autonomous<span class="u-radio"><input type="radio" name="wm" value="autonomo"><span class="u-radio__dot"></span></span></label>
<div class="u-models__effort">
<b>Effort<strong data-effort>Medium</strong></b>
<div data-u="slider" data-u-props='{
"min": 0,
"max": 4,
"value": 2,
"label": "Effort",
"left": "Faster",
"right": "Smarter",
"texts": ["Minimum", "Low", "Medium", "High", "Maximum"]
}'></div>
</div>
</div>
</article>curl -fsSL unslop.leallabs.dev/i | sh -s add wall-modelsAlerts
Alert cards with a date.
Production alerts
12 this week
Jun 12
Latency above 800 ms at checkout
The p95 of the payment route stayed above 800 ms for 10 minutes starting at 8:59 AM, in the São Paulo region.
Jun 9
Certificate expires in 9 days
The API domain certificate expires on June 18. Renew it first to avoid losing access.
Jun 6
Email queue backed up
1,180 messages are waiting to send, three times the average of the last four weeks.
<article class="u-card u-wall u-wall--fade" data-wall="alerts">
<div class="u-panel">
<div class="u-head">
<div><div class="u-label">Production alerts</div><div class="u-big">12 <small>this week</small></div></div>
<div data-u="period"></div>
</div>
<div class="u-wall__scroll" style="display:grid;gap:10px">
<div class="u-alert">
<div class="u-alert__top"><span class="u-alert__ico"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true" stroke-width="1.8"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg></span><span class="u-alert__date">Jun 12</span></div>
<h3>Latency above 800 ms at checkout</h3>
<p>The p95 of the payment route stayed above 800 ms for 10 minutes starting at 8:59 AM, in the São Paulo region.</p>
</div>
<div class="u-alert">
<div class="u-alert__top"><span class="u-alert__ico" data-tone="accent"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true" stroke-width="1.8"><path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6z"/><path d="M12 8v4M12 16h.01"/></svg></span><span class="u-alert__date">Jun 9</span></div>
<h3>Certificate expires in 9 days</h3>
<p>The API domain certificate expires on June 18. Renew it first to avoid losing access.</p>
</div>
<div class="u-alert">
<div class="u-alert__top"><span class="u-alert__ico" data-tone="info"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true" stroke-width="1.8"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></span><span class="u-alert__date">Jun 6</span></div>
<h3>Email queue backed up</h3>
<p>1,180 messages are waiting to send, three times the average of the last four weeks.</p>
</div>
</div>
</div>
</article>curl -fsSL unslop.leallabs.dev/i | sh -s add wall-alertsProfile
Avatar, name and account fields.
L
Luiza Prado
PlanTeam
RegionSão Paulo
Customer sinceFeb 3, 2024
OwnerCaio Mendes
<article class="u-card u-wall" data-wall="profile">
<div class="u-panel">
<div class="u-profile">
<div class="u-profile__av">
<span class="u-avatar u-avatar--xl">L</span>
<button type="button" class="u-profile__add" aria-label="Add photo"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true" style="width:16px;height:16px"><path d="M12 5v14M5 12h14"/></svg></button>
</div>
<div class="u-profile__name">Luiza Prado</div>
<div class="u-fields">
<div class="u-field-row"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></svg>Plan<b>Team</b></div>
<div class="u-field-row"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 0 1 16 0z"/><circle cx="12" cy="10" r="3"/></svg>Region<b>São Paulo</b></div>
<div class="u-field-row"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>Customer since<b>Feb 3, 2024</b></div>
<div class="u-field-row"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>Owner<b>Caio Mendes</b></div>
</div>
</div>
</div>
</article>curl -fsSL unslop.leallabs.dev/i | sh -s add wall-profileDeploys per day
Bars that swap with the period.
Deploys
148 this week
<article class="u-card u-wall" data-wall="steps">
<div class="u-panel">
<div class="u-head">
<div><div class="u-label">Deploys</div><div class="u-big"><span data-bars-total>148</span> <small>this week</small></div></div>
<div data-u="period"></div>
</div>
<div style="flex:1;min-height:260px">
<div data-u="bars" data-u-props='{
"labels": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
"max": 32,
"series": [
[22, 14, 9, 27, 31, 24, 21],
[18, 26, 21, 15, 30, 12, 8],
[25, 19, 28, 22, 16, 20, 14],
[10, 24, 29, 31, 18, 9, 17]
]
}'></div>
</div>
</div>
</article>curl -fsSL unslop.leallabs.dev/i | sh -s add wall-stepsBuild health
Ring with a legend.
Build health
Stable.
Tests: 1,180 passing
Lint: no new warnings
Types: 2 pending
<article class="u-card u-wall" data-wall="sleep">
<div class="u-panel">
<div class="u-head">
<div><div class="u-label">Build health</div><div class="u-big">Stable.</div></div>
</div>
<div data-u="ring" data-u-props='{
"value": 98,
"segments": [
{"v": 38, "color": "var(--c6)"},
{"v": 34, "color": "var(--c1)"},
{"v": 28, "color": "var(--c2)"}
]
}'></div>
<div class="u-legend">
<div class="u-legend__row" data-seg="0"><i class="u-legend__sq" style="background:var(--c6)"></i>Tests: 1,180 passing</div>
<div class="u-legend__row" data-seg="1"><i class="u-legend__sq" style="background:var(--c1)"></i>Lint: no new warnings</div>
<div class="u-legend__row" data-seg="2"><i class="u-legend__sq" style="background:var(--c2)"></i>Types: 2 pending</div>
</div>
</div>
</article>curl -fsSL unslop.leallabs.dev/i | sh -s add wall-sleepControls
Segmented, checkboxes and switches.
<article class="u-card u-wall" data-wall="controls">
<div class="u-panel">
<div class="u-controls">
<div data-u="segmented" class="u-seg u-seg--flat" role="radiogroup" aria-label="Granularity">
<button type="button" role="radio" aria-checked="false">Day</button><button type="button" role="radio" aria-checked="true">Week</button><button type="button" role="radio" aria-checked="false">Month</button><button type="button" role="radio" aria-checked="false">Year</button>
</div>
<div class="u-row">
<label class="u-check"><input type="checkbox" checked><span class="u-check__box"><svg viewBox="0 0 16 16"><path class="u-tick" d="m3.5 8.4 3 3 6-6.8"/><path class="u-dash" d="M4 8h8"/></svg></span>Notify</label>
<label class="u-check"><input type="checkbox"><span class="u-check__box"><svg viewBox="0 0 16 16"><path class="u-tick" d="m3.5 8.4 3 3 6-6.8"/><path class="u-dash" d="M4 8h8"/></svg></span>Summary</label>
<label class="u-check" data-u="indeterminate"><input type="checkbox"><span class="u-check__box"><svg viewBox="0 0 16 16"><path class="u-tick" d="m3.5 8.4 3 3 6-6.8"/><path class="u-dash" d="M4 8h8"/></svg></span>Partial</label>
</div>
<div class="u-row">
<label class="u-switch"><input type="checkbox" role="switch" checked><span class="u-switch__track"></span>On</label>
<label class="u-switch"><input type="checkbox" role="switch"><span class="u-switch__track"></span>Off</label>
<label class="u-switch"><input type="checkbox" role="switch" disabled><span class="u-switch__track"></span>Locked</label>
</div>
</div>
</div>
</article>curl -fsSL unslop.leallabs.dev/i | sh -s add wall-controlsCalendar
Range selection.
<article class="u-card u-wall" data-wall="calendar">
<div class="u-panel"><div data-u="calendar" data-u-props='{"year": 2026, "month": 6, "start": [2026, 6, 7], "end": [2026, 6, 14]}'></div></div>
</article>curl -fsSL unslop.leallabs.dev/i | sh -s add wall-calendar