Section Header
Cabeçalho de seção estruturado com suporte a títulos, ações, eyebrow, lead e data-card-view-toolbar.
Section Header
1. Título simples (Padrão)
Design System
2. Eyebrow + Título + Ação (Ver todos)
Últimos lançamentos
Nossos Produtos
3. Título + Texto de Apoio (Lead)
Documentação de Estilos
Explore os tokens de design, layouts responsivos e animações baseados em CSS moderno.
4. Variante Completa: Eyebrow + Título + Lead + Toolbar Host (Explorer)
Laboratório de Eletrônica
Experimentos Práticos
Dimensionamento de amplificadores diferenciais, acoplamento AC/DC e simulação spice.
5. Customização de Heading Level (h3)
Subseção Interna
<!-- Section Header Component -->
<div class="section-header">
Section Header content here
</div>---
import Section Header from '@/components/ui/layout/Section Header/Section Header.astro';
---
<Section Header />Variantes
default
default
Cabeçalho simples com título
eyebrow
eyebrow
Inclui texto auxiliar eyebrow acima do título
lead
lead
Inclui descrição ou lead text abaixo do título
toolbarHost
toolbarHost
Habilita o host para barra de ferramentas do Explorer
Uso
Quando usar
- Use Section Header para cabeçalho de seção estruturado com suporte a títulos, ações, eyebrow, lead e data-card-view-toolbar.
- Ideal para interfaces que precisam de layout
Boas práticas
- Mantenha consistência com outros componentes da mesma categoria
- Considere acessibilidade e estados de interação
- Teste em diferentes tamanhos de tela