# Website Footer
## 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
{% tabs %}
{% tab title="Vanilla Js" %}
```jsx
```
{% endtab %}
{% tab title="React" %}
```jsx
```
{% endtab %}
{% tab title="Vue" %}
```jsx
```
{% endtab %}
{% tab title="Angular" %}
```jsx
```
{% endtab %}
{% endtabs %}
### 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. |
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://designsystem.dubai.ae/components/footers/website-footer.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.