Website Footer

Website footer provides essential navigation, reinforce branding, and enhance usability by structuring the webpage’s conclusion with key links and information.

Overview

Usage

When to use this component?

The footer component to be included on all pages of a website to provide users with essential navigation links, legal information. It serves as a consistent reference point, ensuring users can easily access key resources, such as privacy policies, terms of service, regardless of where they are on the site.

How it works

The footer is typically divided into three main sections: informational links, interactive elements, and branding. Informational links direct users to important pages like policies, help centers, and company details. Interactive elements may include social media icons, newsletter subscription forms, or customer support options. Branding reinforces the company’s identity with a logo, tagline, and a mandatory copyright and last updated statement to ensure transparency and compliance.

Code

Vanilla Js

<dda-footer
    title="Welcome to your new digital reality."
    description="Let us help you take you from zero to serious business and beyond. Our no-strings attached free trial lets you test our product today."
    logo-src="https://www.digitaldubai.ae/ResourcePackages/Theme/assets/dist/images/logo.svg"
    logo-alt="Dubai-Digital-Authority"
    sign-up-button-text="Sign Up"
    login-button-text="Login"
    copyright-text="© 2023 Digitaldubai. All Rights Reserved."
    footer-sections='[{"title":"About Us","links":[{"label":"Our Competition","href":"#"},{"label":"Channels","href":"#"},{"label":"Scale","href":"#"},{"label":"Watch the Demo","href":"#"}]},{"title":"Products","links":[{"label":"Features","href":"#"},{"label":"Products","href":"#"},{"label":"Enterprise","href":"#"},{"label":"Solutions","href":"#"}]},{"title":"Resources","links":[{"label":"Partners","href":"#"},{"label":"Developers","href":"#"},{"label":"Community","href":"#"},{"label":"Apps","href":"#"}]},{"title":"Company","links":[{"label":"About Us","href":"#"},{"label":"Leadership","href":"#"},{"label":"News","href":"#"}]}]'
    social-icons='[{"href":"#","src":"https://img.icons8.com/?size=256&amp;id=118497&amp;format=png","alt":"Facebook"},{"href":"#","src":"https://img.icons8.com/?size=256&amp;id=118497&amp;format=png","alt":"Google"},{"href":"#","src":"https://img.icons8.com/?size=256&amp;id=118497&amp;format=png","alt":"Apple"},{"href":"#","src":"https://img.icons8.com/?size=256&amp;id=118497&amp;format=png","alt":"Instagram"}]'
    class="hydrated"
></dda-footer>

React

Vue

Angular

Properties

Property	Type
copyrightText	string
description	string
footerSections	string
footerTitle	string
loginButtonText	string
logoAlt	string
logoSrc	string
signUpButtonText	string
socialIcons	string

Anatomy

Entity Logo: Displaying the entity logo for branding and identity reinforcement.

Tagline: Located below the logo, providing a brief description of the platform’s purpose and value proposition.

Social Media Icons: Featuring icons for Facebook, Google, Apple, and Instagram to facilitate social engagement and external connectivity.

Navigation Links: To provide users with structured and intuitive access to key site areas.

Informational Links: Part of the navigation structure, guiding users to entity-related content such as About Us, News, Leadership, and the Media Kit.

Back-to-Top Button: A circular icon with an upward arrow, positioned centrally at the bottom of the footer, allowing users to quickly navigate back to the top of the page.

Copyright & Last Updated: Located at the very bottom, displaying © 2023 Digitaldubai. All Rights Reserved. to indicate ownership and legal information, ensuring transparency and compliance.

Responsive Behavior

The header component turns to mobile view @ the 1024 breakpoint

---

Dos and Don'ts

Dos	Don’ts
Keep the footer consistent across all pages for easy navigation.	Don’t use different footers on different pages, as it can confuse users.
Include essential links such as privacy policy, terms of service, and contact information.	Don’t overload the footer with excessive links or unnecessary information.
Use a clear visual hierarchy to organize informational links, interactive elements, and branding.	Don’t place important links randomly or in a cluttered layout.
Ensure the footer is responsive and adapts well to different screen sizes.	Don’t neglect mobile optimization, making the footer hard to use on smaller screens.
Add social media icons to provide quick access to external platforms.	Don’t use low-resolution or outdated social media icons.
Display a copyright and last updated statement for transparency and compliance.	Don’t omit legal information, which may lead to trust issues or compliance problems.
Use contrasting colors for readability while maintaining brand consistency.	Don’t use low-contrast text that makes links or information hard to read.
Provide a back-to-top button for better user experience.	Don’t rely solely on long scrolling without navigation aids.