Footers

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

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	Description	Type
copyrightText	The text shown at the bottom of the footer, typically containing copyright information.	string
description	A brief text description that appears below the title, providing additional context or messaging.	string
footerSections	A JSON string representing an array of section objects, each containing a title and an array of links. Example format: jsonCopyEdit[ { "title": "Resources", "links": [ { "label": "Docs", "href": "/docs" }, { "label": "Support", "href": "/support" } ] } ]	string
footerTitle	The main title displayed in the footer section, typically a short heading or tagline.	string
loginButtonText	The label for the login button, allowing existing users to access their accounts.	string
logoAlt	The alternative text for the logo image, improving accessibility and SEO.	string
logoSrc	The URL or path to the logo image displayed in the footer.	string
signUpButtonText	The label for the sign-up button, which encourages users to create an account.	string
socialIcons	A JSON string representing an array of social media icons, each containing an href (link), src (image URL), and alt (alternative text). Example format: jsonCopyEdit[ { "href": "https://facebook.com", "src": "/assets/facebook.svg", "alt": "Facebook" }, { "href": "https://twitter.com", "src": "/assets/twitter.svg", "alt": "Twitter" } ]	string

Anatomy

Logo Bar: Logos are placed on both ends of the header. The Government of Dubai logo is positioned on the left, while the Digital Dubai logo is on the right, ensuring prominent branding and organizational representation.

Navigation Tabs: A horizontal row of tabs located in the center, providing quick access to different sections of the platform. The active tab is visually highlighted to indicate the user’s current location.

Search: A magnifying glass icon located in the interactive controls area, accompanied by placeholder text ("Search...") to enable quick content discovery.

Accessibility Icon: An icon representing accessibility options, allowing users to adjust settings for better usability, such as increased font size or contrast.

Language Toggle: A button labeled "العربية" to enable language switching between Arabic and English for bilingual support.

Login Button: A circular icon with "Login" text, allowing users to authenticate and access personalized features or accounts.

Hamburger Icon: A collapsible menu icon located on the far left, offering a compact navigation solution for smaller screens or alternative layouts.

Responsive Behavior

The header component turns to mobile view @ the 1024 breakpoint

---

Dos and Don'ts

Dos	Don'ts
The top center area is reserved for initiatives logos/banners.	Don't add any links to the logo bar center area.
Always use a black shadow overlay on high-quality hero images for the transparent header.	Don't use bright, crowded, or low-quality hero images for the transparent header.
Use high-quality logos in the logo bar.	Don't use low-quality logos, make sure to maintain the logo ratio, don't change the brand colors.
All logos, links, and Icons should be in white color if a transparent header is used.	Don't Use colored logos, text, or icons on the transparent header.