Pular para o conteúdo principal

Componente Footer

📘 Modo de Uso​

O componente Footer é a seção localizada na parte inferior de um sistema. Ele organiza informações complementares sem sobrecarregar a interface principal, oferecendo uma experiência de navegação consistente e responsiva.

Disponível em versões branca e azul, adapta-se a diferentes plataformas garantindo consistência visual e usabilidade.

Modo de uso dos slots​

Os slots do componente podem ser substituídos pelo conteúdo desejado ou desativados.

  • O Opala DS fornece amostras pré-configuradas de conteúdo comuns para footers, disponíveis nos templates.
  • O componente suporta até 6 colunas, mas recomenda-se utilizar no máximo 4 colunas para melhor legibilidade.
  • Verifique na estrutura hierárquica quais propriedades controlam cada parte.
    • Exemplo: hasText em footer/infoMenu controla elementos internos como hasTitle e hasDescription.
    • Se não houver uso desses elementos, desative diretamente a propriedade externa (hasText) em vez de desligar cada item individualmente. Isso evita quebras no auto-layout do Figma.

Variações por dispositivo​

  • Mobile: breakpoints base e sm, organizando conteúdo em colunas simplificadas.
  • Tablet: breakpoint md, onde as colunas podem variar livremente.
  • Desktop: breakpoints lg em diante, com colunas do tipo expandable (conteúdo expansível).

Remoção de colunas/slots​

  • Para remover uma coluna, use a função hide/show do Figma.
  • O componente aceita no máximo 6 colunas.

Remoção de itens internos (amostras)​

  • Itens das colunas nas amostras fornecidas também podem ser ocultados via hide/show no Figma.

🧩 Anatomia​

Anatomia

📋 Propriedades​

Propriedades

⌨️ Código​

  • opl.navigation.component.footer

🎨 Variantes​

  • Tema: Branco | Azul
  • Layout: até 6 colunas (recomendado máximo 4)
  • Breakpoints: Mobile, Tablet e Desktop

📝 Observações​

  • O subcomponente footer/infoMenu deve ser usado com:
    • Type Vertical → no footer desktop
    • Type Horizontal → nas variações mobile e tablet
  • Use os slots para conteúdo flexível como:
    • Logo/Identidade
    • Links institucionais (Sobre, Contato, Acessibilidade, etc.)
    • Redes sociais
    • Informações legais (Termos de uso, direitos autorais, políticas)