Use Rodapés quando a interface precisar de rodapés institucionais, comerciais e de produto com composição responsiva.
Rodapés
Rodapés institucionais, comerciais e de produto com composição responsiva. A documentação abaixo separa composição, comportamento e adaptação visual de cada variante.
Evite a família quando uma composição semântica mais simples comunicar a mesma ação com menos carga visual.
O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
FULL_BLEED · stable
#Modern (brand + social + colunas)
Modern (brand + social + colunas), preservado do laboratório original e isolado para uso e teste independente.
HTML e exemplo
<footer class="sc-footer sc-footer--modern sc-footer--glass" style="margin-top: 0;">
<div class="sc-container sc-footer-inner">
<div class="sc-footer-grid">
<div class="sc-footer-brand">
<div class="sc-footer-brandline">
<span class="sc-footer-logo" aria-hidden="true"><i class="sc-icon" data-smart-icon="layout"></i></span>
<div>
<div class="sc-footer-title" style="margin-bottom: 4px;">Smart UI</div>
<div class="doc-muted">Componentfirst • Temas • A11y</div>
</div>
</div>
<p class="sc-footer-text">Um UI kit pensado para projetos reais: documentação, templates e componentes prontos.</p>
<div class="sc-footer-social" aria-label="Redes sociais">
<a href="#!" aria-label="GitHub"><i class="sc-icon" data-smart-icon="github"></i></a>
<a href="#!" aria-label="LinkedIn"><i class="sc-icon" data-smart-icon="linkedin"></i></a>
<a href="#!" aria-label="Instagram"><i class="sc-icon" data-smart-icon="instagram"></i></a>
<a href="#!" aria-label="YouTube"><i class="sc-icon" data-smart-icon="youtube"></i></a>
</div>
</div>
<div>
<div class="sc-footer-title">Produto</div>
<ul class="sc-footer-links">
<li><a class="sc-footer-link" href="#templates">Templates</a></li>
<li><a class="sc-footer-link" href="#doc-icons">SmartIcons</a></li>
<li><a class="sc-footer-link" href="#doc-effects">Efeitos</a></li>
</ul>
</div>
<div>
<div class="sc-footer-title">Docs</div>
<ul class="sc-footer-links">
<li><a class="sc-footer-link" href="#doc-start">Começando</a></li>
<li><a class="sc-footer-link" href="#doc-theme">Theming</a></li>
<li><a class="sc-footer-link" href="#doc-tokens">Tokens</a></li>
</ul>
</div>
<div>
<div class="sc-footer-title">Contato</div>
<ul class="sc-footer-links">
<li><a class="sc-footer-link" href="#!"><i class="sc-icon" data-smart-icon="mail"></i> contato@smartui.dev</a></li>
<li><a class="sc-footer-link" href="#!"><i class="sc-icon" data-smart-icon="phone"></i> +55 (11) 999999999</a></li>
<li><a class="sc-footer-link" href="#!"><i class="sc-icon" data-smart-icon="map-pin"></i> Brasil</a></li>
</ul>
</div>
</div>
</div>
<div class="sc-footer-bottom">
<div class="sc-container sc-footer-legal">
<div>© 2026 Smart UI</div>
<ul class="sc-footer-legal-links" aria-label="Links legais">
<li><a href="#!">Privacidade</a></li>
<li><a href="#!">Termos</a></li>
<li><a href="#!">Status</a></li>
</ul>
</div>
</div>
</footer>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Foco visível e ordem de leitura preservados.
- Rótulos acessíveis devem acompanhar controles sem texto.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Não depende de movimento contínuo.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
FULL_BLEED · stable
#Newsletter premium (card + input group)
Newsletter premium (card + input group), preservado do laboratório original e isolado para uso e teste independente.
HTML e exemplo
<footer class="sc-footer sc-footer--modern" style="margin-top: 0;">
<div class="sc-container sc-footer-inner">
<div class="sc-grid sc-cols-2 sc-gap-4" style="align-items:start;">
<div class="sc-card sc-card-outline sc-card-gradient sc-card-glow sc-card-compact">
<div class="sc-footer-kicker"><i class="sc-icon" data-smart-icon="mail"></i> Newsletter</div>
<div class="sc-footer-title" style="margin: 10px 0 8px;">Receba updates do Smart UI</div>
<p class="sc-footer-text">Uma vez por mês. Sem spam. Só features e templates novos.</p>
<div class="sc-footer-form">
<div class="sc-input-group sc-input-group-pill">
<span class="sc-input-icon"><i class="sc-icon" data-smart-icon="mail"></i></span>
<input class="sc-input" style="margin-bottom:0;" placeholder="seu@email.com" aria-label="Email">
<button class="sc-btn sc-btn-primary sc-btn-sm" type="button" aria-label="Assinar newsletter"><i class="sc-icon" data-smart-icon="send"></i></button>
</div>
<div class="doc-muted">Ao assinar, você aceita nossa política de privacidade.</div>
</div>
</div>
<div class="sc-grid sc-cols-2 sc-gap-3">
<div class="sc-card sc-card-outline sc-card-compact sc-card-hover">
<div class="doc-muted">Componentes</div>
<div class="sc-text-2xl" style="font-weight: 900; margin-top: 6px;">+40</div>
</div>
<div class="sc-card sc-card-outline sc-card-compact sc-card-hover">
<div class="doc-muted">Temas</div>
<div class="sc-text-2xl" style="font-weight: 900; margin-top: 6px;">13</div>
</div>
<div class="sc-card sc-card-outline sc-card-compact sc-card-hover">
<div class="doc-muted">Modo</div>
<div style="font-weight: 900; margin-top: 6px;">Light/Dark</div>
</div>
<div class="sc-card sc-card-outline sc-card-compact sc-card-hover">
<div class="doc-muted">JS</div>
<div style="font-weight: 900; margin-top: 6px;">Vanilla</div>
</div>
</div>
</div>
</div>
<div class="sc-footer-bottom">
<div class="sc-container sc-footer-legal">
<div class="doc-muted">Feito para Laravel / sites / apps</div>
<ul class="sc-footer-legal-links">
<li><a href="#doc-start">Instalar</a></li>
<li><a href="#doc-theme">Temas</a></li>
<li><a href="#doc-icons">Ícones</a></li>
</ul>
</div>
</div>
</footer>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Foco visível e ordem de leitura preservados.
- Rótulos acessíveis devem acompanhar controles sem texto.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Não depende de movimento contínuo.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
FULL_BLEED · stable
#Minimal clean (linha única, elegante)
Minimal clean (linha única, elegante), preservado do laboratório original e isolado para uso e teste independente.
HTML e exemplo
<footer class="sc-footer sc-footer--modern sc-footer--glass" style="margin-top: 0;">
<div class="sc-container sc-footer-inner sc-footer-inner--compact">
<div class="sc-footer-legal">
<div class="sc-footer-brandline">
<span class="sc-footer-logo" aria-hidden="true"><i class="sc-icon" data-smart-icon="globe"></i></span>
<strong>Smart UI</strong>
</div>
<ul class="sc-footer-legal-links">
<li><a href="#!">Docs</a></li>
<li><a href="#!">Templates</a></li>
<li><a href="#!">Contato</a></li>
</ul>
<div class="doc-muted">© 2026</div>
</div>
</div>
</footer>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Foco visível e ordem de leitura preservados.
- Rótulos acessíveis devem acompanhar controles sem texto.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Não depende de movimento contínuo.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
FULL_BLEED · stable
#Centered + social (brand)
Centered + social (brand), preservado do laboratório original e isolado para uso e teste independente.
HTML e exemplo
<footer class="sc-footer sc-footer--modern" style="margin-top: 0;">
<div class="sc-container sc-footer-inner text-center">
<div class="sc-footer-brandline" style="justify-content:center;">
<span class="sc-footer-logo" aria-hidden="true"><i class="sc-icon" data-smart-icon="layout"></i></span>
<div class="sc-footer-title" style="margin: 0;">Smart UI</div>
</div>
<p class="sc-footer-text" style="margin: 12px auto 0;">Design system enxuto, com temas modernos e componentes completos.</p>
<div class="sc-footer-social" style="justify-content:center; margin-top: 16px;">
<a href="#!" aria-label="GitHub"><i class="sc-icon" data-smart-icon="github"></i></a>
<a href="#!" aria-label="LinkedIn"><i class="sc-icon" data-smart-icon="linkedin"></i></a>
<a href="#!" aria-label="Instagram"><i class="sc-icon" data-smart-icon="instagram"></i></a>
<a href="#!" aria-label="YouTube"><i class="sc-icon" data-smart-icon="youtube"></i></a>
</div>
</div>
<div class="sc-footer-bottom">
<div class="sc-container sc-footer-legal">
<div>© 2026 Smart UI</div>
<ul class="sc-footer-legal-links">
<li><a href="#!">Privacidade</a></li>
<li><a href="#!">Termos</a></li>
</ul>
</div>
</div>
</footer>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Foco visível e ordem de leitura preservados.
- Rótulos acessíveis devem acompanhar controles sem texto.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Não depende de movimento contínuo.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
FULL_BLEED · stable
#Split (links + CTA + contato)
Split (links + CTA + contato), preservado do laboratório original e isolado para uso e teste independente.
HTML e exemplo
<footer class="sc-footer sc-footer--modern" style="margin-top: 0;">
<div class="sc-container sc-footer-inner">
<div class="sc-grid sc-cols-3 sc-gap-4" style="align-items:start;">
<div class="sc-footer-brand">
<div class="sc-footer-brandline">
<span class="sc-footer-logo" aria-hidden="true"><i class="sc-icon" data-smart-icon="layout"></i></span>
<div class="sc-footer-title" style="margin: 0;">Smart UI</div>
</div>
<p class="sc-footer-text">Templates prontos + UI kit + ícones (SmartIcons).</p>
<div style="display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px;">
<button class="sc-btn sc-btn-primary" type="button">Começar</button>
<button class="sc-btn sc-btn-outline" type="button">Contato</button>
</div>
</div>
<div class="sc-grid sc-cols-2 sc-gap-3">
<div>
<div class="sc-footer-title">Recursos</div>
<ul class="sc-footer-links">
<li><a class="sc-footer-link" href="#doc-buttons">Botões</a></li>
<li><a class="sc-footer-link" href="#doc-cards">Cards</a></li>
<li><a class="sc-footer-link" href="#doc-inputs">Inputs</a></li>
</ul>
</div>
<div>
<div class="sc-footer-title">Empresa</div>
<ul class="sc-footer-links">
<li><a class="sc-footer-link" href="#!">Sobre</a></li>
<li><a class="sc-footer-link" href="#!">Carreiras</a></li>
<li><a class="sc-footer-link" href="#!">Imprensa</a></li>
</ul>
</div>
</div>
<div>
<div class="sc-footer-title">Fale com a gente</div>
<ul class="sc-footer-links">
<li><a class="sc-footer-link" href="#!"><i class="sc-icon" data-smart-icon="mail"></i> suporte@smartui.dev</a></li>
<li><a class="sc-footer-link" href="#!"><i class="sc-icon" data-smart-icon="phone"></i> +55 (11) 999999999</a></li>
</ul>
<div class="sc-footer-social" style="margin-top: 14px;">
<a href="#!" aria-label="GitHub"><i class="sc-icon" data-smart-icon="github"></i></a>
<a href="#!" aria-label="LinkedIn"><i class="sc-icon" data-smart-icon="linkedin"></i></a>
<a href="#!" aria-label="Instagram"><i class="sc-icon" data-smart-icon="instagram"></i></a>
</div>
</div>
</div>
</div>
<div class="sc-footer-bottom">
<div class="sc-container sc-footer-legal">
<div class="doc-muted">© 2026 Smart UI • Todos os direitos reservados</div>
<ul class="sc-footer-legal-links">
<li><a href="#!">Privacidade</a></li>
<li><a href="#!">Termos</a></li>
<li><a href="#!">Cookies</a></li>
</ul>
</div>
</div>
</footer>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Foco visível e ordem de leitura preservados.
- Rótulos acessíveis devem acompanhar controles sem texto.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Não depende de movimento contínuo.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
FULL_BLEED · stable
#Grid “links cards” (visual forte)
Grid “links cards” (visual forte), preservado do laboratório original e isolado para uso e teste independente.
HTML e exemplo
<footer class="sc-footer sc-footer--modern sc-footer--glass" style="margin-top: 0;">
<div class="sc-container sc-footer-inner">
<div class="sc-grid sc-cols-3 sc-gap-3" style="align-items:stretch;">
<div class="sc-card sc-card-outline sc-card-compact sc-card-hover">
<div class="sc-footer-kicker"><i class="sc-icon" data-smart-icon="grid"></i> Docs</div>
<div style="font-weight: 900; margin-top: 10px;">Componentes</div>
<p class="doc-muted" style="margin: 10px 0 0;">Grid, cards, inputs, modais e mais.</p>
<button class="sc-btn sc-btn-outline sc-btn-sm" type="button" style="margin-top: 12px;">Explorar</button>
</div>
<div class="sc-card sc-card-outline sc-card-compact sc-card-hover">
<div class="sc-footer-kicker"><i class="sc-icon" data-smart-icon="layout"></i> Templates</div>
<div style="font-weight: 900; margin-top: 10px;">Páginas prontas</div>
<p class="doc-muted" style="margin: 10px 0 0;">Landing, dashboard, tech e governo.</p>
<button class="sc-btn sc-btn-primary sc-btn-sm" type="button" style="margin-top: 12px;">Ver</button>
</div>
<div class="sc-card sc-card-outline sc-card-compact sc-card-hover">
<div class="sc-footer-kicker"><i class="sc-icon" data-smart-icon="globe"></i> Comunidade</div>
<div style="font-weight: 900; margin-top: 10px;">SmartIcons</div>
<p class="doc-muted" style="margin: 10px 0 0;">Biblioteca própria de ícones (sem Lucide).</p>
<div class="sc-footer-social" style="margin-top: 12px;">
<a href="#!" aria-label="GitHub"><i class="sc-icon" data-smart-icon="github"></i></a>
<a href="#!" aria-label="YouTube"><i class="sc-icon" data-smart-icon="youtube"></i></a>
<a href="#!" aria-label="E-mail"><i class="sc-icon" data-smart-icon="mail"></i></a>
</div>
</div>
</div>
</div>
<div class="sc-footer-bottom">
<div class="sc-container sc-footer-legal">
<div>© 2026 Smart UI</div>
<ul class="sc-footer-legal-links">
<li><a href="#!">Status</a></li>
<li><a href="#!">Suporte</a></li>
</ul>
</div>
</div>
</footer>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Foco visível e ordem de leitura preservados.
- Rótulos acessíveis devem acompanhar controles sem texto.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Não depende de movimento contínuo.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
FULL_BLEED · stable
#Product columns
Product columns, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<footer class="sc-showcase-footer sc-showcase-footer-1"><div><strong>North UI</strong><p>Interfaces abertas, consistentes e acessíveis.</p></div><nav><a href="/components/">Produto</a><a href="/docs/">Docs</a><a href="https://github.com/raicleycs/Smart-UI">GitHub</a></nav><small>Open interface system · Made in Brazil</small></footer>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Mantém contraste de texto e foco visível.
- Conteúdo e ações permanecem disponíveis sem animação.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Não depende de movimento contínuo.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
FULL_BLEED · stable
#Minimal legal
Minimal legal, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<footer class="sc-showcase-footer sc-showcase-footer-2"><div><strong>North UI</strong><p>Interfaces abertas, consistentes e acessíveis.</p></div><nav><a href="/components/">Produto</a><a href="/docs/">Docs</a><a href="https://github.com/raicleycs/Smart-UI">GitHub</a></nav><small>Open interface system · Made in Brazil</small></footer>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Mantém contraste de texto e foco visível.
- Conteúdo e ações permanecem disponíveis sem animação.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Não depende de movimento contínuo.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
FULL_BLEED · stable
#Community
Community, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<footer class="sc-showcase-footer sc-showcase-footer-3"><div><strong>North UI</strong><p>Interfaces abertas, consistentes e acessíveis.</p></div><nav><a href="/components/">Produto</a><a href="/docs/">Docs</a><a href="https://github.com/raicleycs/Smart-UI">GitHub</a></nav><small>Open interface system · Made in Brazil</small></footer>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Mantém contraste de texto e foco visível.
- Conteúdo e ações permanecem disponíveis sem animação.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Não depende de movimento contínuo.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
FULL_BLEED · stable
#Application dock
Application dock, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<footer class="sc-showcase-footer sc-showcase-footer-4"><div><strong>North UI</strong><p>Interfaces abertas, consistentes e acessíveis.</p></div><nav><a href="/components/">Produto</a><a href="/docs/">Docs</a><a href="https://github.com/raicleycs/Smart-UI">GitHub</a></nav><small>Open interface system · Made in Brazil</small></footer>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Mantém contraste de texto e foco visível.
- Conteúdo e ações permanecem disponíveis sem animação.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Não depende de movimento contínuo.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.