The Footer block is a consistent block to be used on all federal government entity websites as the primary footer of the website.

This versatile and responsive footer offers seamless integration at the page's end, adapting gracefully into an accordion layout on mobile devices for enhanced user experience. Keep your site's navigation polished and consistent across screens with this stylish and functional footer solution.

Key elements to note

  • The footer must follow the same colour and pattern.
  • The footer will contain the 171 tawasul contact information and logo only.
  • The entity's toll free contact number must be below the "171 tawasul" container.
  • Arrange you footer links in categories.
  • The bottom left section must include the copyright information in the following format:
    • The symbol of the copyright represented by ` & c o p y ; ` [read more]
    • The year, which must be a dynamic element and auto change every year.
    • The name of the entity.
    • Finally followed by the words - "All rights reserved."
  • The icons to represent the profiles of the entities social media accounts.
  • Do not add any other element to the footer than what is provided.
  • Do not add any other logo's of supporting entities and projects.
  • Do not change the footer in any way, except for the choice of links to add from your website.
  • The elements, colours, hover colours and other aspects of the footer will adapt to the custom colour swatch an authority may add to to the configuration. For more information on this, you may refer to the colour guideline and the use of custom colours.
This component depends on Javascript

This component depends on the use of JavaScript. The structure of code defined will work out-of-box if the bundled JavaScript library of AEGov-Design-System is utilized.

Using this JavaScript library is not mandatory. You may choose your preferred library as well, however you are required to style the component as per the example provided.

Pro tip

Resize the browser window you are viewing this block in to see how the footer block gracefully changes on various device sizes and adapts to an accordion on mobile devices.