Blocos
Blocos prontos
Cards inteiros, já montados com os componentes. Baixe o HTML de um e cole na sua página.
Como usar
Cada bloco é um fragmento de HTML. O add baixa o arquivo em unslop/blocks/ e você cola onde quer. Eles usam o CSS e o JS do pacote completo.
curl -fsSL unslop.leallabs.dev/i | sh
curl -fsSL unslop.leallabs.dev/i | sh -s add wall-tasksOs cards de gráfico (chart-*) e de IA (ai-*) também são blocos e estão nas páginas de cada um.
Barra lateral
Usuário, busca, itens com contador e equipe.
<article class="u-card u-wall" data-wall="sidebar">
<nav class="u-side" data-u="nav" aria-label="Navegação principal">
<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="Recolher 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="Busca rápida" aria-label="Busca rápida"><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>Principal<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>Projetos</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>Calendário</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>Faturamento</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>Relatórios</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>Assistente</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>Automações</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>Perfil</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>Suporte</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>Configurações</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-sidebarTabela de clientes
Filtros, busca, seleção e paginação.
<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-tableLista de tarefas
Etapas que avançam sozinhas.
2 etapas restantes
- Ler a configuração do projeto
- Gerar os tokens do tema claro
- Gerar os tokens do tema escuro
- Publicar o pacote de componentes
- Rodar testes e 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 etapas restantes</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">Ler a configuração do projeto</span></li>
<li class="u-task" data-state="done"><span class="u-task__mark"></span><span class="u-task__text">Gerar os tokens do tema claro</span></li>
<li class="u-task" data-state="done"><span class="u-task__mark"></span><span class="u-task__text">Gerar os tokens do tema escuro</span></li>
<li class="u-task" data-state="doing"><span class="u-task__mark"></span><span class="u-task__text">Publicar o pacote de componentes</span></li>
<li class="u-task" data-state="todo"><span class="u-task__mark"></span><span class="u-task__text">Rodar testes e build</span></li>
</ul>
</div>
</article>curl -fsSL unslop.leallabs.dev/i | sh -s add wall-tasksModelos e esforço
Radio de modelo e slider de esforço.
Modelos
EsforçoMédio
<article class="u-card u-wall" data-wall="models">
<div class="u-models" style="padding:var(--s2)" data-u="models" role="radiogroup" aria-label="Modelos">
<div class="u-models__title">Modelos</div>
<label class="u-models__opt">Rápido<span class="u-radio"><input type="radio" name="wm" value="rapido"><span class="u-radio__dot"></span></span></label>
<label class="u-models__opt">Equilibrado<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">Profundo<span class="u-radio"><input type="radio" name="wm" value="profundo"><span class="u-radio__dot"></span></span></label>
<label class="u-models__opt">Autônomo<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>Esforço<strong data-effort>Médio</strong></b>
<div data-u="slider" data-u-props='{
"min": 0,
"max": 4,
"value": 2,
"label": "Esforço",
"left": "Mais rápido",
"right": "Mais inteligente",
"texts": ["Mínimo", "Baixo", "Médio", "Alto", "Máximo"]
}'></div>
</div>
</div>
</article>curl -fsSL unslop.leallabs.dev/i | sh -s add wall-modelsAlertas
Cards de alerta com período.
Alertas de produção
12 esta semana
12 de jun.
Latência acima de 800 ms no checkout
O p95 da rota de pagamento passou de 800 ms por 10 minutos a partir das 8h59, na região de São Paulo.
9 de jun.
Certificado expira em 9 dias
O certificado do domínio da API vence em 18 de junho. Renove antes para evitar queda no acesso.
6 de jun.
Fila de e-mails acumulada
Há 1.180 mensagens aguardando envio, o triplo da média das últimas quatro semanas.
<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">Alertas de produção</div><div class="u-big">12 <small>esta semana</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">12 de jun.</span></div>
<h3>Latência acima de 800 ms no checkout</h3>
<p>O p95 da rota de pagamento passou de 800 ms por 10 minutos a partir das 8h59, na região de São Paulo.</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">9 de jun.</span></div>
<h3>Certificado expira em 9 dias</h3>
<p>O certificado do domínio da API vence em 18 de junho. Renove antes para evitar queda no acesso.</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">6 de jun.</span></div>
<h3>Fila de e-mails acumulada</h3>
<p>Há 1.180 mensagens aguardando envio, o triplo da média das últimas quatro semanas.</p>
</div>
</div>
</div>
</article>curl -fsSL unslop.leallabs.dev/i | sh -s add wall-alertsPerfil
Avatar, nome e campos da conta.
L
Luiza Prado
PlanoEquipe
RegiãoSão Paulo
Cliente desde3 de fev. de 2024
ResponsávelCaio 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="Adicionar foto"><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>Plano<b>Equipe</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>Região<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>Cliente desde<b>3 de fev. de 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>Responsável<b>Caio Mendes</b></div>
</div>
</div>
</div>
</article>curl -fsSL unslop.leallabs.dev/i | sh -s add wall-profileDeploys por dia
Barras que trocam com o período.
Deploys
148 nesta semana
<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>nesta semana</small></div></div>
<div data-u="period"></div>
</div>
<div style="flex:1;min-height:260px">
<div data-u="bars" data-u-props='{
"labels": ["Seg", "Ter", "Qua", "Qui", "Sex", "Sáb", "Dom"],
"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-stepsSaúde do build
Anel com legenda.
Saúde do build
Estável.
Testes: 1.180 passando
Lint: nenhum aviso novo
Tipos: 2 pendências
<article class="u-card u-wall" data-wall="sleep">
<div class="u-panel">
<div class="u-head">
<div><div class="u-label">Saúde do build</div><div class="u-big">Estável.</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>Testes: 1.180 passando</div>
<div class="u-legend__row" data-seg="1"><i class="u-legend__sq" style="background:var(--c1)"></i>Lint: nenhum aviso novo</div>
<div class="u-legend__row" data-seg="2"><i class="u-legend__sq" style="background:var(--c2)"></i>Tipos: 2 pendências</div>
</div>
</div>
</article>curl -fsSL unslop.leallabs.dev/i | sh -s add wall-sleepControles
Segmented, checkboxes e 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="Granularidade">
<button type="button" role="radio" aria-checked="false">Dia</button><button type="button" role="radio" aria-checked="true">Semana</button><button type="button" role="radio" aria-checked="false">Mês</button><button type="button" role="radio" aria-checked="false">Ano</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>Notificar</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>Resumo</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>Parcial</label>
</div>
<div class="u-row">
<label class="u-switch"><input type="checkbox" role="switch" checked><span class="u-switch__track"></span>Ligado</label>
<label class="u-switch"><input type="checkbox" role="switch"><span class="u-switch__track"></span>Desligado</label>
<label class="u-switch"><input type="checkbox" role="switch" disabled><span class="u-switch__track"></span>Bloqueado</label>
</div>
</div>
</div>
</article>curl -fsSL unslop.leallabs.dev/i | sh -s add wall-controlsCalendário
Escolha de intervalo.
<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