Blocks
Page Header
Header padrão dashboard com título, descrição, breadcrumb e ações no canto.
Header de página interna — breadcrumb topo, título h1, sub muted, action group à direita.
Projetos
Gerencie seus projetos e suas integrações.
<header class="flex flex-col gap-4 border-b border-border pb-6">
<nav aria-label="Breadcrumb" class="text-sm text-muted-foreground">
<ol class="flex items-center gap-1.5">
<li><a href="/" class="hover:text-foreground">Home</a></li>
<li aria-hidden="true">/</li>
<li><a href="/projetos" class="hover:text-foreground">Projetos</a></li>
<li aria-hidden="true">/</li>
<li class="text-foreground">Sinapse v0.1</li>
</ol>
</nav>
<div class="flex flex-wrap items-end justify-between gap-4">
<div class="flex flex-col gap-2">
<h1 class="text-3xl font-bold tracking-tight text-foreground">Projetos</h1>
<p class="text-base text-muted-foreground">Gerencie seus projetos e suas integrações.</p>
</div>
<div class="flex items-center gap-2">
<button class="itps-btn itps-btn--ghost">Filtrar</button>
<button class="itps-btn itps-btn--primary">Novo projeto</button>
</div>
</div>
</header>
<header class="flex flex-col gap-4 border-b border-border pb-6">
<nav aria-label="Breadcrumb" class="text-sm text-muted-foreground">
<ol class="flex items-center gap-1.5">
<li><a href="/" class="hover:text-foreground">Home</a></li>
<li aria-hidden="true">/</li>
<li><a href="/projetos" class="hover:text-foreground">Projetos</a></li>
<li aria-hidden="true">/</li>
<li class="text-foreground">Sinapse v0.1</li>
</ol>
</nav>
<div class="flex flex-wrap items-end justify-between gap-4">
<div class="flex flex-col gap-2">
<h1 class="text-3xl font-bold tracking-tight text-foreground">Projetos</h1>
<p class="text-base text-muted-foreground">Gerencie seus projetos e suas integrações.</p>
</div>
<div class="flex items-center gap-2">
<button class="itps-btn itps-btn--ghost">Filtrar</button>
<button class="itps-btn itps-btn--primary">Novo projeto</button>
</div>
</div>
</header><header class="flex flex-col gap-4 border-b border-border pb-6">
<nav aria-label="Breadcrumb" class="text-sm text-muted-foreground">
<ol class="flex items-center gap-1.5">
<li><a href="/" class="hover:text-foreground">Home</a></li>
<li aria-hidden="true">/</li>
<li><a href="/projetos" class="hover:text-foreground">Projetos</a></li>
<li aria-hidden="true">/</li>
<li class="text-foreground">Sinapse v0.1</li>
</ol>
</nav>
<div class="flex flex-wrap items-end justify-between gap-4">
<div class="flex flex-col gap-2">
<h1 class="text-3xl font-bold tracking-tight text-foreground">Projetos</h1>
<p class="text-base text-muted-foreground">Gerencie seus projetos e suas integrações.</p>
</div>
<div class="flex items-center gap-2">
<button class="itps-btn itps-btn--ghost">Filtrar</button>
<button class="itps-btn itps-btn--primary">Novo projeto</button>
</div>
</div>
</header>
<header class="flex flex-col gap-4 border-b border-border pb-6">
<nav aria-label="Breadcrumb" class="text-sm text-muted-foreground">
<ol class="flex items-center gap-1.5">
<li><a href="/" class="hover:text-foreground">Home</a></li>
<li aria-hidden="true">/</li>
<li><a href="/projetos" class="hover:text-foreground">Projetos</a></li>
<li aria-hidden="true">/</li>
<li class="text-foreground">Sinapse v0.1</li>
</ol>
</nav>
<div class="flex flex-wrap items-end justify-between gap-4">
<div class="flex flex-col gap-2">
<h1 class="text-3xl font-bold tracking-tight text-foreground">Projetos</h1>
<p class="text-base text-muted-foreground">Gerencie seus projetos e suas integrações.</p>
</div>
<div class="flex items-center gap-2">
<button class="itps-btn itps-btn--ghost">Filtrar</button>
<button class="itps-btn itps-btn--primary">Novo projeto</button>
</div>
</div>
</header>