Maggium — Page Templates

Page Shell

Estrutura
padrão.

Toda página do brandbook segue esta estrutura: Nav fixa → Header da Página → Divisores de Seção → Footer. Um shell consistente e previsível.

Maggium

Link Active Link

Page Title

01 // Section

02 // Section

<!-- Estrutura padrão da página -->
<header class="hdr"> ... </header>
<section class="hero"> Título da Página </section>
<div class="content-area">
  <div class="content-section reveal"> ... </div>
</div>
<footer class="ftr"> ... </footer>

Dashboard Grid

Grid bento
assimétrico.

Grid de 4 colunas com células span-2 e span-3 para layouts de dashboard. Ideal para KPIs, gráficos e sidebars.

Hero / KPI

Stat

Chart Area

Sidebar

Card

Wide Content

<!-- Grid bento para dashboard -->
<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;">
  <div style="grid-column: span 3;">Hero</div>
  <div>Stat</div>
  <div style="grid-column: span 2;">Chart</div>
  <div style="grid-row: span 2;">Sidebar</div>
</div>

Content Grid

Grid adaptativo
de conteúdo.

Grid responsivo usando auto-fit + minmax para layouts de cards. Adapta-se automaticamente de 1 a N colunas conforme o viewport.

<!-- Grid auto-fit de conteúdo -->
<div class="grid">
  <!-- grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); -->
  <div class="cell">...</div>
  <div class="cell">...</div>
</div>