Utilize o componente Footer para fornecer informações complementares, links úteis e funcionalidades adicionais no final da página. Este componente é essencial para concluir a estrutura da página, oferecendo aos utilizadores acesso a conteúdos importantes e recursos de navegação adicionais.
Pode incluir informações de contato, direitos autorais, termos de serviço e políticas de privacidade.
Fornece links para seções importantes do site, como sobre nós, ajuda, FAQs e redes sociais.
Pode incluir elementos como formulários de subscrição de newsletter, mapa do site.
Deve sempre incluir a barra de logotipo conforme especificado no componente, reforçando a identidade visual da marca.
Incorpore o componente Footer sempre que precisar fornecer informações adicionais e recursos de navegação no final da página, melhorando a experiência do utilizador e oferecendo acesso fácil a conteúdos importantes. Certifique-se de que a barra de logotipo está presente para manter a consistência da marca.
Esta é uma presença online oficial do Governo dos Açores
<footer>
<div class="gra-back-to-top gra-container">
<button type="button" class="icon icon-primary backToTop">
<i class="icon-chevron-up"></i>
</button>
</div>
<div class="gra-footer-backoffice">
<div class="footer-content gra-container">
<div class="logo-description">
<a href="https://portal.azores.gov.pt/" target="_blank"><img class="gra-logo-gov" src="/img/logos/logo_gra_white.svg" alt="Governo Regional dos Açores"></a>
<span>Esta é uma presença online oficial do <a href="https://portal.azores.gov.pt" class="gra-link" target="_blank">Governo dos Açores</a><br>Secretaria Regional das Finanças, Planeamento e Administração Pública</span>
</div>
<div class="gra-logos">
<a href="https://recuperarportugal.gov.pt" target="_blank"><img class="gra-logo-prr" src="/img/logos/logo_prr.svg" alt="Plano de Recuperação e Resiliência"></a>
<a href="https://portal.azores.gov.pt/" target="_blank"><img class="gra-logo-gov" src="/img/logos/logo_gra_white.svg" alt="Governo Regional dos Açores"></a>
<a href="https://www.portugal.gov.pt/" target="_blank"><img class="gra-logo-rp" src="/img/logos/logo_rp.svg" alt="República Portuguesa"></a>
<a href="https://next-generation-eu.europa.eu/" target="_blank"><img class="gra-logo-ue" src="/img/logos/logo_ue.svg" alt="Financiado pela União Europeia"></a>
</div>
</div>
</div>
</footer>
<footer>
<div class="gra-back-to-top gra-container">
<button type="button" class="icon icon-primary backToTop">
<i class="icon-chevron-up"></i>
</button>
</div>
<div class="gra-footer-opt-1">
<div class="footer-row first-row">
<div class="footer-content gra-container">
<img class="logo" src="/img/logo_gra_design_system.png">
<div class="contactsContent">
<div class="label">Contactos</div>
<div class="address">
<div class="iconContent">
<i class="icon-pin"></i>
<span>Lorem ipsum dolor sit amet consectetur, 23.<br>4440-444 Lorem ipsum</span>
</div>
</div>
<div class="contacts">
<div class="iconContent">
<i class="icon-phone"></i>
<a href="tel:+351296000000">296 000 000</a>
</div>
<div class="iconContent email">
<i class="icon-message"></i>
<a href="mailto:[email protected]">[email protected]</a>
</div>
</div>
</div>
</div>
</div>
<div class="footer-row second-row">
<div class="footer-content gra-container">
<div class="links">
<a href="#" class="gra-link">Acessibilidade</a>
<a href="#" class="gra-link">Termos e Condições</a>
<a href="#" class="gra-link">Política de Privacidade</a>
<a href="#" class="gra-link">Definições de Cookies</a>
</div>
</div>
</div>
<div class="footer-row third-row">
<div class="footer-content gra-container">
<div class="gra-logos">
<a href="https://recuperarportugal.gov.pt/" target="_blank"><img class="gra-logo-prr" src="/img/logos/logo_prr.svg" alt="Plano de Recuperação e Resiliência"></a>
<a href="https://portal.azores.gov.pt/" target="_blank"><img class="gra-logo-gov" src="/img/logos/logo_gra_white.svg" alt="Governo Regional dos Açores"></a>
<a href="https://www.portugal.gov.pt" target="_blank"><img class="gra-logo-rp" src="/img/logos/logo_rp.svg" alt="República Portuguesa"></a>
<a href="https://next-generation-eu.europa.eu" target="_blank"><img class="gra-logo-ue" src="/img/logos/logo_ue.svg" alt="Financiado pela União Europeia"></a>
</div>
<div class="logosLeft">
<a href="https://recuperarportugal.gov.pt/transicao-digital/administracao-publica-mais-eficiente/" target="_blank"><img class="gra-logo-c19" src="/img/logos/logo_c19.svg" alt="Modernização e Digitalização da Administração Pública - RAA"></a>
<a href="https://incuba.azores.gov.pt/" target="_blank"><img class="gra-logo-incuba" src="/img/logos/logo_incuba.svg" alt="Incuba Açores"></a>
</div>
</div>
</div>
<div class="footer-row fourth-row">
<div class="logo-description gra-container">
<a href="https://portal.azores.gov.pt/" target="_blank"><img class="gra-logo-gov" src="/img/logos/logo_gra_white.svg" alt="Governo Regional dos Açores"></a>
<div>Esta é uma presença online oficial do <a href="https://portal.azores.gov.pt" class="gra-link" target="_blank">Governo dos Açores</a><br>Secretaria Regional das Finanças, Planeamento e Administração Pública</div>
</div>
</div>
</div>
</footer>
<footer>
<div class="gra-back-to-top gra-container">
<button type="button" class="icon icon-primary backToTop">
<i class="icon-chevron-up"></i>
</button>
</div>
<div class="gra-footer-opt-2">
<div class="footer-row first-row">
<div class="footer-content gra-container">
<img class="logo" src="/img/logo_gra_design_system.png">
<div class="contactsContent">
<div class="label">Contactos</div>
<div class="address">
<div class="iconContent">
<i class="icon-pin"></i>
<span>Lorem ipsum dolor sit amet consectetur, 23.<br>4440-444 Lorem ipsum</span>
</div>
</div>
<div class="contacts">
<div class="iconContent">
<i class="icon-phone"></i>
<a href="tel:+351296000000">296 000 000</a>
</div>
<div class="iconContent email">
<i class="icon-message"></i>
<a href="mailto:[email protected]">[email protected]</a>
</div>
</div>
</div>
</div>
</div>
<div class="footer-row second-row">
<div class="footer-content gra-container">
<div class="logosLeft">
<img class="logoUsabilidade" src="/img/logos/logo_usabilidade_bronze.png" alt="Logo Selo de Usabilidade & Acessibilidade">
</div>
<div class="links">
<a href="#" class="gra-link">Acessibilidade</a>
<a href="#" class="gra-link">Termos e Condições</a>
<a href="#" class="gra-link">Política de Privacidade</a>
<a href="#" class="gra-link">Definições de Cookies</a>
</div>
</div>
</div>
<div class="footer-row third-row">
<div class="footer-content gra-container">
<div class="gra-logos">
<a href="https://recuperarportugal.gov.pt/" target="_blank"><img class="gra-logo-prr" src="/img/logos/logo_prr.svg" alt="Plano de Recuperação e Resiliência"></a>
<a href="https://portal.azores.gov.pt/" target="_blank"><img class="gra-logo-gov" src="/img/logos/logo_gra_white.svg" alt="Governo Regional dos Açores"></a>
<a href="https://www.portugal.gov.pt" target="_blank"><img class="gra-logo-rp" src="/img/logos/logo_rp.svg" alt="República Portuguesa"></a>
<a href="https://next-generation-eu.europa.eu" target="_blank"><img class="gra-logo-ue" src="/img/logos/logo_ue.svg" alt="Financiado pela União Europeia"></a>
</div>
<div class="logosLeft">
<a href="https://recuperarportugal.gov.pt/transicao-digital/administracao-publica-mais-eficiente/" target="_blank"><img class="gra-logo-c19" src="/img/logos/logo_c19.svg" alt="Modernização e Digitalização da Administração Pública - RAA"></a>
<a href="https://incuba.azores.gov.pt/" target="_blank"><img class="gra-logo-incuba" src="/img/logos/logo_incuba.svg" alt="Incuba Açores"></a>
</div>
</div>
</div>
<div class="footer-row fourth-row">
<div class="logo-description gra-container">
<a href="https://portal.azores.gov.pt/" target="_blank"><img class="gra-logo-gov" src="/img/logos/logo_gra_white.svg" alt="Governo Regional dos Açores"></a>
<div>Esta é uma presença online oficial do <a href="https://portal.azores.gov.pt" class="gra-link" target="_blank">Governo dos Açores</a><br>Secretaria Regional das Finanças, Planeamento e Administração Pública</div>
</div>
</div>
</div>
</footer>
<footer>
<div class="gra-back-to-top gra-container">
<button type="button" class="icon icon-primary backToTop">
<i class="icon-chevron-up"></i>
</button>
</div>
<div class="gra-footer-opt-3">
<div class="footer-row first-row">
<div class="footer-content gra-container">
<div class="columnFooter">
<span class="label">Qualificação</span>
<div class="links">
<a href="#" class="gra-link">Lorem ipsum</a>
<a href="#" class="gra-link">Lorem ipsum</a>
<a href="#" class="gra-link">Lorem ipsum</a>
<a href="#" class="gra-link">Lorem ipsum</a>
</div>
</div>
<div class="columnFooter">
<span class="label">Links gerais</span>
<div class="links">
<a href="#" class="gra-link">Lorem ipsum</a>
<a href="#" class="gra-link">Lorem ipsum</a>
<a href="#" class="gra-link">Lorem ipsum</a>
<a href="#" class="gra-link">Lorem ipsum</a>
</div>
</div>
<div class="columnFooter">
<span class="label">Lorem ipsum</span>
<div class="links">
<a href="#" class="gra-link">Lorem ipsum</a>
<a href="#" class="gra-link">Lorem ipsum</a>
<a href="#" class="gra-link">Lorem ipsum</a>
<a href="#" class="gra-link">Lorem ipsum</a>
</div>
</div>
<div class="columnFooter">
<span class="label">Contactos</span>
<div class="links">
<div class="contactsContent">
<div class="contacts">
<div class="iconContent">
<i class="icon-pin"></i>
<span>Lorem ipsum dolor sit amet consectetur, 23.<br>4440-444 Lorem ipsum</span>
</div>
<div class="iconContent phone">
<i class="icon-phone"></i>
<a href="tel:+351296000000">296 000 000</a>
</div>
<div class="iconContent email">
<i class="icon-message"></i>
<a href="mailto:[email protected]">[email protected]</a>
</div>
<div class="socialIcons">
<a href="#" class="socialIcon">
<i class="icon-linkedin"></i>
</a>
<a href="#" class="socialIcon" target="_blank">
<i class="icon-instagram"></i>
</a>
<a href="#" class="socialIcon" target="_blank">
<i class="icon-youtube"></i>
</a>
<a href="#" class="socialIcon" target="_blank">
<i class="icon-x-twitter"></i>
</a>
<a href="#" class="socialIcon" target="_blank">
<i class="icon-facebook"></i>
</a>
<a href="#" class="socialIcon" target="_blank">
<i class="icon-tumblr"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-row second-row">
<div class="footer-content gra-container">
<div class="logosLeft">
<img class="logoUsabilidade" src="/img/logos/logo_usabilidade_bronze.png" alt="Logo Selo de Usabilidade & Acessibilidade">
</div>
<div class="links">
<a href="#" class="gra-link">Acessibilidade</a>
<a href="#" class="gra-link">Termos e Condições</a>
<a href="#" class="gra-link">Política de Privacidade</a>
<a href="#" class="gra-link">Definições de Cookies</a>
</div>
</div>
</div>
<div class="footer-row third-row">
<div class="footer-content gra-container">
<div class="gra-logos">
<a href="https://recuperarportugal.gov.pt/" target="_blank"><img class="gra-logo-prr" src="/img/logos/logo_prr.svg" alt="Plano de Recuperação e Resiliência"></a>
<a href="https://portal.azores.gov.pt/" target="_blank"><img class="gra-logo-gov" src="/img/logos/logo_gra_white.svg" alt="Governo Regional dos Açores"></a>
<a href="https://www.portugal.gov.pt" target="_blank"><img class="gra-logo-rp" src="/img/logos/logo_rp.svg" alt="República Portuguesa"></a>
<a href="https://next-generation-eu.europa.eu" target="_blank"><img class="gra-logo-ue" src="/img/logos/logo_ue.svg" alt="Financiado pela União Europeia"></a>
</div>
<div class="logosLeft">
<a href="https://recuperarportugal.gov.pt/transicao-digital/administracao-publica-mais-eficiente/" target="_blank"><img class="gra-logo-c19" src="/img/logos/logo_c19.svg" alt="Modernização e Digitalização da Administração Pública - RAA"></a>
<a href="https://incuba.azores.gov.pt/" target="_blank"><img class="gra-logo-incuba" src="/img/logos/logo_incuba.svg" alt="Incuba Açores"></a>
</div>
</div>
</div>
<div class="footer-row fourth-row">
<div class="logo-description gra-container">
<a href="https://portal.azores.gov.pt/" target="_blank"><img class="gra-logo-gov" src="/img/logos/logo_gra_white.svg" alt="Governo Regional dos Açores"></a>
<div>Esta é uma presença online oficial do <a href="https://portal.azores.gov.pt" class="gra-link" target="_blank">Governo dos Açores</a><br>Secretaria Regional das Finanças, Planeamento e Administração Pública</div>
</div>
</div>
</div>
</footer>