# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
This site has an agentic ask interface you may use to query the documentation dynamically by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://designsystem.dubai.ae/index.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

---

# Release Notes

Always follow and use the **latest published version** when installing the package.

<table><thead><tr><th width="105">Version</th><th width="140">Date</th><th>Details</th></tr></thead><tbody><tr><td>2.2</td><td>16 Jul 2025</td><td><ol><li><strong>New Components</strong></li><li><strong>New Variants Components</strong></li><li><strong>Developers Updates</strong></li></ol></td></tr><tr><td>2.1</td><td>4 Jun 2025</td><td><ol><li><strong>New Components</strong></li><li><strong>New Variants Components</strong></li></ol></td></tr><tr><td><strong>2.0.0</strong></td><td>2 May 2025</td><td><ol><li><strong>Typography</strong></li><li><strong>Design Updates</strong></li><li><strong>Developers Updates</strong></li></ol></td></tr><tr><td>1.1.0</td><td>28 Mar 2025</td><td><ol><li><strong>Usability Guidelines</strong></li><li><strong>Breakpoints Update</strong></li><li><strong>Typography and Colors Figma Guidelines</strong></li><li><strong>Component Enhancements</strong></li><li><strong>New Variants Components</strong></li><li><strong>New Components</strong></li></ol></td></tr><tr><td>1.0.1</td><td>21 Feb 2025</td><td>Added descriptions to component props for developers</td></tr><tr><td><strong>1.0.0</strong></td><td>15 Nov 2024</td><td><strong>Design System (Phase 3)</strong></td></tr></tbody></table>

## 2.2 (16 Jul 2025)

### **What's New**

We’re excited to announce the addition of new components and the introduction of new variants to enhance flexibility and consistency across the design system. Below are the detailed updates:

### New Components

**Cards:** Event Card, Group Card, Pricing Card, Team Member Card, Team Section Card, Video Card.

### New Variants Components&#x20;

**Timeline:** Previously called Horizontal Stepper, now renamed and expanded to include a Vertical Timeline variant.

**Login Button:** Now available for headers in the mobile version.

**Sticky Bar**: Displays the website's last updated date on the sticky bar.

### **Developers Updates**

Updated packages have been published — you can download them from the Downloads section.

### New Components

**Cards:** Event Card, Group Card, Pricing Card, Team Member Card, Team Section Card, Video Card.

### Component Enhancements on Code

RTL Support, Alert, Button, Icon Button, Link Button, Checkbox, Checkbox Groups, Radio Inputs, Search Input Field, Sticky Bar, Tabs, Text Field.

## 2.1 (4 Jun 2025)

### **What's New**

We’re excited to announce the addition of new components and the introduction of new variants to enhance flexibility and consistency across the design system. Below are the detailed updates:

### New Components&#x20;

**Tabs:** A dynamic tab component has been added under the Tabs component to support both main and sub-vertical navigation.

**Accordions:** Nested accordions are now available, enabling designs with multiple sub-accordions within a main accordion.

### New Variants Components&#x20;

**Number Field:** A new property allows the AED currency symbol to be displayed within the field.

**Accordions:** A variant supporting more advanced content types has been added.

## 2.0 (2 May 2025)

### **What's New**

We’re excited to introduce a range of enhancements across components and foundational elements. Below are the detailed updates, including improvements to integration properties.

## **Fundamentals Enhancement:**&#x20;

### **Typography**

Updated type scale specifications and added key principles for responsive font scaling by breakpoint to guide usage; corresponding tokens have also been updated in Figma.

## **Design Updates**

### **Spacing System**

Updated spacing tokens in Figma.

### **Figma – Global Building Blocks Page**

**Social Media**: Updated the Twitter icon.

### **Design Component Enhancement**

**Sticky Bar:** The large breakpoint is fixed in the figma file.&#x20;

### Page Samples

We have provided reference pages demonstrating how to use the components across key templates such as the landing page, services, contact us, login, and register pages.

## **Developers Updates**

### **New Packages** have been published

### **New Components**

**Cards**: Basic card component is now available.

**Banner Slider**: Introduced for use on the homepage.

### Component Enhancements

**Sub Menu:** Opens last dropdown from main navigation.&#x20;

**Side Menu:** Opens all dropdowns from the main navigation.

**Sticky Footer:** Icons rendering issue resolved; icons now display correctly. and added the ability to hide middle links on the stickybar.

**Dynamic UI:** Side view initiatives now support dynamic phrasing using user-configured values.

**Accessibility & Semantics:** Added `name` attributes to inputs, buttons, and anchor tags.

## 1.1.0 (28 Mar 2025)

### **What's New**

In this latest release, we are thrilled to unveil a series of enhancements and new component variants that enhance functionality and user interaction. Below, you will find detailed updates including the integration of new properties, refinements to existing components, and the introduction of innovative variants and components. All these updates are designed to elevate your experience and expand the customization and usability options within the Dubai Design System.

### **Usability Guidelines**

New usability guidelines have been introduced under the "Foundations" section, focusing on enhancing digital city experiences.

### **Breakpoints Update**

The description for our table breakpoints has been updated to reflect our ongoing efforts to standardize design practices. While we strive to provide a consistent framework, we acknowledge that individual entities may have specific needs. You are encouraged to tailor these breakpoints to fit your project's requirements, ensuring that any adjustments adhere to the Web Content Accessibility Guidelines (WCAG) to maintain accessibility for all users.

### **Typography and Colors Figma Guidelines**

We've provided detailed guidelines on how to effectively set up typography and colors within Figma.

### Component Enhancements

**Hamburger (Side Menu) Behavior:** Boolean properties have been integrated, enabling the disabling of the 'Hamburger' menu as required.

**Submenu:** The 'Title' boolean property can disable the menu group component.

**Accordion:** A CTA button has been added, along with a prototype to demonstrate the component's behavior.

**Footer:** The 'Optional Logo' boolean property can be used to disable the menu group component.

**Progress Bar:** A Target Value feature has been incorporated into the component.

**Phone Number:** The section now includes a dropdown for country selection with a search function and a separator between the country code and the input field.

**Sticky Bar:** An extra link button has been added for optional use.

**Pagination:** The component has been refactored to enhance usability.

**Toggles:** An icon has been added to indicate when the toggle is active.

**Alert:** The button is optional and can be hidden with the 'button container' boolean property, including options for primary and secondary buttons and text color.

**Breadcrumbs:** Previous pages with links now use the primary color, and the active page without a link is styled with the on-surface-variant color.

**Rating:** The color of the component has been updated.

### New Variants Components&#x20;

**Tabs:** A vertical variant has been added for easier vertical navigation, and a separate Vertical Tab variant is also introduced to further enhance layout options.

**Buttons:** A Split Button variant has been added to the 'Buttons' component, offering additional functionality for combined actions.

**Phone Number:** A new variant has been introduced to display the dropdown for easier country selection.

**Select Field & Quick Select Field:** These components now support displaying multiple selected elements, improving user interaction and selection visibility.

**Step Indicator:** Description text can now be placed below the indicator to provide clearer guidance and information at each step.

**Submenu:** This component now allows for enabling or disabling icons within 'Menu Groups,' offering greater customization of the visual display.

**Search Field Update:** We've introduced voice command functionality to enhance the search experience, allowing users to conduct searches using voice input.

### New Components&#x20;

**Checkbox Groups & Checkbox Groups Card:** New variants for Checkbox Groups have been added, including a card format that encapsulates checkbox options in a more structured and visually distinct layout.

**Radio-Button Groups & Radio-Button Groups Card:** Variants for Radio-Button Groups now include a card option, providing a clear and engaging way to display choices within a card format, enhancing the user interface with a more organized appearance.

**Accordion Group:** This  component allows for the grouping of multiple accordions, enabling better content organization and navigation within complex interfaces. It includes functionality to expand or collapse all sections collectively, improving user experience with bulk actions.

**Split Button:** This component combines the functionality of a standard button with a dropdown menu, allowing users to either execute the default button action or select from a list of additional actions. This dual-functionality makes it a versatile tool for interfaces where space is limited but multiple actions are necessary.

## 1.00 (15 Nov 2024)

### **What's New**

We are excited to announce the launch of a unified design system developed specifically for all government entities. This design system provides a flexible, cohesive framework that ensures consistency across platforms while allowing each entity the customization they need to meet their unique objectives and user needs.

### Key Benefits of the Design System:

**Consistency Across Platforms**: By using standardized components, colors, typography, and layouts, we ensure a cohesive look and feel across all government digital interfaces, reinforcing trust and recognition for users.

**Customizable and Flexible**: The design system is built to be adaptable. Each entity can modify and personalize components as needed, ensuring that the system supports your specific content, users, and objectives without sacrificing overall visual harmony.

**Accessibility and Usability**: All components in the design system are designed with accessibility standards in mind, ensuring compliance with WCAG guidelines. This makes it easier to create accessible, user-friendly content for all citizens, residents, and tourists.

**Efficiency in Development**: The design system includes ready-made components and templates, reducing the time and resources required for design and development. This allows teams to focus more on content and functionality rather than creating new designs from scratch.

### How to Use the Design System:

The design system is accessible to all entities as a downloadable file, which can be requested via email at <cedd@digitaldubai.ae>. GitBook provides comprehensive documentation detailing the usage, anatomy, and dos and don'ts of each component.


# Downloads

## HTML Templates

{% file src="/files/3yhxKI5ZSttkgGzfA5KK" %}
Common page templates
{% endfile %}

{% file src="/files/N1XyhIu06cu6f4x5VM4f" %}

### Figma UI Library

***Note:** Figma does not currently support automatic library updates to external teams.*

### **1. Download Figma Library**

For access to the Figma file, please contact us at <cedd@digitaldubai.ae>

### **2. Add Library**

After downloading the  library, you must then upload the .fig file into your team's projects. To do this, open Figma (in-app or browser) and drag the file into the Figma window. Alternatively, you may click on the "Import File" button and select the correct file from your local directory. Once imported, you should [publish the library](https://help.figma.com/hc/en-us/articles/360041051154-Guide-to-libraries-in-Figma) within your team.

### **3. Updating the Library**

Due to the above-noted limitation of Figma, updates to the library must be manually accomplished. Please routinely check this page for future updates to the UI Library. Additionally, we will notify you of any updates to the library.

To update your library, repeat steps 1 & 2 with the latest version of the library. Once the updated version is added to your team, use the [swap libraries feature](https://www.youtube.com/watch?v=GQ2jztKpxLk) in Figma, which will allow you to replace the old library with the latest one without disconnecting any instances of the library you may have used in your designs.

***

## DubaiAI

For DubaiAI design guidelines and the logo, please refer back to the Figma file.

**URLs for DubaiAI Chatbot Landing Page:**

Entities can use the following URLs to access the DubaiAI chatbot landing page. Each entity should append their unique code at the end of the URL to direct users to their specific landing pages:

* **English (EN):**
* <https://chat.dubai.ae/?lang=en-US&mode=modal&source=> \[entity code]
* **Arabic (AR):**
* <https://chat.dubai.ae/?lang=ar-SA&mode=modal&source=> \[entity code]

For example, for MBRHE, the URLs would be:

* **English (EN):**
* <https://chat.dubai.ae/?lang=en-US&mode=modal&source=mbrhe>
* **Arabic (AR):**
* <https://chat.dubai.ae/?lang=ar-SA&mode=modal&source=mbrhe>

Entities should replace "\[entity code]" in the URLs with their specific identifier. If you don't know what your identifier is, please refer back to the Excel sheet attached to ensure users are directed to the appropriate landing page within the DubaiAI chatbot platform.

{% file src="/files/ePX2O6JD1IQBygwedQ29" %}

***

## Happiness Meter

### Web:

1. **Happiness Meter Web Widget Integration and Development** [**Guide**](https://happinessportal.dubai.ae/Documents/Happiness%20Meter%20Web%20Widget%20Integration%20and%20Development%20Guide%20V2.pdf) **:** A document that outlines and explains the required development activities for departments to integrate with the Happiness Meter on the web.
2. **Happiness Meter .Net Sample Web** [**Guide**](https://happinessportal.dubai.ae/Documents/Happiness_Meter_DotNet_Sample_Web.zip)**:** Example implementation of the happiness widget on the web using .Net language.
3. **Happiness Meter Java Sample Web** [**Guide**](https://happinessportal.dubai.ae/Documents/Happiness_Meter_Java_Sample_Web.zip)**:** Example implementation of the happiness widget on the web using Java language.
4. **Happiness Web Test Cases** [**Guide**](https://happinessportal.dubai.ae/Documents/Happiness%20Web%20Test%20Cases.xlsx)**:** A list of test cases that departments need to execute and share with Digital Dubai Government Establishment to certify the web implementation.
5. **Happiness Meter Inquiry Service Specification** [**Guide**](https://happinessportal.dubai.ae/Documents/SDG_Happiness_Index_Inquiry_Service_Specification_v4.3.pdf)**:** A document describing the “Happiness Index Vote Inquiry” Web Service specification, designed to enable departments to inquire about the votes.

### Mobile App:

1. **Happiness Meter Mobile App Integration and Development** [**Guide**](https://happinessportal.dubai.ae/Documents/Happiness%20Meter%20Mobile%20App%20Integration%20and%20Development%20Guide%20V2.2.pdf)**:** A document that describes and explains the necessary development activities for departments to integrate with the Happiness Meter on mobile apps.
2. **Happiness Meter iOS Sample App** [**Guide**](https://happinessportal.dubai.ae/Documents/Happiness%20Meter%20iOS%20Sample%20App.zip)**:** Example iOS application of happiness widget on Mobile in iOS language.
3. **Happiness Meter Android Sample App** [**Guide**](https://happinessportal.dubai.ae/Documents/Happiness%20Meter%20Android%20Sample%20App.zip)**:** Sample Android application of happiness widget on mobile in Android language.
4. **Happiness Mobile Test Cases** [**Guide**](https://happinessportal.dubai.ae/Documents/Happiness%20mobile%20Test%20Cases%20V2.xlsx)**:** A list of test cases that departments need to execute and share with Digital Dubai Government to certify the implementation on mobile apps.

### Tablet - Service Center:

1. **New Service Centers Request Form** [**Guide**](https://happinessportal.dubai.ae/Documents/New%20Service%20Centers%20Request%20Form.xlsx)**:** A form to be filled out with the service center details where the Happiness Meter will be implemented.
2. **Happiness Meter iOS Tablet Sample App** [**Guide**](https://happinessportal.dubai.ae/Documents/Happiness%20Meter%20iOS%20Tablet%20Sample%20App.zip)**:** Example iOS application of the happiness widget on tablets using iOS language.
3. **Happiness Meter Android Tablet Sample App** [**Guide**](https://happinessportal.dubai.ae/Documents/Happiness%20Meter%20Android%20Tablet%20Sample%20App.zip)**:** Sample Android application of happiness widget on Tablets in Android language.


# Frequently Asked Questions

<details>

<summary><strong>Can we build our own component library?</strong> </summary>

Yes, you can develop your own component library as long as it aligns with our specifications and general design language and ensures full compatibility with our design system.

</details>

<details>

<summary><strong>What is the purpose of pattern samples?</strong></summary>

Pattern samples are intended to serve as templates that guide designers. They are not meant to be used directly as components but should be adapted to fit specific project requirements.

</details>

<details>

<summary><strong>Can we adjust the standard breakpoints to better fit our specific project needs?</strong></summary>

Breakpoints are flexible recommendations. You can define breakpoints that best suit your project's needs, ensuring compliance with the Web Content Accessibility Guidelines (WCAG). Should you choose to use your own breakpoint you must align the header and sticky bar components behave responsively in alignment with your breakpoints.

</details>

<details>

<summary><strong>What is the required spacing between multiple accordions?</strong></summary>

Accordions should be spaced 16px apart. This specification can be found in the design and Gitbook as Accordions as Accordion Groups

</details>

<details>

<summary><strong>What is the behavior of logos on transparent and white backgrounds?</strong></summary>

Since logos feature variable colors and are not linked to the token library, they require manual updates to ensure they display correctly on both transparent and white backgrounds.

</details>

<details>

<summary><strong>What is the accessibility standard for disabled variants in components?</strong></summary>

All disabled components are designed to be accessible, adhering to the WCAG Contrast Recommendations.

</details>

<details>

<summary><strong>Is the usage of the Mega Menu mandatory, or can it be changed to a standard dropdown menu according to the design guidelines?</strong></summary>

A dedicated page for Menus is available that includes all variants, allowing for flexible implementation as per project requirements.

</details>

<details>

<summary><strong>Where should additional icons, such as a survey icon, be placed in the sticky bar?</strong> </summary>

An extra link button has been added to the sticky bar to accommodate such icons.

</details>

<details>

<summary><strong>How can a logo variant be removed from the footer?</strong></summary>

Use the 'Optional Logo' boolean property to disable the logo within the menu group component.

</details>

<details>

<summary><strong>How should the Figma file be updated for mobile views of Tabs Design, Breadcrumbs, List, and Service Header?</strong></summary>

**Tabs Design for Mobile View**

**Fixed Tabs:** For 3–5 tabs, they should remain visible and be equally spaced across the display.

**Scrollable Tabs:** For more than 5 tabs, they should become horizontally scrollable, enabling users to swipe through them.

**Breadcrumbs in Mobile View**

Typically, only the last one or two levels of breadcrumbs are displayed.

Earlier levels can be collapsed into a dropdown menu or represented by an ellipsis (...).

**Example:**

**Desktop:** Home > Category > Subcategory > Item

**Mobile:** ... > Subcategory > Item

**List and service header in Mobile View**

Available on Figma

</details>

<details>

<summary><strong>How does the design system address various aspects of file attachments, including visibility of file size, handling long file titles, cancel options, browse button consistency, predefined documents, and error/helper messages during the file upload process?</strong></summary>

The design system ensures a comprehensive and user-friendly approach to file attachments by incorporating several key features:

**File Size Visibility**: During the upload, the file size is clearly displayed next to the file name to keep users informed.

**Cancel Button**: An 'X' button allows users to cancel the upload process or remove a file post-upload, enhancing user control.

**Handling Long File Titles**: To manage long file titles, the system truncates them with ellipses, such as "Annual\_Report\_2...iew\.pdf", ensuring the file name fits within available space while remaining readable.

**Browse Button Consistency**: The "Browse" button's font size is matched with the "Drop Your File" text to maintain visual consistency across the interface.

**Predefined Documents**: The system displays predefined document types within the component's helper text, like 'SVG, PNG, JPG (Max. File Size: 25MB)', and includes validation to prevent uploads of unsupported formats.

**Error and Helper Messages**: Both error and helper messages are displayed in the same 'helper text' field. For example, if a file exceeds the specified size limit, an error message like 'File exceeds size limit. Please upload a file with a maximum size of 25MB.' is shown.

</details>

<details>

<summary><strong>What is the recommended responsive side menu design for a Type 5 mega menu that includes three navigation levels?</strong></summary>

The responsive side menu design for the Type 5 mega menu, including all three navigation levels, is now provided in the Figma file.

</details>

<details>

<summary>Is there a calendar component (Date/Time picker) available in the design system?</summary>

The requested component is already available in the library under the **Date & Time** section.

</details>


# Introduction

## Code of conduct <a href="#code-of-conduct" id="code-of-conduct"></a>

This project has adopted the Contributor Covenant in version 2.0 as our code of conduct. All contributors must abide by the code of conduct.

## How to contribute <a href="#how-to-contribute" id="how-to-contribute"></a>

We always welcome and encourage contributions and feedback. For more information on how to contribute, the project structure, as well as additional information, see our Contribution Guidelines. By participating in this project, you agree to abide by its Code of Conduct at all times.

Our commitment to open source means that we are enabling all interested parties to contribute and become part of its developer community.

## NPM Packages <a href="#npm-packages" id="npm-packages"></a>

| Package Name                            | Description                                 |
| --------------------------------------- | ------------------------------------------- |
| @dubai-design-system/components-js      | Web components                              |
| @dubai-design-system/components-react   | Wrapper package for React (autogenerated)   |
| @dubai-design-system/components-vue     | Wrapper package for Vue (autogenerated)     |
| @dubai-design-system/components-angular | Wrapper package for Angular (autogenerated) |

## **Enabling Prop Type Declaration on Hover in VS Code**

To ensure prop types and descriptions are viewable on hover:

1. Make sure you are using TypeScript for prop declarations in Stencil components.
2. Enable TypeScript IntelliSense by verifying that **TypeScript > Hover** is turned on in VS Code settings..
3. Restart VS Code if prop type declarations are not displaying immediately on hover.

Following these steps will set up your development environment for building, testing, and deploying the project.


# Color Variables

## Core colors

Core colors are used to support user interface design by calling attention to specific elements, such as buttons, callouts, icons, etc.

## Color Generation

You can use the [DDS Color Generation Figma Plugin](https://www.figma.com/community/plugin/1466343929570942460/dds-color-generator) to generate custom color palettes for this design system.

```css

  /*Primary Variants*/
  --dda-primary-0: #000000;
  --dda-primary-4: #001110;
  --dda-primary-5: #001413;
  --dda-primary-6: #001716;
  --dda-primary-10: #00201F;
  --dda-primary-12: #002423;
  --dda-primary-17: #00302F;
  --dda-primary-20: #003735;
  --dda-primary-22: #003C3A;
  --dda-primary-24: #00413F;
  --dda-primary-25: #004341;
  --dda-primary-30: #00504E;
  --dda-primary-35: #005D5A;
  --dda-primary-40: #006A67;
  --dda-primary-50: #008582;
  --dda-primary-60: #00A19E;
  --dda-primary-70: #21BEBA;
  --dda-primary-80: #4DDAD6;
  --dda-primary-87: #66EEE9;
  --dda-primary-90: #6FF7F2;
  --dda-primary-92: #76FDF8;
  --dda-primary-94: #99FFFA;
  --dda-primary-95: #D0F5F4;
  --dda-primary-96: #C2FFFB;
  --dda-primary-98: #E3FFFD;
  --dda-primary-99: #F2FFFD;
  --dda-primary-100: #FFFFFF;


  /*Secondary Variants*/
 --dda-secondary-0: #000000;
  --dda-secondary-4: #000836;
  --dda-secondary-5: #000A3D;
  --dda-secondary-6: #000C43;
  --dda-secondary-10: #001257;
  --dda-secondary-12: #001561;
  --dda-secondary-17: #092072;
  --dda-secondary-20: #132778;
  --dda-secondary-22: #192C7D;
  --dda-secondary-24: #1E3181;
  --dda-secondary-25: #213484;
  --dda-secondary-30: #2E4090;
  --dda-secondary-35: #3B4C9C;
  --dda-secondary-40: #4758A9;
  --dda-secondary-50: #6071C4;
  --dda-secondary-60: #7A8BE0;
  --dda-secondary-70: #95A6FD;
  --dda-secondary-80: #B9C3FF;
  --dda-secondary-87: #D2D8FF;
  --dda-secondary-90: #DDE1FF;
  --dda-secondary-92: #E5E6FF;
  --dda-secondary-94: #ECECFF;
  --dda-secondary-95: #F0EFFF;
  --dda-secondary-96: #F3F2FF;
  --dda-secondary-98: #FBF8FF;
  --dda-secondary-99: #FEFBFF;
  --dda-secondary-100: #FFFFFF;

```


# Font Family

The Font used in a digital product represents a piece of the brand’s values and hence we made sure that you would be able to easily apply your font to your application.

**By just adding a simple style tag you can ensure that your brand font is reflected across your application in a cohesive manner.**

```css
body{
 font-family: "your_font_family"
}
```


# Vanilla JS

## DDA with Web Components <a href="#dda-with-web-components" id="dda-with-web-components"></a>

This is a step-by-step guide to use vanilla web components.

#### Setup  <a href="#setup" id="setup"></a>

For version above 3.11.0

First, import the package script and CSS:

<pre class="language-jsx"><code class="lang-jsx">&#x3C;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@dubai-design-system/components-js@latest/dist/dda/dda.css" />
<strong>&#x3C;script type="module">
</strong>        import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/@dubai-design-system/components-js@latest/loader/index.js';
        defineCustomElements();
&#x3C;/script>
</code></pre>

**For Versions older the 3.11.0**

First, import the package script and CSS:

```html
<script type="module">
        import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/@dubai-design-system/components-js@latest/loader/index.js';
        defineCustomElements();
</script>
```

Next, add the material-icons package which is the icon package used by DDA:

Start by adding the material-icons package inside the `<head>` tag

```jsx
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
```

You should now be able to use DDA components:

```jsx
<dda-button 
    button_color="default-primary" 
    start_icon="sentiment_satisfied"
    end_icon="arrow_forward" 
    custom_class="" 
    mode="light" 
    button_id="button" 
    aria_label="button"
    size="lg"
    button_shape="circle">
    Click Here
 </dda-button>
```


# React

## DDA with React <a href="#dda-with-react" id="dda-with-react"></a>

This is a step-by-step guide to use the DDA components in React.

### Setup <a href="#setup" id="setup"></a>

First, install the package [@dubai-design-system/componts-react](https://www.npmjs.com/package/@dubai-design-system/components-react)

```jsx
npm i @dubai-design-system/components-react
```

**For Versions 3.11.0+, add CSS reference as below:**

```jsx
import '@dubai-design-system/components-js/dist/dda/dda.css';
```

Next, add the material-icons package which is the icon package used by DDA:

Start by adding the material-icons package inside the `<head>` tag

```jsx
<style>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</style>
```

You should now be able to use DDA components:

```jsx
import React from 'react';
import { DdaButton } from "@dubai-design-system/components-react";

const App = () => (
  <div>
    <DdaButton
    button_color="default-primary"
    start_icon="sentiment_satisfied"
    end_icon="arrow_forward"
    custom_class=""
    component_mode=""
    button_id="button"
    aria_label="button"
    onclick="console.log('clicked')"
    >Button</DdaButton>
  </div>
);

export default App;
```


# Vue

## DDA with Vue <a href="#dda-with-vue" id="dda-with-vue"></a>

This is a step-by-step guide to use the DDA components in Vue.

#### Setup <a href="#setup" id="setup"></a>

First, install the package [@dubai-design-system/components-vue](https://www.npmjs.com/package/@dubai-design-system/components-vue)

```jsx
npm i @dubai-design-system/components-vue
```

**For Versions 3.11.0+, add CSS reference as below:**

```jsx
import '@dubai-design-system/components-js/dist/dda/dda.css';
```

Next, install the font-awesome package which is the icon package used by DDA:

Start by adding the material-icons package inside the `<head>` tag

```jsx
<style>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</style>
```

In your main.js file, import your component library plugin and use it:

```jsx
<script>

// src/main.js

import { ComponentLibrary } from '@dubai-design-system/components-vue';

createApp(App).use(ComponentLibrary).mount('#app');

</script>
```

```
<script>    
    import { DdaButton } from '@dubai-design-system/components-vue';
</script>

<template>
    <div>
        <DdaButton
            button_color="default-primary"
            start_icon="sentiment_satisfied"
            end_icon="arrow_forward"
            custom_class=""
            component_mode=""
            button_id="button"
            aria_label="button"
            onclick="console.log('clicked')"
        ><!---->Button</DdaButton>
    </div>
</template>
```


# Angular

## DDA with Angular <a href="#dda-with-angular" id="dda-with-angular"></a>

This is a step-by-step guide to use the DDA components in Angular.

#### Setup <a href="#setup" id="setup"></a>

First, install the package [@dubai-design-system/components-angular](https://www.npmjs.com/package/@dubai-design-system/components-angular)

```jsx
npm i @dubai-design-system/components-angular
```

**For Versions 3.11.0+, add CSS reference as below:**

```json
"styles": [
  "node_modules/@dubai-design-system/components-js/dist/dda/dda.css"
]
```

Next, add the material-icons package which is the icon package used by DDA:

Start by adding the material-icons package inside the `<head>` tag

```jsx
<style>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</style>
```

Import and add the following to your `app.module.ts` file

```jsx
import { ComponentLibraryModule } from '@dubai-design-system/components-angular';

@NgModule({
  imports: [ComponentLibraryModule],
})
export class AppModule {}
```

You should now be able to use DDA components inside your `app.component.html` file:

```jsx
<dda-button
        button_color="default-primary"
        start_icon="sentiment_satisfied"
        end_icon="arrow_forward"
        custom_class=""
        component_mode=""
        button_id="button"
        aria_label="button"
        onclick="console.log('clicked')"
    >Button</dda-button>
```


# RTL Support

Our component library supports **Right-to-Left (RTL) layouts**, but RTL handling should be implemented **on your side** as a developer. To enable RTL, you need to **set the `dir="rtl"` attribute** on the `<body>` or relevant container element programmatically in your project.

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<html lang="ar" dir="rtl">
<body>
  <dda-button></dda-button>
</body>
</html>
```

{% endtab %}

{% tab title="React" %}

```jsx
 <div dir="rtl">
      <DdaButton />
 </div>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<template>
  <div dir="rtl">
    <DdaButton />
  </div>
</template>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<div dir="rtl">
  <dda-button></dda-button>
</div>
```

{% endtab %}
{% endtabs %}


# Light Mode/Dark Mode

Our component library supports **Dark Mode** and **Light Mode** Layouts with **Light Mode** as the default Option, but the handling should be implemented **on your side** as a developer. To enable Dark Mode, you need to **set the `data-theme="dark"` attribute** on the `<body>` or relevant container element programmatically in your project.

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<html data-theme="dark">
<body>
  <dda-button></dda-button>
</body>
</html>
```

{% endtab %}

{% tab title="React" %}

```jsx
 <div data-theme="dark">
      <DdaButton />
    </div>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<template>
  <div data-theme="dark">
    <DdaButton />
  </div>
</template>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<div data-theme="dark">
  <dda-button></dda-button>
</div>
```

{% endtab %}
{% endtabs %}


# Navigation/Routers

Our component library supports SPAs and routers, to use your router instead of regular href based redirection you can use combination of below properties.

| Property       | Description                                                                   | Type                       |
| -------------- | ----------------------------------------------------------------------------- | -------------------------- |
| useNavigator   | Enables/Disables the use of event listener instead of href attribute on links | string ("true" \| "false") |
| navigatorClick | Use it to capture the on click event after useNavigator is set to true        | EventListener              |

**Step 1:**

Set use-navigator to "true".

**Step 2:**

Use Event Listener for event `navigatorClick` to capture and handle your desired behavior in javascript.

The path clicked can be found in `event.detail`.

<pre><code>// Sample Use in dda-header
&#x3C;dda-header
      first-logo-href="https://www.dubai.gov.ae"
      first-logo-src="https://www.dof.gov.ae/Style Library/img/gov-logo.svg"
      first-logo-white-src="https://www.dof.gov.ae/Style Library/img/gov-logo-white.svg"
      first-logo-alt="Dubai-Digital-Authority"
      use-navigator="true"
......
/>

&#x3C;script>
<strong>      const ddaHeader = document.querySelector("dda-header");
</strong>      ddaHeader.addEventListener("navigatorClick", (event) => {
        alert("Event Listener Triggered");
        console.log(event.detail)
      });      
&#x3C;/script>

</code></pre>


# Input Interactions

Our component library supports two way interactions with components.

You can pass value to the components and also receive back any changed/entered value.

The below attributes can be used to interact with any applicable form component.

### **Getting Values/Updates from a component:**

<table><thead><tr><th>Property</th><th>Description</th><th>Type</th></tr></thead><tbody><tr><td><p></p><pre class="language-typescriptreact"><code class="lang-typescriptreact">getValue
</code></pre></td><td>This method returns the selected/entered value.<br>The method returns the selected/entered value.</td><td><strong>Method()</strong></td></tr><tr><td><p></p><pre class="language-typescriptreact"><code class="lang-typescriptreact">onChanged
</code></pre></td><td>This is an event emitted every time there is a change in current value of the component.<br>In the <strong>event.detail</strong> you will find the selected/entered value.</td><td><strong>Event Listener</strong></td></tr><tr><td><p></p><pre class="language-typescriptreact"><code class="lang-typescriptreact">onBlurred
</code></pre></td><td>This is an event emitted every time the component loses focus.<br>In the <strong>event.detail</strong> you will find the selected/entered value.</td><td><strong>Event Listener</strong></td></tr><tr><td><p></p><pre class="language-typescriptreact"><code class="lang-typescriptreact">input
</code></pre></td><td>This is the default event that is fired once the value of the element is changed.<br>You will receive the event as a value.</td><td><strong>Event Listener</strong></td></tr><tr><td><p></p><pre class="language-typescriptreact"><code class="lang-typescriptreact">keydown
</code></pre></td><td>This is the default event that is fired once any key is pressed on the element in focus.<br>You will receive the event as a value.</td><td></td></tr></tbody></table>

### **Setting/Updating Value to a component:**

<table><thead><tr><th>Property</th><th>Description</th><th>Type</th></tr></thead><tbody><tr><td><p></p><pre class="language-typescriptreact"><code class="lang-typescriptreact">setValue
</code></pre></td><td>This method sets the selected/entered value.</td><td><strong>Method()</strong></td></tr><tr><td><p></p><pre class="language-typescriptreact"><code class="lang-typescriptreact">onChanged
</code></pre></td><td>This is an event emitted every time there is a change in current value of the component.<br>In the <strong>event.detail</strong> you will find the selected/entered value.</td><td><strong>Event Listener</strong></td></tr><tr><td><p></p><pre class="language-typescriptreact"><code class="lang-typescriptreact">onBlurred
</code></pre></td><td>This is an event emitted every time the component loses focus.<br>In the <strong>event.detail</strong> you will find the selected/entered value.</td><td><strong>Event Listener</strong></td></tr></tbody></table>

### Example Usage

#### **React JS**

<pre class="language-jsx"><code class="lang-jsx">import { useState } from "react";
// Import the component
import { DdaTextarea } from "@dubai-design-system/components-react";

function App() {
      const [text, setText] = useState("");
      
      return (
<strong>            &#x3C;>
</strong>                  &#x3C;DdaTextarea
                      onInput={(event) => {
                        console.log(event.currentTarget.getValue());
                        setText(event.currentTarget.getValue());
                      }}
                  />
                  &#x3C;p>{text}&#x3C;/p>
            &#x3C;/>
      )
}

</code></pre>

#### Angular JS

app.component.ts

```javascript
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  text = '';

  async handleInput(event: Event) {
    const target = event.target as any;
    const value = await target.getValue();
    console.log(value);
    this.text = value;
  }
}
```

app.component.html

```html
<dda-textarea (input)="handleInput($event)"></dda-textarea>
<p>{{ text }}</p>
```

#### Vanilla JS

```html
<div>
    <dda-textarea id="dda-textarea"></dda-textarea>
    <p id="output"></p>
</div>

<script>
      const textareaEl = document.getElementById('dda-textarea');
      const outputEl = document.getElementById('output');

      textareaEl.addEventListener('input', (event) => {
        const value = textareaEl.getValue();
        console.log(value);
        outputEl.textContent = value;
      });
</script>
```

#### Setting a Value

```jsx
import { useState } from "react";
import { DdaInput } from "@dubai-design-system/components-react";

function App() {
  const [text, setText] = useState("");
  return (
    <>
      <div className="card">
        <DdaInput
          onInput={(event) => {
            console.log(event.currentTarget.getValue());
            setText(event.currentTarget.getValue());
          }}
          id="myInputId"
        />
        <p>{text}</p>

        <button
          onClick={() => {
            document.getElementById("myInputId").setValue("Sample Value");
            setText("Sample Value");
          }}
        >
          Set Sample Value
        </button>
      </div>
    </>
  );
}

export default App;

```


# Typography

Designers should prioritize clarity and readability by using a balanced type scale to create a clear visual hierarchy. Avoid relying on color for emphasis; instead, use type size and weight to guide u

## Typeface

To present a unified we recommend using the Dubai font for both the Arabic and English languages.

<table data-view="cards" data-full-width="false"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><h2>Dubai Font</h2></td><td><a href="https://dubaifont.ae/download">Get Font </a></td><td><a href="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FDn7EgKsuSii3qg0VnMUt%2FDubai.png?alt=media&amp;token=49a94749-65e5-4c81-8073-445b17fcce89">Dubai.png</a></td></tr><tr><td><em>The recommended typeface may be substituted with an alternative that better aligns with the reader's established brand identity, if deemed necessary. This adjustment should be made with careful consideration to maintain consistency with the intended tone and legibility standards outlined in these guidelines and the</em> <a href="https://www.w3.org/WAI/standards-guidelines/wcag/"><em>Web Content Accessibility Guidelines</em></a><em>.</em></td><td></td><td></td></tr></tbody></table>

## Type Scale Specification

**Type Scales** create a structured and effective visual hierarchy, guiding users through content with clarity and purpose. Each style serves a unique role in presenting information.

We recommend the Minor Third (1.2) type scale.

{% hint style="info" %}
Font should switch from Default to Large at >=1024px
{% endhint %}

{% tabs fullWidth="false" %}
{% tab title="Large" %}
**Large Desktop Typescale**

<table data-full-width="true"><thead><tr><th width="85">Variant</th><th width="155">Font Size</th><th width="98">Line Height</th><th width="112">Letter Spacing</th><th>Weight</th></tr></thead><tbody><tr><td>Display</td><td>76px (4.75rem)</td><td>64</td><td>-0.5%</td><td>Light, Regular, Medium &#x26; Bold</td></tr><tr><td>H1</td><td>54px (3.375rem)</td><td>56</td><td>-0.5%</td><td>Light, Regular, Medium &#x26; Bold</td></tr><tr><td>H2</td><td>45px (2.8125rem)</td><td>44</td><td>0%</td><td>Light, Regular, Medium &#x26; Bold</td></tr><tr><td>H3</td><td>37px (2.3125rem)</td><td>36</td><td>0%</td><td>Light, Regular, Medium &#x26; Bold</td></tr><tr><td>H4</td><td>32px (2rem)</td><td>32</td><td>0%</td><td>Light, Regular, Medium &#x26; Bold</td></tr><tr><td>H5</td><td>26px (1.625rem)</td><td>28</td><td>0%</td><td>Light, Regular, Medium &#x26; Bold</td></tr><tr><td>H6</td><td>22px (1.375rem)</td><td>28</td><td>0%</td><td>Light, Regular, Medium &#x26; Bold</td></tr><tr><td>Body</td><td>18px (1.125rem)</td><td>28</td><td>0%</td><td>Light, Regular, Medium &#x26; Bold</td></tr><tr><td>Caption</td><td>16px (1rem)</td><td>24</td><td>+1%</td><td>Light, Regular, Medium &#x26; Bold</td></tr><tr><td>Small</td><td>14px (0.875rem)</td><td>20</td><td>+2%</td><td>Light, Regular, Medium &#x26; Bold</td></tr></tbody></table>
{% endtab %}

{% tab title="Desktop " %}
&#x20;**Desktop Typescale**&#x20;

<table data-full-width="true"><thead><tr><th width="85">Variant</th><th width="155">Font Size</th><th width="98">Line Height</th><th width="112">Letter Spacing</th><th>Weight</th></tr></thead><tbody><tr><td>Display</td><td>68 px (3.556rem)</td><td>80</td><td>-1%</td><td>Light, Regular, Medium &#x26; Bold</td></tr><tr><td>H1</td><td>48 px (3rem)</td><td>56</td><td>-0.5%</td><td>Light, Regular, Medium &#x26; Bold</td></tr><tr><td>H2</td><td>40 px (2.5rem)</td><td>48</td><td>-0.5%</td><td>Light, Regular, Medium &#x26; Bold</td></tr><tr><td>H3</td><td>32 px (2.056rem)</td><td>40</td><td>0%</td><td>Light, Regular, Medium &#x26; Bold</td></tr><tr><td>H4</td><td>28 px (1.722rem)</td><td>32</td><td>0%</td><td>Light, Regular, Medium &#x26; Bold</td></tr><tr><td>H5</td><td>24 px (1.444 rem)</td><td>32</td><td>0%</td><td>Light, Regular, Medium &#x26; Bold</td></tr><tr><td>H6</td><td>20 px (1.222 rem)</td><td>28</td><td>0%</td><td>Light, Regular, Medium &#x26; Bold</td></tr><tr><td>Body</td><td>16 px (1 rem)</td><td>24</td><td>0%</td><td>Light, Regular, Medium &#x26; Bold</td></tr><tr><td>Caption</td><td>14 px (0.833 rem)</td><td>20</td><td>+1%</td><td>Light, Regular, Medium &#x26; Bold</td></tr><tr><td>Small</td><td>12 px (0.687 rem)</td><td>16</td><td>+2%</td><td>Light, Regular, Medium &#x26; Bold</td></tr></tbody></table>
{% endtab %}

{% tab title="Tablet" %}
**Tablet Typescale**

<table data-full-width="true"><thead><tr><th width="85">Variant</th><th width="155">Font Size</th><th width="98">Line Height</th><th width="112">Letter Spacing</th><th>Weight</th></tr></thead><tbody><tr><td>Display</td><td>60 px (3.75rem)</td><td>68</td><td>1%</td><td>Light, Regular, Medium &#x26; Bold</td></tr><tr><td>H1</td><td>44 px (2.75rem)</td><td>52</td><td>-0.5%</td><td>Light, Regular, Medium &#x26; Bold</td></tr><tr><td>H2</td><td>36 px (2.25rem)</td><td>44</td><td>-0.5%</td><td>Light, Regular, Medium &#x26; Bold</td></tr><tr><td>H3</td><td>30 px (1.875rem)</td><td>40</td><td>0%</td><td>Light, Regular, Medium &#x26; Bold</td></tr><tr><td>H4</td><td>26 px (1.625rem)</td><td>36</td><td>0%</td><td>Light, Regular, Medium &#x26; Bold</td></tr><tr><td>H5</td><td>22 px (1.375 rem)</td><td>32</td><td>0%</td><td>Light, Regular, Medium &#x26; Bold</td></tr><tr><td>H6</td><td>18 px (1.125 rem)</td><td>28</td><td>0%</td><td>Light, Regular, Medium &#x26; Bold</td></tr><tr><td>Body</td><td>16 px (1 rem)</td><td>24</td><td>0%</td><td>Light, Regular, Medium &#x26; Bold</td></tr><tr><td>Caption</td><td>14 px (0.875 rem)</td><td>20</td><td>+1%</td><td>Light, Regular, Medium &#x26; Bold</td></tr><tr><td>Small</td><td>12 px (0.75 rem)</td><td>16</td><td>+2%</td><td>Light, Regular, Medium &#x26; Bold</td></tr></tbody></table>
{% endtab %}

{% tab title="Mobile" %}
**Mobile Typescale**

<table data-full-width="true"><thead><tr><th width="85">Variant</th><th width="155">Font Size</th><th width="98">Line Height</th><th width="112">Letter Spacing</th><th>Weight</th></tr></thead><tbody><tr><td>Display</td><td>44 px (2.75rem)</td><td>52</td><td>-1%</td><td>Light, Regular, Medium &#x26; Bold</td></tr><tr><td>H1</td><td>36 px (2.25rem)</td><td>44</td><td>-0.5%</td><td>Light, Regular, Medium &#x26; Bold</td></tr><tr><td>H2</td><td>30 px (1.875rem)</td><td>40</td><td>0%</td><td>Light, Regular, Medium &#x26; Bold</td></tr><tr><td>H3</td><td>26 px (1.625rem)</td><td>36</td><td>0%</td><td>Light, Regular, Medium &#x26; Bold</td></tr><tr><td>H4</td><td>22 px (1.375rem)</td><td>32</td><td>0%</td><td>Light, Regular, Medium &#x26; Bold</td></tr><tr><td>H5</td><td>18 px (1.125rem)</td><td>28</td><td>0%</td><td>Light, Regular, Medium &#x26; Bold</td></tr><tr><td>H6</td><td>16 px (1rem)</td><td>24</td><td>0%</td><td>Light, Regular, Medium &#x26; Bold</td></tr><tr><td>Body</td><td>14 px (0.875rem)</td><td>20</td><td>0%</td><td>Light, Regular, Medium &#x26; Bold</td></tr><tr><td>Caption</td><td>14 px (0.875rem)</td><td>20</td><td>+1%</td><td>Light, Regular, Medium &#x26; Bold</td></tr><tr><td>Small</td><td>12 px (0.75rem)</td><td>16</td><td>+2%</td><td>Light, Regular, Medium &#x26; Bold</td></tr></tbody></table>
{% endtab %}
{% endtabs %}

***

## Class names used in DDS Components

| Default    | Light                    | Regular                      | Medium                     | Bold                   |
| ---------- | ------------------------ | ---------------------------- | -------------------------- | ---------------------- |
| `.display` | `.display.Light`         | `.display.Regular`           | `.display.Medium`          | `.display.Bold`        |
| `.h1`      | `h1.Light` , `.h1.Light` | `h1.Regular` , `.h1.Regular` | `h2.Medium` , `.h2.Medium` | `h2.Bold` , `.h2.Bold` |
| `.h2`      | `h2.Light` , `.h2.Light` | `h2.Regular` , `.h2.Regular` | `h2.Medium` , `.h2.Medium` | `h2.Bold` , `.h2.Bold` |
| `.h3`      | `h3.Light` , `.h3.Light` | `h3.Regular` , `.h3.Regular` | `h3.Medium` , `.h3.Medium` | `h3.Bold` , `.h3.Bold` |
| `.h4`      | `h4.Light` , `.h4.Light` | `h4.Regular` , `.h4.Regular` | `h4.Medium` , `.h4.Medium` | `h4.Bold` , `.h4.Bold` |
| `.h5`      | `h5.Light` , `.h5.Light` | `h5.Regular` , `.h5.Regular` | `h5.Medium` , `.h5.Medium` | `h5.Bold` , `.h5.Bold` |
| `.h6`      | `h6.Light` , `.h6.Light` | `h6.Regular` , `.h6.Regular` | `h6.Medium` , `.h6.Medium` | `h6.Bold` , `.h6.Bold` |
| `.bogy`    | `.body.Light`            | `.body.Regular`              | `.body.Medium`             | `.body.Bold`           |
| `.caption` | `.caption.Light`         | `.caption.Regular`           | `.caption.Medium`          | `.caption.Bold`        |
| `.small`   | `.small.Light`           | `.small.Regular`             | `.small.Medium`            | `.small.Bold`          |

## Typography variables

```css
:root {
  /* Font Weights */
  --font-weight-light
  --font-weight-regular
  --font-weight-medium
  --font-weight-bold

  /* Font Sizes */
  --font-display
  --font-h1
  --font-h2
  --font-h3
  --font-h4
  --font-h5
  --font-h6
  --font-body
  --font-caption
  --font-small
  
  --line-height-display
  --line-height-h1
  --line-height-h2
  --line-height-h3
  --line-height-h4
  --line-height-h5
  --line-height-h6
  --line-height-body
  --line-height-caption
  --line-height-small
}


```

## **Typography Token System Figma Setup Guide**&#x20;

1\. Download and Install a New Font or Select from System Fonts.

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2Fbgbs4SbblCKnev44sKer%2FTypography1.png?alt=media&amp;token=e3bdf728-a729-4731-8b19-a941481bb38c" alt=""><figcaption></figcaption></figure>

2\. Go to Local Variables and select the tokens you want to modify.

3\. Click the chevron to expand the list of collections in Local Variables.

4\. From the expanded list, select the “Typeface” collection.

5\. Modify the font name in the token system for Arabic and English. You can select a different font for each language if desired. Verify that the font names are correct by checking them against the system font list.

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FOFYTiF8Ao9hz6MQS1peI%2FTypography2.png?alt=media&amp;token=a2ff1b11-699c-4141-86c9-9030dd5a703f" alt=""><figcaption></figcaption></figure>

***

## Best Practices

### **Hierarchy**&#x20;

Designers should emphasize clarity and readability by using a balanced type scale to establish a clear visual hierarchy. Instead of relying on color for emphasis, type size and weight should guide users through the content.

Use distinct headline levels (e.g., H1, H2, H3) with progressively smaller sizes as levels deepen. Consistent spacing between text elements reinforces this hierarchy; for example, ensure that headline-to-body spacing is larger than body-to-caption spacing. For optimal readability, apply bold weights to titles and headlines, while keeping body text and labels lighter for balanced visuals.

Ensure that headings follow a proper hierarchical order: **H1** first, then **H2**, followed by **H3**, etc. This structure enhances accessibility by assisting screen readers and search engines in understanding the content layout, making navigation logical and efficient. Refer to [WCAG ](https://www.w3.org/WAI/tutorials/page-structure/headings/)recommendation.&#x20;

### **Readability**

For optimal readability and visual consistency, avoid altering line height to maintain proper vertical spacing and alignment. Limit line length to 80 characters or fewer, enhancing readability while allowing for occasional exceptions. Use left alignment or centering as standard practice, reserving right alignment for Arabic text. Adjust font weights strategically to create emphasis and establish a clear content hierarchy. Ensure letter spacing remains consistent across products, with body text  spacing and minor increases applied to larger headlines to improve clarity without overcrowding. Refer to [WCAG](https://www.w3.org/WAI/WCAG21/Understanding/visual-presentation.html).&#x20;

### Contrast&#x20;

**Contrast Ratios**: Text should have a minimum contrast ratio of 4.5:1 against its background for regular text and 3:1 for large text (over 24px or bold text above 19px).

**Accessible Color Choices**: Ensure text on colored backgrounds meets appropriate contrast ratios, verified through a contrast checker.

**Interactive Elements**: Buttons, links, and other interactive elements should meet contrast standards and provide visual feedback on focus and hover states.

The W3C's Web Content Accessibility Guidelines (WCAG) 2.1 include Success Criterion 1.4.12, which focuses on text spacing to enhance readability for users with visual or cognitive disabilities. This criterion ensures that content remains functional and readable when users adjust text spacing. The key requirements are:

* **Line Height (Line Spacing):** At least 1.5 times the font size.
* **Spacing After Paragraphs:** At least 2 times the font size.
* **Letter Spacing (Tracking):** At least 0.12 times the font size.
* **Word Spacing:** At least 0.16 times the font size.

Authors are not required to set these exact spacings but must ensure that their content can adapt to these settings without loss of content or functionality. This adaptability allows users to modify text spacing according to their needs, improving their reading experience.

### **Tools to Check Contrast**

1. **WCAG Checker:** [Contrast](https://webaim.org/resources/contrastchecker/)
2. **Figma Plugin:** [Contrast](https://www.figma.com/community/plugin/748533339900865323)

***

## **Key Principles**

#### **Typography System Design**

To ensure a cohesive, readable, and accessible typographic experience, the following foundational choices were made:

<table><thead><tr><th width="138">Aspect </th><th width="243">Decision </th><th>Reason</th></tr></thead><tbody><tr><td><strong>Scale</strong> </td><td>Minor Third (~1.2×)</td><td>Provides balanced font size increments—more refined than linear scales, less abrupt than the Golden Ratio.</td></tr><tr><td><strong>Grid</strong> </td><td>4px Baseline</td><td>Ensures consistent vertical rhythm and pixel-perfect alignment.</td></tr><tr><td><strong>Large Screens</strong></td><td>Larger Headings</td><td>Reinforces visual hierarchy and improves scannability on spacious layouts.</td></tr><tr><td><strong>Letter Spacing</strong> </td><td>Tight for large, loose for small</td><td>Enhances readability and maintains visual balance at different text sizes.</td></tr></tbody></table>

**Relative Units**

Typography is built using relative units like `rem` and `em` instead of fixed `px` values. This ensures seamless scalability and adaptability across devices.

**4px Baseline Grid**

All **line-heights** are set as **multiples of 4px**, reinforcing a consistent **vertical rhythm**, predictable spacing, and clean alignment across all text elements.

This approach simplifies layout scaling and enhances visual harmony across breakpoints.

**Example:**

<div align="left"><figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FBtqxhOcGrCfXVTqXuFzf%2Fimage.png?alt=media&amp;token=93fc5032-f6d6-4165-918a-72110189fd65" alt="" width="375"><figcaption></figcaption></figure></div>

This image demonstrates how our **typographic scale** and **4px baseline grid** system work together to ensure clarity, hierarchy, and alignment:

**Display Text**:\
Font size = `68px` \
Aligned to the baseline grid for strong visual impact and hierarchy.

**H6**:\
Font size = `24px`\
A moderate header, scaled using the Minor Third ratio for structured progression.

**Body Text**:\
Font size = `16px`\
Designed for optimal readability, especially on smaller screens, while maintaining alignment to the 4px baseline.

Each text style is vertically spaced to land cleanly on the grid, avoiding fractional line-heights or irregular spacing. This ensures **visual harmony**, **predictable layouts**, and **accessible reading flow** across all devices.

**Minor Third Scale (1.2× Ratio)**

We use a **Minor Third scale** (approximately a **1.2× multiplier**) to define the progression between font sizes. This scale provides a **balanced typographic rhythm**—more nuanced than a Golden Ratio jump, yet more structured than linear scaling.

All sizes are **rounded to whole pixels** to ensure crisp rendering and maintain visual consistency across devices and display resolutions.

**Mobile Scaling**\
On smaller screens:

Headings and display fonts are proportionally scaled down while maintaining their visual hierarchy.

Body text is never reduced below **14px**, even for secondary content, to preserve legibility.

***

## **Responsive Font Scaling by Breakpoint**

To ensure optimal readability across all devices, our system dynamically adjusts the **base font size** based on screen width breakpoints. This method enhances legibility while preserving a consistent typographic scale using relative units (`rem`).

| **Breakpoint** | **Width Range** | **Base Font Size** | **Rem Base** |
| -------------- | --------------- | ------------------ | ------------ |
| Mobile         | ≤ 767px         | 14px               | 1rem = 14px  |
| Tablet         | 768px – 1023px  | 16px               | 1rem = 16px  |
| Desktop        | 1024px – 1439px | 16px               | 1rem = 16px  |
| Large Desktop  | ≥ 1440px        | 18px               | 1rem = 18px  |

**Example Use Case**

A heading defined as `2rem` will appear as:

**28px on Mobile** (`2rem × 14px`)

**32px on Tablet/Desktop** (`2rem × 16px`)

**36px on Large Desktop** (`2rem × 18px`)

By tying typography to `rem` units and adjusting the root size per breakpoint, we maintain a **fluid and accessible type scale** that responds to both layout needs and user readability.


# Colors

## Color System

We have chosen to utlize the Material Design 3 Color system. You may read more [here](https://m3.material.io/styles/color/system/how-the-system-works).

## Base Tonal Palette

The below is an example of the base tonal palette generated with the DDA blue primary color as the seed color. A seed color is the color provided to the material color generator on which it bases the palette on.&#x20;

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FKHRPuG46jDgYa0SL3zMX%2FTonalThemes.png?alt=media&amp;token=cce138fc-8e40-4c89-9ab6-37289f0302b3" alt=""><figcaption></figcaption></figure>

***

## **Color Token System Figma Setup Guide**

### Generate Color Palettes&#x20;

**1.** Go to the Playground page by choosing Pages from the left panel.

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FMclUvMnASba12v2s8uV6%2F1.png?alt=media&amp;token=09bf5ea1-51bc-4e7e-8b49-5cbe3a5e628a" alt="" width="375"><figcaption></figcaption></figure>

2\. Open the DDS Color Palette Generator plugin.

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FM689UKH3gu0OQAspwcQg%2F2.png?alt=media&amp;token=7558e692-3659-432a-a2df-7b5f311b1ab4" alt="" width="375"><figcaption></figcaption></figure>

3\. Choose a Primary & Secondary Color using the color picker (Secondary is optional).

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FE1R3iFhhK9nKsjsfQYV7%2F3.png?alt=media&amp;token=f967435f-3d41-4228-9c79-2bdf7a47416e" alt="" width="375"><figcaption></figcaption></figure>

4\. Click Generate to create the color palette.

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FwXzV0hUXy9r3IzkOE1RG%2F4.png?alt=media&amp;token=233ef27d-86c7-49c6-95d7-c4e1a41ea79f" alt="" width="563"><figcaption></figcaption></figure>

### Assign Colors to Local Variables&#x20;

**1.** Open the Local Variables panel by clicking the Local Variables button from the right panel.

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FpbXrMo7FiSOb8HwwjpV1%2F5.png?alt=media&amp;token=9237d9c8-82b7-4a55-a74c-4e2377b3e0f6" alt="" width="563"><figcaption></figcaption></figure>

2\. Select the Color\_Palette collection from the Local Variables panel.

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FOmXDeinU0D36pRd7e5sQ%2F6.png?alt=media&amp;token=38782caa-439b-486a-addb-39c81a559fcb" alt="" width="563"><figcaption></figcaption></figure>

3\. Assign colors to tokens:

Primary Tokens → Fill Primary0 to Primary100 using colors from the generated palette.

Neutral-Variant Tokens → Fill Neutral-Variant0 to Neutral-Variant100 using shades from the generated palette.&#x20;

If you have a Secondary Color: ( Secondary Tokens → Fill Secondary0 to Secondary100 using colors from the generated palette.)

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FsmDgwDdq3bSwHIy6t7AK%2F7.png?alt=media&amp;token=2e150a74-3a33-4405-8276-d0a7a7ddc49d" alt="" width="563"><figcaption></figcaption></figure>

4\. Keep all other token groups (Secondary, Neutral, Error, Warning, Info, and Success) as they are.

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FmcvoAanCkUM0ihVQbA0e%2F8.png?alt=media&amp;token=f5e8db63-620b-4c85-a647-6ff34b7a10ef" alt="" width="375"><figcaption></figcaption></figure>

You have successfully synced the token system! Now, your UI Kit is ready to use for your entity.

***

## **Key Colors**

Key colors are the core colors selected from the tonal palette that serve as the foundational hues for an interface.&#x20;

{% hint style="info" %}
**IMPORTANT NOTE**\
Primary and Secondary colors should follow the entity’s color guidelines to ensure a cohesive and recognizable brand identity across the design.
{% endhint %}

## Primary Colors:

The main colors are prominently used for key elements like icons, headers, and primary action buttons, representing the core of the brand and its identity. This primary color signifies core interactions, appearing on primary buttons for actions like "Submit" or "Next," encouraging user focus and reinforcing brand presence. Variants of this color are applied to hover, focus, and pressed states to enhance interactive feedback and maintain consistency across the interface.

### Primary Light

<table data-card-size="large" data-view="cards" data-full-width="false"><thead><tr><th></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>Primary</strong></td><td><a href="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2F6qvVxJEQiqbDA3vHfDpT%2FPrimary-Light.png?alt=media&amp;token=a59a5112-1d68-42e8-b454-f7a28fd9850e">Primary-Light.png</a></td></tr><tr><td><strong>Primary Variant</strong> </td><td><a href="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FdwTtcHCyNfJIkYwZI2c9%2FPrimary-Variant-Light.png?alt=media&amp;token=1a8145da-2caf-4124-a74c-7283867a3ea7">Primary-Variant-Light.png</a></td></tr><tr><td><strong>On-Primary</strong> </td><td><a href="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FNMjJlNXpXwb7oQtwbZU4%2FOn-Primary-Light.png?alt=media&amp;token=907ac43a-f8f6-4dfb-8ad3-9997b404110e">On-Primary-Light.png</a></td></tr><tr><td><strong>On-Primary Variant</strong></td><td><a href="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FAGomVkrYDJQBt62SSRoO%2FPrimary-Variant-Dark-1.png?alt=media&amp;token=d92f2611-eed5-489d-ad98-f92ae97479c3">Primary-Variant-Dark-1.png</a></td></tr></tbody></table>

### Primary  Dark

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>Primary</strong>  </td><td><a href="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FNRIEzBkzbJbFvyiRqQhG%2FPrimary-Dark.png?alt=media&amp;token=1b7b068a-f7cc-4a82-9b3e-04eea21a5c2a">Primary-Dark.png</a></td></tr><tr><td><strong>On-Primary</strong> </td><td><a href="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2F8K5EC00hHztQxP6vJqS9%2FOn-Primary-Dark.png?alt=media&amp;token=f98e1928-0da4-4c94-b214-07088efede46">On-Primary-Dark.png</a></td></tr><tr><td><strong>Primary Variant</strong></td><td><a href="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2Fgvo2OsDy2jQ7QhxBna5h%2FPrimary-Variant-Dark.png?alt=media&amp;token=27a831b8-6f51-4d09-b0c9-fbe8b687d674">Primary-Variant-Dark.png</a></td></tr><tr><td><strong>On-Primary Variant</strong></td><td><a href="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FWIsWxjKO3FUBOv9F7kFI%2FOn-Primary-Variant-Dark.png?alt=media&amp;token=10216e87-7660-48ea-ad8a-8960ef442002">On-Primary-Variant-Dark.png</a></td></tr></tbody></table>

***

## Secondary Colors

The complementary color in the primary palette adds flexibility and depth, enhancing visual interest without overshadowing the primary brand elements. It is used for secondary buttons, like "Back" or "Learn More," and serves as an accent for highlights within content. This color also appears in navigation elements, such as tabs, icons, and links, to guide users through supplementary interactions. Supporting the primary colors, the secondary palette offers contrast for backgrounds, secondary buttons, and icons, adding layered sophistication to the interface.

### Secondary Light

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>Secondary</strong></td><td><a href="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FSWnWPeKAQdXWHj7JjbKf%2FSecondary-Light.png?alt=media&amp;token=38e59289-77e4-43bf-9116-f7baa2bfa8c1">Secondary-Light.png</a></td></tr><tr><td><strong>Secondary Variant</strong> </td><td><a href="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FvnwAkNsjn6FGeRxLWkQx%2FSecondary-Variant-Light.png?alt=media&amp;token=e4b3fe2b-6a4e-4e1a-8eb0-0c0365e6f532">Secondary-Variant-Light.png</a></td></tr><tr><td><strong>On-Secondary</strong> </td><td><a href="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FVq1ocm4vq0hliI8CGxyI%2FOn-Secondary-Light.png?alt=media&amp;token=5c2fe831-188b-4085-9f34-7e241b052ff5">On-Secondary-Light.png</a></td></tr><tr><td><strong>On-Secondary Variant</strong></td><td><a href="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FjmRTufY33OiT27ynwVyO%2FOn-Secondary-Variant-Light.png?alt=media&amp;token=333c5b27-59b2-4a81-b428-72121e8fd452">On-Secondary-Variant-Light.png</a></td></tr></tbody></table>

### Secondary Dark&#x20;

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>Secondary</strong></td><td><a href="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FSDVt3vAzYTUcS8km0jj3%2FSecondary-Dark.png?alt=media&amp;token=c9c5c1d7-3a28-4dd7-a9a6-2eeb5b386a8a">Secondary-Dark.png</a></td></tr><tr><td><strong>On-Secondary</strong></td><td><a href="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FZhnxWv7jaxC2lcCLce97%2FOn-Secondary-Dark.png?alt=media&amp;token=7d23e135-aa7e-452a-8102-7c05a77d9199">On-Secondary-Dark.png</a></td></tr><tr><td><strong>Secondary Variant</strong></td><td><a href="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FAgcYnR3YGhyec600iJP6%2FSecondary-Variant-Dark.png?alt=media&amp;token=72ceef6c-4412-4c84-af35-37ddf4dd3b4c">Secondary-Variant-Dark.png</a></td></tr><tr><td><strong>On-Secondary Variant</strong></td><td><a href="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2F5qHa24FBp6L12cExKGl3%2FOn-Secondary-Variant-Dark.png?alt=media&amp;token=9ccd5f33-8711-414d-b1b1-ee03e219065d">On-Secondary-Variant-Dark.png</a></td></tr></tbody></table>

***

## Color Schemes:&#x20;

### **Info**

This color provides informational messages or highlights additional details. It is used for info messages, including notification backgrounds and icons with helpful or instructional content. Tooltips and help text also use this color to distinguish them from primary or secondary content, as well as for non-critical icons or informational links.

### **Error**

This color signals errors or critical issues that require user attention. It is used for error messages, including backgrounds or text in error notifications, tooltips, and alert boxes. It indicates invalid input fields with borders or icons and is applied to critical buttons for actions that may result in data loss or deletion, such as “Delete Account”.

### **Warning**

This color cautions users about non-critical issues or potential risks. It is used for warning messages, alert backgrounds, and icons. Form warnings use this color to indicate fields requiring attention but are not strictly errors, and it appears in notification badges for cautionary but non-critical alerts.

### **Success**

This color represents positive actions and feedback, used in backgrounds for success messages, like "Action completed successfully." It also highlights valid input in form validation and serves as a status indicator, marking completion statuses or achievement badges.

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>Info Variants</strong></td><td><a href="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FPXQGktQUl6DlTSPUqE64%2FInfo-Light.png?alt=media&amp;token=c25d0b80-564e-4830-b3cd-89de34d79a5b">Info-Light.png</a></td></tr><tr><td><strong>Error Variants</strong></td><td><a href="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FgRXc02W7NEkD7dYfvH3A%2FError-Light.png?alt=media&amp;token=a43e3134-3880-4b94-8ed4-1cdd05de5346">Error-Light.png</a></td></tr><tr><td><strong>Warning Variants</strong></td><td><a href="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2F4jIWV7TjfIEw77PIhTdN%2FWarning-Light.png?alt=media&amp;token=0b20492a-415d-4f2b-a792-ed2adf531121">Warning-Light.png</a></td></tr><tr><td><strong>Success Variants</strong></td><td><a href="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FAfqb7tm5lO8Od0t08Ckl%2FSuccess-Light.png?alt=media&amp;token=b847205f-97f2-48f3-8e8c-d6d9fc60882f">Success-Light.png</a></td></tr></tbody></table>

***

## Surface Colors

The surface colors in the palette establish a balanced foundation, providing structure and depth without competing with the primary brand elements. These colors are used for background layers, defining areas such as cards, modals, and section dividers to create a cohesive and organized interface. They subtly support primary and secondary colors by ensuring interactive elements and key content stand out clearly. Applied across different layers, surface colors enhance readability and separation, adding a refined visual hierarchy that contributes to a polished and sophisticated design experience.

### Surfaces Light&#x20;

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>Surface</strong></td><td><a href="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2Fj3GbfjxsXVU4TAWiN12l%2FSurface%20-%20Light.png?alt=media&amp;token=cee187ec-869f-4880-9727-be555e4b483b">Surface - Light.png</a></td></tr><tr><td><strong>Surface Variant</strong> </td><td><a href="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2Fgfft2xjzMq4QNApsDvAO%2FSurface-Variant%20-%20Light.png?alt=media&amp;token=15eba846-2a16-4041-8bb2-24957b199752">Surface-Variant - Light.png</a></td></tr><tr><td><strong>On Surface</strong> </td><td><a href="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FVXFREIjJtO83dyxdHpjW%2FOn-Surface%20-%20Light.png?alt=media&amp;token=8dbafabf-f646-4c34-9d4b-c1490a8b82ac">On-Surface - Light.png</a></td></tr><tr><td><strong>On Surface Variant</strong></td><td><a href="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FmAmZA7AeyWvDel38j3JR%2FOn-Surface-Variant%20-%20Light.png?alt=media&amp;token=3931129b-6fef-467d-830a-a2743b58ac14">On-Surface-Variant - Light.png</a></td></tr></tbody></table>

### Surfaces Dark

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>Surface</strong></td><td><a href="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FLHNVfcZTXUjAqwqzHHXv%2FSurface%20-%20Dark.png?alt=media&amp;token=7ce79e73-bd3b-40cf-ab3a-46dbc6161815">Surface - Dark.png</a></td></tr><tr><td><strong>Surface Variant</strong> </td><td><a href="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FfheajFUwuY3227PuTP1L%2FSurface-Variant%20-%20Dark.png?alt=media&amp;token=56dd0a77-0fe1-4fbe-a28b-ec2564b759b4">Surface-Variant - Dark.png</a></td></tr><tr><td><strong>On Surface</strong> </td><td><a href="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FVXFREIjJtO83dyxdHpjW%2FOn-Surface%20-%20Light.png?alt=media&amp;token=8dbafabf-f646-4c34-9d4b-c1490a8b82ac">On-Surface - Light.png</a></td></tr><tr><td><strong>On Surface Variant</strong></td><td><a href="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FNkIrnEFTpvZ8SviKmhjO%2FOn-Surface-Variant%20-%20Dark.png?alt=media&amp;token=d4599ac9-8fda-46fd-a5aa-c9e15ee47b1b">On-Surface-Variant - Dark.png</a></td></tr></tbody></table>

***

## Disabled Colors

The disabled colors in the palette provide subtlety and restraint, ensuring that inactive elements remain visible without drawing attention away from active content. These colors are used for elements like disabled buttons, text fields, and icons, signaling non-interactivity in a clear yet understated manner. By blending seamlessly with primary and secondary colors, disabled tones maintain a consistent visual language while gently fading into the background. Applied across various components, disabled colors enhance usability by distinguishing interactive from non-interactive elements, contributing to a cohesive and refined interface that respects user focus and intention.

### Disabled Light

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>Disabled</strong></td><td><a href="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FTvym4YzZaO8cWztxPbsF%2FDisabled%20-%20Light.png?alt=media&amp;token=dd46ed71-cfee-4a33-9846-ea40aa95717e">Disabled - Light.png</a></td></tr><tr><td><strong>On-Disabled</strong></td><td><a href="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2F5sTMGI16E7ikTCt8epa1%2FOn-Disabled%20-%20Light.png?alt=media&amp;token=22081ebc-f837-49f9-88cf-f190eebf6469">On-Disabled - Light.png</a></td></tr></tbody></table>

### Disabled Dark

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>Disabled</strong></td><td><a href="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2F3VAAEumgzmJx3BlHL2AE%2FDisabeled%20-%20Dark.png?alt=media&amp;token=c10039c3-7a5a-4dc3-9032-9a773c3e8e15">Disabeled - Dark.png</a></td></tr><tr><td><strong>On-Disabled</strong></td><td><a href="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FSyIxYX5HOQhkev5Xhn1t%2FOn-Disabeled%20-%20Dark.png?alt=media&amp;token=a6a9b419-55eb-4558-b000-4cc7b775dffe">On-Disabeled - Dark.png</a></td></tr></tbody></table>

***

## **Accessibility**

### **Contrast in Material**

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FDteDQYvm0FTLZxhPPeiU%2FContrast%20In%20Material.png?alt=media&amp;token=46cdc25e-c5de-4532-a0a9-3a42f898dadd" alt=""><figcaption></figcaption></figure>

Material’s color system provides standard tone values and measurements that can be used to meet accessible contrast ratios.

Material’s tonal system corresponds to Web color contrast standards as follows:

1. Colors that are at least 40 steps apart in tonal value achieve a contrast ratio of at least **3:1**
2. Colors that are at least 50 steps apart in tonal value achieve a contrast ratio of at least **4.5:1**
3. Colors that are at least 70 steps apart in tonal value achieve a contrast ratio of at least **7:1**

To ensure accessibility across tonal palettes, follow specific contrast guidelines to maintain readability and usability.

#### **Primary and Secondary Colors**:

1. **40-step difference**: Use this for elements needing a 3:1 contrast ratio, such as large text and secondary UI elements.
2. **50-step difference**: Use this for essential text and interactive elements that need a 4.5:1 contrast ratio.
3. **70-step difference**: Reserve this for small or critical text that requires a 7:1 contrast ratio.

#### **Error, Warning, Success, and Info Colors**:

1. **50-step difference**: Ensure readability for general alerts and feedback.
2. **70-step difference**: Use for high-priority messages that need higher visibility.

#### **Neutral and Neutral-Variant Colors**:

1. **50-step difference**: Necessary for readable text with a 4.5:1 contrast ratio.
2. **40-step difference**: Suitable for subtle separations, such as backgrounds and dividers, with a 3:1 contrast ratio.
3. **70-step difference**: Use for focus indicators and interactive elements where high contrast is required.

By following these tonal palette guidelines, you create a cohesive and accessible visual experience across UI components and interaction states.


# Icons & Visuals

## **Icon Style**

Consistency is key; use a unified style (e.g., line, filled, flat, or outlined) to ensure visual harmony. Keep icons minimalistic with clean lines for easy recognition and scalability. Icons should be vector-based (SVG format) to maintain clarity at various sizes. Match the icon style to the brand’s tone (e.g., modern for tech brands, classic for traditional sectors). Entities have the option to use their own custom icons or to choose Material Icons, which we recommend as a standard option.

## **Icon Sizes**

Define standard sizes for specific use cases. **Small:** 16x16px, ideal for dense UI elements like toolbars or status indicators. **Medium:** 24x24px, suitable for navigation icons or primary action buttons. **Large:** 32x32px, best for prominent areas, such as section headers or feature icons. Use increments that maintain balance and proportion, ensuring readability and clarity at each size.

## **Color and Tone**

Use primary or secondary brand colors consistently in icons, reserving additional colors for emphasis or interactive states (e.g., hover, active). Ensure contrast for visibility, especially for overlays on different backgrounds, and meet WCAG color contrast guidelines. Assign distinct colors for icons representing specific categories (e.g., health, transportation) to aid quick recognition.

## **Spacing and Placement**

Maintain equal padding around each icon to ensure visual balance. Icons should align consistently within the grid or layout, respecting margins and other visual elements. Group related icons to indicate relationships, with consistent spacing to improve readability.

## **Icon Usage**

Use icons that intuitively convey their function or category (e.g., a heart for health, a bus for transportation). Use icons selectively to avoid visual clutter, reserving them for interactive elements, navigation, or key content indicators. Accompany icons with labels where necessary, especially when the icon alone may not be universally understood.

## **Visuals for Illustrations and Enhancements**

Use purpose-driven illustrations that directly enhance content, like simple illustrations for explanatory text, or visuals that align with the subject matter (e.g., scenic illustrations for tourism). Consider overlay icons to provide additional context (e.g., a pin overlay on a map icon for location-based services). Visuals should reflect the brand’s tone, whether dynamic, professional, or friendly.

## **Accessibility Considerations**

To ensure accessibility, icons should include alt text if they convey essential information, while purely decorative icons should be marked to be ignored by screen readers. Icons must meet a minimum contrast ratio of 3:1 and should not rely on color alone for meaning, supporting users with low vision or color blindness. Consistent icon usage reduces cognitive load, making it easier for users to recognize functions at a glance. For complex icons, adding text labels or accessible names helps clarify their purpose, especially for screen reader users.

Icons should be responsive, scaling smoothly for readability up to 200% and adapting across devices. These best practices ensure icons are clear, usable, and accessible for everyone.

### **References**&#x20;

1. [WCAG 1.1.1 Non-text Content](https://www.w3.org/WAI/WCAG21/quickref/#non-text-content)
2. [WCAG 1.4.11 Non-text Contrast](https://www.w3.org/WAI/WCAG21/quickref/#non-text-contrast)
3. [WCAG 1.4.1 Use of Color](https://www.w3.org/WAI/WCAG21/quickref/#use-of-color)
4. [WCAG 1.4.4 Resize Text](https://www.w3.org/WAI/WCAG21/quickref/#resize-text)
5. [WCAG 1.4.10 Reflow](https://www.w3.org/WAI/WCAG21/quickref/#reflow)


# Images

## **Image Resolution and Quality**&#x20;

Ensure high-resolution images with 72 DPI for web. Use PNG, JPEG, or SVG formats. Optimize images for web to reduce load time without quality loss. Images must be sharp, well-lit, and free from pixelation.

## **Image Dimensions and Aspect Ratios**

Use standard sizes with a 3:2 aspect ratio for banners, featuring scenic or context-specific imagery. Maintain consistent aspect ratios to avoid distortion. Provide multiple sizes for different devices to ensure optimized display across various screen sizes.

<div><figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2Fn004lSBkBlZDK0iFNc8u%2FStyle%3DFull%20Size%2C%20Size%3DL.png?alt=media&amp;token=d0af8ead-fc53-477f-8caf-a8616ee7d6ce" alt=""><figcaption></figcaption></figure> <figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FBqX26gx3S4EfhRAsXiVd%2FStyle%3DFull%20Size%2C%20Size%3DXL.png?alt=media&amp;token=5145e262-5634-4f3e-83eb-f5ed662b2ad9" alt=""><figcaption></figcaption></figure> <figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FK9RlBMJIr96CE4DyEC5c%2FStyle%3DFull%20Size%2C%20Size%3DXS.png?alt=media&amp;token=3ad14369-9022-457d-96ce-2badcf9ddf17" alt="" width="563"><figcaption></figcaption></figure></div>

## **Style and Composition**

Follow a style aligned with the brand identity, whether minimalistic, vibrant, or otherwise, to ensure consistency. Each image should have a clear focal point, with clean backgrounds, especially for icons and standalone objects. Maintain neutral lighting and consistent color tones across all images.

## **Color and Tonal Adjustments**

Adhere to the brand's color scheme, adjusting saturation and brightness as needed to maintain color consistency. Include tonal variations, such as light, medium, and dark tones, where relevant. Ensure color contrast meets accessibility standards, especially for overlays, to support readability.

## **Usage and Placement**

Select context-specific images that align with the content's purpose and reflect the entity's mission, such as landscapes for tourism or tech hubs for business. Position overlay text and icons on less busy sections of the image to enhance readability and ensure legibility.

## **Entity-Specific Selection**

Entities should choose images that align with their purpose or mission, reinforcing the brand’s relevance and message.

### **1. Tourism**

Use vibrant images of Dubai landmarks, such as the Burj Khalifa, Palm Jumeirah, or Dubai Frame, to highlight Dubai's unique attractions and appeal to tourists.

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FAwf1nOI3Et3ejuns9xjy%2FHero%20Gradient.png?alt=media&amp;token=38312baa-efff-4128-bf85-709b8fce970c" alt=""><figcaption></figcaption></figure>

### **2. Transportation**

Focus on images of Dubai’s infrastructure, like Sheikh Zayed Road, metro stations, or buses, to convey efficient transport options and promote public transportation.

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FzjhTrSE7H36nZMOeB1ei%2FBG-1.png?alt=media&amp;token=1cd3f951-a20a-4b6b-9b80-9ce9ca3d6982" alt=""><figcaption></figcaption></figure>

### **3. Health**

Use images of health facilities, medical staff, and community wellness, such as hospitals, clinics, or preventative health services, to emphasize Dubai’s healthcare standards.

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FRfWZhCmO3PYBAuIV9tCp%2FBG.png?alt=media&amp;token=02987e36-aee9-4fde-891f-27548295e0f0" alt=""><figcaption></figcaption></figure>

## **Copyright and Usage Rights**

Ensure all images are legally sourced, whether through licensed stock or original photography. Include attribution where required to acknowledge image sources. Avoid using copyrighted images without permission, opting for generic representations if necessary to stay within legal guidelines.

***

## Accessibility

### **Provide Text Alternatives for Images**

Add descriptive alt text to each image, conveying content and purpose for non-sighted users. For complex visuals like infographics, add a detailed description or link to one on the page. Decorative images without informational value should use an empty alt attribute (`alt=""`) so screen readers skip them.

<table><thead><tr><th width="223">Examples</th><th>Good Text </th><th>Bad Alt Text</th><th data-hidden></th></tr></thead><tbody><tr><td><p><strong>Product Image:</strong></p><p></p><p></p><p><strong>Image Description</strong>: A photo of a red running shoe with white soles.</p></td><td><p><strong>Good Alt Text</strong>: "Red running shoe with white soles."</p><p></p><p><strong>Why</strong>: Descriptive enough to inform the user about the product, including key details.</p></td><td><p><strong>Bad Alt Text</strong>: "Shoe" or "Image of a product."</p><p></p><p><strong>Why</strong>: Too vague; does not provide enough detail for users to understand what the product is.</p></td><td></td></tr><tr><td><p><strong>Button Icon:</strong></p><p></p><p><strong>Image Description</strong>: A magnifying glass icon that opens a search field.</p></td><td><p><strong>Good Alt Text</strong>: "Search"</p><p></p><p><strong>Why</strong>: It conveys the function of the icon (initiating a search) rather than describing the image itself.</p></td><td><p><strong>Bad Alt Text</strong>: "Magnifying glass icon"</p><p></p><p><strong>Why</strong>: This does not describe the action or purpose, making it harder for users to know what it does.</p></td><td></td></tr><tr><td><p><strong>Decorative Image:</strong></p><p></p><p><strong>Image Description</strong>: A decorative flourish or pattern used to separate sections of a webpage.</p></td><td><p><strong>Good Alt Text</strong>: <code>alt=""</code> (empty alt attribute)</p><p></p><p><strong>Why</strong>: Since the image is decorative, it does not add meaningful content, so screen readers should skip it.</p></td><td><p><strong>Bad Alt Text</strong>: "Decorative line to separate sections."</p><p></p><p><strong>Why</strong>: This is unnecessary information, adding clutter for screen reader users.</p></td><td></td></tr></tbody></table>

### **Accessible Names for Functional Images**

For icons or images functioning as interactive elements, the alt text should describe their action or function. For instance, an icon for submission should use alt text like "Submit" instead of a visual description like "Arrow icon."

### **Provide Context for Images**

Avoid using images as the only means to convey essential information; add text-based explanations as support to assist visually impaired users.

### **Responsive and Resizable Images**

Ensure images scale appropriately across devices without losing quality. They should not become pixelated or distorted when zoomed or resized.

### **Contrast and Legibility**

For images with text, maintain sufficient contrast between text and background, meeting minimum accessibility standards, such as a 4.5:1 contrast ratio.

### **Use of Captions and Text Descriptions**

Provide captions for images when they offer information that complements the main text. For complex visuals, such as charts, include links to detailed text descriptions for further accessibility.

### **Use of ARIA Labels for Enhanced Accessibility**

When using interactive or dynamic images, employ ARIA attributes like `aria-labelledby` and `aria-describedby` to associate images with labels or descriptions, enhancing context for screen reader users.

### **References**

1. [WCAG 1.1.1 Non-text Content](https://www.w3.org/WAI/WCAG21/quickref/#non-text-content)
2. [WCAG 2.1.1 Keyboard Accessible](https://www.w3.org/WAI/WCAG21/quickref/#keyboard)
3. [WCAG 1.3.3 Sensory Characteristics](https://www.w3.org/WAI/WCAG21/quickref/#sensory-characteristics)
4. [WCAG 1.4.4 Resize Text](https://www.w3.org/WAI/WCAG21/quickref/#resize-text)
5. [WCAG 1.4.3 Contrast](https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum)
6. [WCAG 1.2 Time-Based Media](https://www.w3.org/WAI/WCAG21/quickref/#time-based-media)
7. [WCAG 4.1.2 Name, Role, Value](https://www.w3.org/WAI/WCAG21/quickref/#name-role-value)


# Layout & Breakpoints

## **Breakpoints for Design**

Breakpoints are predefined screen widths that dictate how a responsive layout adapts to different devices. At each breakpoint, CSS rules change to optimize the design for that specific screen size, ensuring a seamless and user-friendly experience across desktops, tablets, and mobile devices. We have selected the following five breakpoints based on the most common screen resolutions. It's recommended to use these established breakpoints to maintain consistency across applications. However, if your project requires different breakpoints, feel free to adjust them as necessary, ensuring that all modifications comply with the Web Content Accessibility Guidelines (WCAG).

<table data-full-width="false"><thead><tr><th>Size </th><th>Breakpoint Threshold</th><th>Breakpoint Range</th></tr></thead><tbody><tr><td>Small (sm)</td><td>640px</td><td>0px to 640px</td></tr><tr><td>Medium (md)</td><td>768px</td><td>641px to 768px</td></tr><tr><td>Large (lg)</td><td>1024px</td><td>769px to 1024px</td></tr><tr><td>Extra Large (xl)</td><td>1280px</td><td>1025px to 1280px</td></tr><tr><td>2 Extra Large (2xl)</td><td>1536px</td><td>1281px to 1536px</td></tr></tbody></table>

## **Inner Container Widths**

Define container widths based on each breakpoint to keep content visually balanced:

**Small (sm):** 100% width with minimum 16px padding.

**Medium (md):** Max width 720px.

**Large (lg):** Max width 960px.

**Extra Large (xl):** Max width 1140px.

**2XL (2xl):** Max width 1280px.

## **Gutters and Margins**

**Gutter Width:** 16px between columns, ensuring consistent spacing.

**Outer Margins:** 112px on both left and right edges for a contained look on desktop screens.

**Alignment and Balance:** Ensure content aligns with columns, maintaining balance and structure. Adjust columns if needed to keep gutters and margins consistent.

## **Spacing and Padding**

Spacing is a crucial tool for enhancing clarity and usability in design. GWU follows a structured approach:

* Up to the base font size (`1rem`), spacing increases in `2px` increments.
* Beyond `1rem`, spacing increments increase by `4px` up to a maximum of `48px`.

## **Layout Patterns**

**Header & Footer:** Keep headers and footers consistent across breakpoints, with a compact version for smaller screens.

**Sidebar Navigation:** Display sidebars with fixed positioning on larger screens if needed.

## **Content Layouts**

**One-Column Layout:** For narrow screens, focusing on vertical scrolling.

**Two-Column Layout:** Adds a secondary column at the medium breakpoint.

**Three-Column Layout:** Available at larger breakpoints, ideal for data-heavy pages or dashboards.

## **Images**

**Adaptive Images:** Serve different image sizes based on breakpoints for optimized loading times and quality.

**Techniques:** Use `srcset` or CSS to ensure images adapt effectively to varying screen resolutions.

## **Testing and Accessibility**

**Testing on Devices:** Test layouts on multiple devices to confirm that breakpoints provide a consistent experience.

**Accessibility Considerations:** Ensure layouts are keyboard navigable and compatible with screen readers. Confirm that text and interactive elements resize appropriately for users who adjust browser zoom settings.


# Utils

| **Class** | **Description** |
| --------- | --------------- |

| `.dda-container` | Defines default container with padding and margin. |
| ---------------- | -------------------------------------------------- |

| `.dda-container-fluid` | Full-width container without fixed size. |
| ---------------------- | ---------------------------------------- |

| `.dda-container-xxl` | Container for extra-large screens, max-width 1320px. |
| -------------------- | ---------------------------------------------------- |

| `.dda-container-xl` | Container for large screens, max-width 1140px. |
| ------------------- | ---------------------------------------------- |

| `.dda-container-lg` | Container for medium-large screens, max-width 960px. |
| ------------------- | ---------------------------------------------------- |

| `.dda-container-md` | Container for medium screens, max-width 720px. |
| ------------------- | ---------------------------------------------- |

| `.dda-container-sm` | Container for small screens, max-width 540px. |
| ------------------- | --------------------------------------------- |

| `.dda-row` | Row layout with gutter spacing and wrapping. |
| ---------- | -------------------------------------------- |

| `.dda-col` | Flexible column with 100% width. |
| ---------- | -------------------------------- |

| `.dda-col-auto` | Column with automatic width. |
| --------------- | ---------------------------- |

| `.dda-col-[1-12]` | Columns with specific widths (from 8.33% to 100%). |
| ----------------- | -------------------------------------------------- |

| `.dda-col-sm-[1-12]` | Columns for small screens with specific widths. |
| -------------------- | ----------------------------------------------- |

| `.dda-col-md-[1-12]` | Columns for medium screens with specific widths. |
| -------------------- | ------------------------------------------------ |

| `.dda-col-lg-[1-12]` | Columns for large screens with specific widths. |
| -------------------- | ----------------------------------------------- |

| `.dda-col-xl-[1-12]` | Columns for extra-large screens with specific widths. |
| -------------------- | ----------------------------------------------------- |

| `.dda-col-xxl-[1-12]` | Columns for extra-extra-large screens with specific widths. |
| --------------------- | ----------------------------------------------------------- |

| `.d-inline` | Displays element inline. |
| ----------- | ------------------------ |

| `.d-inline-block` | Displays element as inline-block. |
| ----------------- | --------------------------------- |

| `.d-block` | Displays element as block. |
| ---------- | -------------------------- |

| `.d-grid` | Displays element as grid. |
| --------- | ------------------------- |

| `.d-inline-grid` | Displays element as inline-grid. |
| ---------------- | -------------------------------- |

| `.d-table` | Displays element as a table. |
| ---------- | ---------------------------- |

| `.d-table-row` | Displays element as a table row. |
| -------------- | -------------------------------- |

| `.d-table-cell` | Displays element as a table cell. |
| --------------- | --------------------------------- |

| `.d-flex` | Displays element as a flex container. |
| --------- | ------------------------------------- |

| `.d-inline-flex` | Displays element as inline flex container. |
| ---------------- | ------------------------------------------ |

| `.d-none` | Hides element (display: none). |
| --------- | ------------------------------ |

| `.flex-fill` | Makes flex item fill available space. |
| ------------ | ------------------------------------- |

| `.flex-row` | Flex container with horizontal row direction. |
| ----------- | --------------------------------------------- |

| `.flex-column` | Flex container with vertical column direction. |
| -------------- | ---------------------------------------------- |

| `.flex-row-reverse` | Flex container with reversed horizontal direction. |
| ------------------- | -------------------------------------------------- |

| `.flex-wrap` | Enables wrapping for flex items. |
| ------------ | -------------------------------- |

| `.flex-nowrap` | Prevents wrapping of flex items. |
| -------------- | -------------------------------- |

| `.flex-wrap-reverse` | Reverses the wrapping direction of flex items. |
| -------------------- | ---------------------------------------------- |

| `.m-[0-5]` | Margin utility classes (from 0 to 3rem). |
| ---------- | ---------------------------------------- |

| `.m-auto` | Centers element with auto margin. |
| --------- | --------------------------------- |

| `.mx-[0-5]` | Horizontal margin utility (left and right). |
| ----------- | ------------------------------------------- |

| `.my-[0-5]` | Vertical margin utility (top and bottom). |
| ----------- | ----------------------------------------- |

| `.mt-[0-5]` | Margin-top utility (0 to 3rem). |
| ----------- | ------------------------------- |

| `.me-[0-5]` | Margin-right utility (0 to 3rem). |
| ----------- | --------------------------------- |

| `.mb-[0-5]` | Margin-bottom utility (0 to 3rem). |
| ----------- | ---------------------------------- |

| `.ms-[0-5]` | Margin-left utility (0 to 3rem). |
| ----------- | -------------------------------- |

| `.p-[0-5]` | Padding utility classes (from 0 to 3rem). |
| ---------- | ----------------------------------------- |

| `.px-[0-5]` | Horizontal padding utility (left and right). |
| ----------- | -------------------------------------------- |

| `.py-[0-5]` | Vertical padding utility (top and bottom). |
| ----------- | ------------------------------------------ |

| `.pt-[0-5]` | Padding-top utility (0 to 3rem). |
| ----------- | -------------------------------- |

| `.pe-[0-5]` | Padding-right utility (0 to 3rem). |
| ----------- | ---------------------------------- |

&#x20;

&#x20;

| **Class Name** | **Description** |
| -------------- | --------------- |

| `h1, .dda-h1` | Font size and weight for h1 headers |
| ------------- | ----------------------------------- |

| `h2, .dda-h2` | Font size and weight for h2 headers |
| ------------- | ----------------------------------- |

| `h3, .dda-h3` | Font size and weight for h3 headers |
| ------------- | ----------------------------------- |

| `h4, .dda-h4` | Font size and weight for h4 headers |
| ------------- | ----------------------------------- |

| `h5, .dda-h5` | Font size and weight for h5 headers |
| ------------- | ----------------------------------- |

| `h6, .dda-h6` | Font size and weight for h6 headers |
| ------------- | ----------------------------------- |

| `.dda-title` | Font size and weight for titles |
| ------------ | ------------------------------- |

| `.dda-body` | Font size and weight for body text |
| ----------- | ---------------------------------- |

| `.dda-caption` | Font size and weight for captions |
| -------------- | --------------------------------- |

| `.dda-label` | Font size and weight for labels |
| ------------ | ------------------------------- |

| `a, a:hover` | Removes underline from links and defines hover style |
| ------------ | ---------------------------------------------------- |

| `button` | Applies pointer cursor to buttons |
| -------- | --------------------------------- |

| `ul` | Removes list styling (bullets and padding) |
| ---- | ------------------------------------------ |

| `.dda-bg-primary` | Primary background color |
| ----------------- | ------------------------ |

| `.dda-bg-secondary` | Secondary background color |
| ------------------- | -------------------------- |

| `.dda-color-black` | Applies black text color |
| ------------------ | ------------------------ |

| `.dda-rounded-sm` | Small border radius |
| ----------------- | ------------------- |

| `.dda-rounded-md` | Medium border radius |
| ----------------- | -------------------- |

| `.dda-rounded-lg` | Large border radius |
| ----------------- | ------------------- |

| `.dda-rounded-circle` | Circular border radius |
| --------------------- | ---------------------- |

| `.dda-gap-16` | 4rem gap between flex items |
| ------------- | --------------------------- |

| `.dda-gap-12` | 3rem gap between flex items |
| ------------- | --------------------------- |

| `.dda-gap-10` | 2.5rem gap between flex items |
| ------------- | ----------------------------- |

| `.dda-gap-8` | 2rem gap between flex items |
| ------------ | --------------------------- |

| `.dda-gap-6` | 1.5rem gap between flex items |
| ------------ | ----------------------------- |

| `.dda-gap-5` | 1.25rem gap between flex items |
| ------------ | ------------------------------ |

| `.dda-gap-4` | 1rem gap between flex items |
| ------------ | --------------------------- |

| `.dda-gap-3` | 0.75rem gap between flex items |
| ------------ | ------------------------------ |

| `.dda-gap-2` | 0.5rem gap between flex items |
| ------------ | ----------------------------- |

| `.dda-gap-1` | 0.375rem gap between flex items |
| ------------ | ------------------------------- |

| `::-ms-input-placeholder` | Placeholder text color for Internet Explorer |
| ------------------------- | -------------------------------------------- |

| `::placeholder` | Placeholder text color for other browsers |
| --------------- | ----------------------------------------- |

| `.dda-flex` | Flex container display |
| ----------- | ---------------------- |

| `.dda-flex-column` | Flex direction set to column |
| ------------------ | ---------------------------- |

| `.dda-inline-flex` | Inline flex container display |
| ------------------ | ----------------------------- |

| `.dda-align-center` | Centers items along the cross-axis |
| ------------------- | ---------------------------------- |

| `.dda-justify-space` | Distributes items with space between them |
| -------------------- | ----------------------------------------- |

| `.dda-justify-center` | Centers items along the main axis |
| --------------------- | --------------------------------- |

| `.m-0` | Removes margin from element |
| ------ | --------------------------- |

| `.p-0` | Removes padding from element |
| ------ | ---------------------------- |

| `.py-0` | Removes vertical padding from element |
| ------- | ------------------------------------- |

| `.border-right` | Adds a right border to the element |
| --------------- | ---------------------------------- |

&#x20;

| `.visually-hidden` | Hides element visually but keeps it accessible |
| ------------------ | ---------------------------------------------- |

&#x20;

&#x20;


# Usability Guidelines

In line with the Digital Transformation vision for Dubai Government, the Digital City Experience (DCX) Usability Guidelines aim to unify and enhance customer experiences during digital service usage. The guidelines focus on optimizing customer interactions by understanding user needs and employing effective design practices. This approach not only improves service efficiency and reduces costs but also boosts customer satisfaction and drives digital economic growth. By following these guidelines, stakeholders can achieve improved quality of life and enhanced service value throughout the city.

## **Mandatory**

### U.01 Information Architecture

**Provide intuitive, predictable, well-structured, self-explanatory, and consistent navigation.**

<table><thead><tr><th width="222">Principle</th><th>Description</th></tr></thead><tbody><tr><td><strong>Intuitive and Predictable Navigation</strong></td><td>Design for ease of use with predictable pathways and minimal clicks.</td></tr><tr><td><strong>Hierarchical Information Delivery</strong></td><td>Sort information from most to least relevant for quick access.</td></tr><tr><td><strong>Clear Identification of Functions</strong></td><td>Ensure functionalities are easily identifiable and accessible within a few steps.</td></tr><tr><td><strong>Consistent Navigation Menu</strong></td><td>Maintain consistent navigation menu placement and include a dynamic, easily accessible sitemap.</td></tr><tr><td><strong>Prominent Feature Links</strong></td><td>Display main feature links on the homepage for at-a-glance functionality overview; provide clear secondary links on inner pages.</td></tr><tr><td><strong>Descriptive Titles and Links</strong></td><td>Use clear, descriptive titles and links for content and navigational elements.</td></tr><tr><td><strong>Navigation Convenience</strong></td><td>Optimize navigation for varying screen sizes with essential navigational buttons like ‘back’ and ‘home’.</td></tr><tr><td><strong>Card-Sorting Design Method</strong></td><td>Implement card-sorting to ensure intuitive user navigation structure.</td></tr><tr><td><strong>Regular IA Testing and Optimization</strong></td><td>Conduct tree testing to validate user experience and incorporate regular IA optimizations into operational processes.</td></tr><tr><td><strong>Effective Browser Navigation Handling</strong></td><td>Ensure robust handling of browser 'back' button without disrupting the user experience.</td></tr></tbody></table>

### U.02 Consistency&#x20;

**Ensure design patterns/layouts are consistent across all digital channels and a channel’s pages.**

<table><thead><tr><th width="218">Principle</th><th>Description</th></tr></thead><tbody><tr><td><strong>Uniform Design Across Channels</strong></td><td>Maintain consistent design patterns and layouts across web, email, mobile apps, kiosks, and other channels.</td></tr><tr><td><strong>Coordinated Channel Interactions</strong></td><td>Ensure that interactions across different channels are harmonized to create a cohesive customer experience.</td></tr><tr><td><strong>Benefits of Design Consistency</strong></td><td><p><strong>Familiarity:</strong> Builds user confidence through predictable interactions.</p><p></p><p><strong>Learnability:</strong> Enhances user ability to learn the system when using various channels.</p><p></p><p><strong>Efficiency:</strong> Allows users to perform tasks more quickly and efficiently.</p><p></p><p><strong>Trust:</strong> Consistent experiences build trust and credibility with users.</p></td></tr><tr><td><strong>Major and Minor Inconsistencies</strong></td><td><p><strong>Major:</strong> Address inconsistencies in layout, color, font, step order, terminology, icons, and interaction patterns.</p><p></p><p><strong>Minor:</strong> Tackle variations in sub-layout, color tones, font emphasis, capitalization, icon size, alignment, grammar, and spelling.</p></td></tr></tbody></table>

Reference for Further Reading: Explore detailed insights and recommendations from NN Group on omnichannel consistency [here](https://www.nngroup.com/articles/omnichannel-consistency/).

### U.06 Clear Labels&#x20;

**Ensure user interface (UI) elements indicate clear and unambiguous functionality and meaning.**

<table><thead><tr><th width="217">Principle</th><th>Description</th></tr></thead><tbody><tr><td><strong>Conventional Icons</strong></td><td>Utilize logical and widely recognized icons instead of text where suitable. Icons should be clear and self-explanatory.</td></tr><tr><td><strong>Adequate Spacing</strong></td><td>Keep enough space between buttons, icons, and links to prevent errors and improve usability. Conduct regular user testing to assess spacing effectiveness.</td></tr><tr><td><strong>Clear Action Affordance</strong></td><td>Clearly label interactive elements like buttons and links for easy interaction on touchscreens. Eliminate gesture ambiguities that cause inconsistent actions.</td></tr><tr><td><strong>Consistency and Conventional Interactions</strong></td><td><p></p><p>Follow standard UI conventions and interaction patterns to reduce the learning curve. Implement platform-specific standards:</p><p></p><p><strong>Google Play Developer Policy:</strong> <a href="https://play.google.com/intl/us/about/developer-content-policy/">Google Play Guidelines</a></p><p></p><p><strong>Material Design:</strong> <a href="https://material.io/design">Material Design Guidelines</a></p><p></p><p><strong>Apple Human Interface Guidelines:</strong> <a href="https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/">Apple HIG</a></p><p></p><p>Design according to OS-native interface principles, maintaining core functionalities.</p></td></tr></tbody></table>

### U.07 Alerts&#x20;

**Provide clear methods for alerts that require customer attention or display important information.**

<table><thead><tr><th width="220">Principle</th><th>Description</th></tr></thead><tbody><tr><td><strong>Critical Information</strong></td><td>Ensure alerts convey crucial details with clear, actionable options.</td></tr><tr><td><strong>Clarity and Brevity</strong></td><td>Keep alerts brief and straightforward, explaining the reason and suggested actions, with clearly marked buttons.</td></tr><tr><td><strong>Minimize Disruption</strong></td><td>Issue notifications that are concise and non-disruptive, easy to act on or dismiss.</td></tr><tr><td><strong>Non-intrusive Feedback</strong></td><td>Provide essential feedback on-screen without hindering ongoing user activities.</td></tr><tr><td><strong>Notification Management</strong></td><td>Update and clear badges and status notifications only after the user has responded to them.</td></tr><tr><td><strong>Progress Indicators</strong></td><td>Display clear progress alerts, like "Processing XX%", to inform users.</td></tr><tr><td><strong>Avoid Jargon</strong></td><td>Use simple language in alerts to ensure understanding across all user levels.</td></tr><tr><td><strong>Restrict Pop-ups</strong></td><td>Limit pop-up use to essential instances due to general poor reception and browser blocks.</td></tr><tr><td><strong>Visibility of Alerts</strong></td><td>Position alerts to remain visible beyond the scroll on lengthy forms to ensure they are seen.</td></tr><tr><td><strong>Error Recovery</strong></td><td>Handle errors smoothly, offering clear recovery options without blocking user progress.</td></tr><tr><td><strong>Confirmations</strong></td><td>Confirm actions like registrations and payments with a digital notification.</td></tr></tbody></table>

### U.10 Horizontal Scrolling&#x20;

**Avoid horizontal scrolling in default screen size.**

<table><thead><tr><th width="218">Principle</th><th>Description</th></tr></thead><tbody><tr><td><strong>Avoid Horizontal Scrolling</strong></td><td>Design the UI to eliminate horizontal scrolling in the default screen size.</td></tr><tr><td><strong>Enable Vertical Scrolling</strong></td><td>Support vertical scrolling with clear navigation cues such as visible scroll bars, signs for vertical movement, or prominently marked buttons.</td></tr></tbody></table>

### &#x20;U.21 Upload Limits&#x20;

**Allow reasonable limits on file and image uploads.**

<table><thead><tr><th width="218">Principle</th><th>Description</th></tr></thead><tbody><tr><td><strong>Reasonable Upload Limits</strong></td><td>Set and regularly test practical file size and dimension limits to match common user needs.</td></tr><tr><td><strong>User-Friendly Compression Tools</strong></td><td>Include compression and preview tools to simplify uploads without manual adjustments, suitable for all users.</td></tr><tr><td><strong>Post-Upload Optimization</strong></td><td>Automatically adjust uploaded files on the server, allowing users to review and modify if necessary.</td></tr><tr><td><strong>Maintain Aspect Ratio</strong></td><td>Preserve the original aspect ratio of images to prevent distortion.</td></tr><tr><td><strong>Accessibility and Inclusivity</strong></td><td>Ensure upload features are accessible and functional for all users.</td></tr><tr><td><strong>Continuous User Testing</strong></td><td>Regularly validate the upload process with real users to ensure it meets their needs.</td></tr></tbody></table>

### U.22 Pop-ups&#x20;

**Minimize Pop-Up Use.**

<table><thead><tr><th width="218">Principle</th><th>Description</th></tr></thead><tbody><tr><td><strong>Minimize Pop-Up Use</strong></td><td><p>Avoid pop-ups, which typically worsen user </p><p>experience, particularly on mobile devices.</p><p></p><p>Employ pop-ups solely when indispensable and no alternative interactions are available.</p><p></p><p>Remember that many browsers and user settings automatically block pop-ups, affecting functionality and engagement.</p></td></tr></tbody></table>

## **Recommended**

### U.03 Visibility&#x20;

**Ensure visibility of a digital service’s status and system behavior.**

<table><thead><tr><th width="218">Principle</th><th>Description</th></tr></thead><tbody><tr><td><strong>Enhance System Visibility</strong></td><td><p>Make the digital service’s status and behaviors clearly visible to improve usability.</p><p></p><p>Match system visibility with user expectations to aid understanding during interaction.</p><p></p><p>Consistently display dynamic updates and process statuses, like the full status of a visa application post-submission.</p><p></p><p>Ensure this visibility reassures users that their actions are recognized, boosting confidence and satisfaction.</p></td></tr></tbody></table>

### U.04 Wayfinding&#x20;

**Provide UI elements to help wayfinding within the system.**

**Optimizing Form Usability:**

<table><thead><tr><th width="218">Principle</th><th>Description</th></tr></thead><tbody><tr><td><strong>Facilitate User Orientation</strong></td><td><p>Help users know their location within the system conceptually and statically, such as within a site map.</p><p></p><p>Use clear UI elements to indicate current and next steps in processes like applications or registrations.</p><p></p><p>Display local indicators, such as step markers ("Step 1 of 5"), to show progress in tasks.</p><p></p><p>Utilize global navigation aids like breadcrumbs to clarify the user's position within the site structure and facilitate easy navigation to previous sections.</p></td></tr></tbody></table>

### U.05 Forms&#x20;

**Obtain service requisite information through simple and easy-to-use mechanisms.**

<table><thead><tr><th width="218">Principle</th><th>Description</th></tr></thead><tbody><tr><td><strong>Pre-fetch Customer Data</strong></td><td>Auto-fill forms with existing data (e.g., name, address) to reduce manual entry.</td></tr><tr><td><strong>Default Values</strong></td><td>Use defaults based on last selections or common choices (e.g., today's date for date fields).</td></tr><tr><td><strong>Pre-defined Selections</strong></td><td>Include dropdowns and pre-defined inputs to lessen manual entry.</td></tr><tr><td><strong>Mandatory Data</strong></td><td>Mark essential fields clearly with symbols (e.g., '*') to streamline submissions and prevent errors.</td></tr><tr><td><strong>Real-Time Validation</strong></td><td>Display errors as users type to address issues before form submission, highlighting errors clearly.</td></tr><tr><td><strong>Error Handling</strong></td><td>Retain valid data upon submission errors, and highlight incorrect fields without forcing a form restart.</td></tr><tr><td><strong>Clear Format Specifications</strong></td><td>Clearly state required formats next to fields (e.g., DD-MM-YY for dates) with examples.</td></tr><tr><td><strong>Units and Data Types</strong></td><td>Specify units clearly (e.g., USD for currency; meters for length) next to numerical entries.</td></tr><tr><td><strong>Assistive Technologies</strong></td><td>Use technologies like auto-completion and spellcheck appropriately, disabling auto-corrections where they may cause errors.</td></tr><tr><td><strong>Flexibility with Characters</strong></td><td>Support various character inputs (e.g., dashes in names) and provide alternatives as needed.</td></tr><tr><td><strong>Alternate Input Mechanisms</strong></td><td>Utilize device features for alternative inputs like voice or camera where suitable.</td></tr><tr><td><strong>Specialized Keyboards</strong></td><td>Provide context-specific keyboards on mobile devices (e.g., with "@" for email fields).</td></tr><tr><td><strong>Location Integration</strong></td><td>Employ maps for inputs requiring geographic data.</td></tr><tr><td><strong>Manage Form Length</strong></td><td>Keep forms short or break lengthy forms into sections to reduce user fatigue and improve clarity.</td></tr></tbody></table>

### U.11 Animations&#x20;

**Avoid excessive and lengthy animations that do not help in completing tasks efficiently.**

**Minimize Use of Animations:**

<table><thead><tr><th width="218">Principle</th><th>Description</th></tr></thead><tbody><tr><td><strong>Limit Animations</strong></td><td>Restrict animations to those that directly aid task completion or enhance interaction, ensuring they do not cause delays.</td></tr><tr><td><strong>Duration</strong></td><td>Keep necessary animations brief, not exceeding 3 seconds to preserve efficiency.</td></tr><tr><td><strong>Functional Priority</strong></td><td>Emphasize functional over aesthetic elements, especially in government services focused on task efficiency.</td></tr><tr><td><strong>Control Repetition</strong></td><td>Avoid repeating animations or splash screens that fail to add ongoing value, as they can delay user tasks unnecessarily.</td></tr></tbody></table>

### U.12 Recognition & Recall&#x20;

**Allow users to recognize options rather than having to recall them.**

<table><thead><tr><th width="218">Principle</th><th>Description</th></tr></thead><tbody><tr><td><strong>Design for Recognition</strong></td><td>Support recognition over recall through familiar interfaces.</td></tr><tr><td><strong>Limit Icon Use</strong></td><td>Use only necessary icons with supporting labels.</td></tr><tr><td><strong>Clear Labeling</strong></td><td>Label icons clearly to aid understanding.</td></tr><tr><td><strong>Device Compatibility</strong></td><td>Ensure consistent behavior across platforms.</td></tr><tr><td><strong>User Testing</strong> </td><td>Regularly test with users to validate icon-text balance.</td></tr></tbody></table>

### U.13 Less is More&#x20;

**Remove unnecessary visual/text elements from the UI.**

**Streamline UI Complexity:**

<table><thead><tr><th width="218">Principle</th><th>Description</th></tr></thead><tbody><tr><td><strong>Evaluate Elements</strong></td><td>Understand that each visual and textual component can increase UI complexity, impacting usability.</td></tr><tr><td><strong>Utilize Design Aids</strong></td><td>Strategically use design elements like colors and boxes to enhance organization and comprehension.</td></tr><tr><td><strong>Employ Simplification Techniques</strong></td><td>Apply proximity and alignment to create clear groupings and delineations without extra graphics.</td></tr><tr><td><strong>Perform Reduction Tests</strong></td><td>Regularly remove and assess UI elements to ensure essential clarity and functionality remain. Discard unnecessary decorations like excessive text styling and extra borders.</td></tr></tbody></table>

### U.14 Context-Aware

**Provide context-aware omni-channel user experience.**

<table><thead><tr><th width="218">Principle</th><th>Description</th></tr></thead><tbody><tr><td><strong>Utilize Mobile Features</strong></td><td>Leverage mobile device features to support user context, adapting to the variable environments in which they operate.</td></tr><tr><td><strong>Adapt to Time-Sensitive Contexts</strong></td><td>Modify service elements according to the time of day or user activity, such as disabling unavailable customer support options.</td></tr><tr><td><strong>Enhance Visual Experience</strong></td><td>Switch UI themes (e.g., day to night mode in mapping apps) to improve visibility and reduce glare during different times.</td></tr><tr><td><strong>Utilize Location Information</strong></td><td>Use real-time location data to display relevant information like nearby facilities or service operational hours.</td></tr><tr><td><strong>Dynamic Content Presentation</strong></td><td>Show dynamic elements (e.g., a moving 'blue dot' on maps or real-time balances) to create a lively user experience.</td></tr><tr><td><strong>Validate Device Features</strong></td><td>Ensure accuracy and reliability in the use of device capabilities to maintain high-quality service.</td></tr><tr><td><strong>Encourage Government Adoption</strong></td><td> Advocate for government entities to adopt and integrate context-aware features to enhance practicality and benefit user experience.</td></tr></tbody></table>

### U.15 Defaults

**Deliberately set default settings and options to serve the user.**

<table><thead><tr><th width="218">Principle</th><th>Description</th></tr></thead><tbody><tr><td><strong>Strategic Use</strong></td><td>Implement default settings to simplify user choices, selecting common or recommended options to streamline experiences.</td></tr><tr><td><strong>Transparency</strong></td><td>Clearly indicate default settings so users understand the choices made on their behalf. Ensure defaults are visibly marked and easy to change.</td></tr><tr><td><strong>User Control</strong></td><td>Enable users to easily modify or opt out of default settings, ensuring the process is simple to maintain user autonomy.</td></tr><tr><td><strong>Contextual Appropriateness</strong></td><td>Align defaults with user context and needs. For instance, auto-recharge features should be convenient but also transparent about their operation.</td></tr></tbody></table>

### U.16 Target Size

**Provide UI targets at an appropriate size for interaction.**

<table><thead><tr><th width="218">Principle</th><th>Description</th></tr></thead><tbody><tr><td><strong>Design Principles</strong></td><td>Size interactive elements like buttons according to Fitts' Law, ensuring they are large enough for easy and fast interaction.</td></tr><tr><td><strong>Minimize Inconvenience</strong></td><td>Ensure targets are sufficiently large for easy activation, especially on mobile devices, to reduce frustration and errors.</td></tr><tr><td><strong>Usability Testing</strong></td><td>Regularly perform usability tests on target sizes to ensure they meet user needs and detect any issues that could impact usability.</td></tr><tr><td><strong>Adherence to Standards</strong></td><td><p>Follow established UI sizing standards to enhance accessibility:</p><p></p><p><strong>W3C Guidelines on Understanding Target Size:</strong> These guidelines serve as a benchmark for ensuring that interactive elements are easily clickable, touchable, and accessible to all users, including those with disabilities.</p><p></p><p><strong>Minimum Target Size (Level AA):</strong> The minimum size for clickable elements should be 24 pixels. This size ensures that users can interact with elements comfortably without the risk of errors, particularly on touchscreen devices where precision is critical.</p></td></tr><tr><td><strong>Continual Evaluation</strong></td><td>Consistently review and modify target sizes based on user feedback and changes in interface standards to maintain high usability across devices.</td></tr></tbody></table>

### U.17 Text as Image

**Avoid the use of text as images, allowing users to use their text flow options.**

<table><thead><tr><th width="218">Principle</th><th>Description</th></tr></thead><tbody><tr><td><strong>Avoid Text as Images</strong></td><td>Refrain from embedding text in images, which restricts users from adjusting text settings like size and font, impairing readability and accessibility.</td></tr><tr><td><strong>Enhance User Control</strong></td><td>Provide text in adaptable formats that users can customize to their viewing preferences, improving accessibility.</td></tr><tr><td><strong>Support User Interaction</strong></td><td>Ensure that text is selectable and can be easily copied, allowing users to transfer information to other applications without hindrance.</td></tr><tr><td><strong>Fluid Design Principles</strong></td><td>Utilize fluid design to allow text to reflow based on screen size and orientation, enhancing usability especially on mobile devices with limited screen space.</td></tr><tr><td><strong>Separate Text from Images</strong></td><td>Maintain a clear distinction between decorative images and text to ensure content clarity and readability, ensuring text remains easily accessible and does not blend into background imagery.</td></tr></tbody></table>

### U.18 Progressive Disclosure

**Reveal UI functionality progressively.**

<table><thead><tr><th width="218">Principle</th><th>Description</th></tr></thead><tbody><tr><td><strong>Adopt Strategic Disclosure</strong></td><td>Use a design strategy that gradually reveals UI functionality to avoid overwhelming users initially. Display the most commonly used features prominently, with options like "show more" to access additional functionalities.</td></tr><tr><td><strong>Prioritize Common Functions</strong></td><td>Analyze user interactions to identify frequently used functionalities and prioritize these in the UI layout, enhancing usability and accessibility.</td></tr><tr><td><strong>Minimize Visual Clutter</strong></td><td>Reduce clutter by concealing less commonly used features initially, maintaining a clean and focused interface that emphasizes primary user tasks.</td></tr><tr><td><strong>Ensure Full Accessibility</strong></td><td>Maintain accessibility of all functionalities through progressive disclosure, providing intuitive mechanisms for users to find and use hidden features as needed.</td></tr><tr><td><strong>User-Centric Design</strong></td><td>Regularly reassess and adapt the display of functionalities based on user feedback and behavior, ensuring the interface stays relevant and user-friendly.</td></tr></tbody></table>

### U.19 Paragraph Readability

**Ensure short horizontal lines of text for easier readability.**

<table><thead><tr><th width="218">Principle</th><th>Description</th></tr></thead><tbody><tr><td><strong>Optimize Line Length</strong></td><td>Maintain short horizontal lines of text, ideally 50-75 characters per line, to reduce cognitive strain and enhance readability.</td></tr><tr><td><strong>Use Column Formatting</strong></td><td>Arrange text in narrower columns, mirroring newspaper and magazine layouts, to decrease eye strain and improve line tracking.</td></tr><tr><td><strong>Maintain Comfortable Reading Experience</strong></td><td>Design text columns and line spacing to ensure a comfortable reading experience, utilizing adequate white space between columns for clear separation.</td></tr><tr><td><strong>Adaptive Text Layout</strong></td><td>Apply responsive design principles to ensure text layout adjusts effectively across different devices, maintaining a consistent and accessible reading experience on desktops, tablets, and mobiles.</td></tr><tr><td><strong>Test and Iterate</strong></td><td>Continuously test text layouts with real users, collecting feedback on readability and comfort to refine and optimize text presentations for a diverse audience.</td></tr></tbody></table>

### U.20 Conventions

**Follow conventions and user expectations, ensuring novelties add significant value.**

<table><thead><tr><th width="218">Principle</th><th>Description</th></tr></thead><tbody><tr><td><strong>Follow Established Conventions</strong></td><td>Use familiar UI patterns, like the hamburger menu for navigation, to ensure ease of use.</td></tr><tr><td><strong>Intuitive Placement of Functions</strong></td><td>Keep commonly used functions like language switches in expected places to prevent confusion and enhance efficiency.</td></tr><tr><td><strong>Innovate Responsibly</strong></td><td>Ensure that innovations improve user experience without sacrificing usability. Innovations should be clearly advantageous and easily understandable.</td></tr><tr><td><strong>Test Innovations Thoroughly</strong></td><td>Conduct detailed usability testing for new design elements to verify their effectiveness and user acceptance.</td></tr><tr><td><strong>Gather Detailed Feedback</strong></td><td>Utilize methods like eye-tracking to analyze user interactions with new designs, ensuring they are intuitive.</td></tr><tr><td><strong>Validate Innovations</strong></td><td>Make sure innovations add substantial value and address specific user needs or problems.</td></tr><tr><td><strong>Document Outcomes</strong></td><td>Keep precise records of feedback and testing outcomes to inform future design choices and confirm the value of innovations.</td></tr></tbody></table>


# Accordions

Accordions are used to organize content into collapsible sections, allowing users to expand and collapse sections as needed.


# Accordion

Accordions are used to organize content into collapsible sections, allowing users to expand and collapse sections as needed.

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2Fi0f6yN1V3MldJvq6WR74%2FAccordion%20-%20Overview.png?alt=media&amp;token=4d7c9170-83df-4862-a6be-47a8cd73c98f" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Accordions are used to manage large amounts of content by dividing it into sections that can be expanded or collapsed. They are suitable for FAQs, content-heavy pages, or any interface where space is limited, and users need to access different sections of content without overwhelming them with too much information at once.

### How it works

An accordion component typically includes a series of sections, each with a header that, when clicked, expands or collapses the section's content. Optional elements like icons can indicate the expanded or collapsed state. The accordion can be configured to display one section at a time or allow multiple sections to be expanded simultaneously.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-accordion
    design="bg-border"
    accordion_icon_class="material-icons material-symbols-outlined"
    accordion_icon_text="home"
    accordion_header_end_icon="info"
    accordion_id="accordionOne"
    header_text="Accordion Header"
    sub_title="Sub Title"
    body_description="This is the accordion body content."
    link_button_text="Button"
    custom_class=""
    component_mode=""
    default_open="true"
></dda-accordion>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaAccordion 
    design="bg-border"
    accordion_icon_class="material-icons material-symbols-outlined"
    accordion_icon_text="home"
    accordion_header_end_icon="info"
    accordion_id="accordionOne"
    header_text="Accordion Header"
    sub_title="Sub Title"
    body_description="This is the accordion body content."
    link_button_text="Button"
    custom_class=""
    component_mode=""
    default_open="true"
></DdaAccordion>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaAccordion 
    design="bg-border"
    accordion_icon_class="material-icons material-symbols-outlined"
    accordion_icon_text="home"
    accordion_header_end_icon="info"
    accordion_id="accordionOne"
    header_text="Accordion Header"
    sub_title="Sub Title"
    body_description="This is the accordion body content."
    link_button_text="Button"
    custom_class=""
    component_mode=""
    default_open="true"
></DdaAccordion>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-accordion 
    design="bg-border"
    accordion_icon_class="material-icons material-symbols-outlined"
    accordion_icon_text="home"
    accordion_header_end_icon="info"
    accordion_id="accordionOne"
    header_text="Accordion Header"
    sub_title="Sub Title"
    body_description="This is the accordion body content."
    link_button_text="Button"
    custom_class=""
    component_mode=""
    default_open="true"
></dda-accordion>
```

{% endtab %}
{% endtabs %}

### Properties

<table><thead><tr><th width="180">Property</th><th>Description</th><th>Type</th></tr></thead><tbody><tr><td><code>design</code></td><td><p></p><p>Determines the visual style of the accordion.</p><ul><li><code>'bg-border'</code> (default): Displays the accordion with a background and border.</li><li><code>'no-border'</code>: Displays the accordion without a background or border.</li></ul></td><td><code>"bg-border" | "no-border"</code></td></tr><tr><td><code>accordion_icon_class</code></td><td>CSS classes used for the accordion icon (e.g., Material Icons classes).</td><td><code>string</code></td></tr><tr><td>accordion_icon_text</td><td>The icon name or text to be displayed inside the icon element.</td><td><code>string</code></td></tr><tr><td>accordion_id</td><td>Unique identifier for the accordion, useful for targeting or toggling.</td><td><code>string</code></td></tr><tr><td>header_text</td><td>The text displayed in the accordion header. Defaults to <code>'Accordion Header'</code>.</td><td><code>string</code></td></tr><tr><td>sub_title</td><td>Optional subtitle displayed under the header.</td><td><code>string</code></td></tr><tr><td>body_description</td><td>The text content inside the accordion body. Defaults to <code>'This is the accordion body content.'</code>.</td><td><code>string</code></td></tr><tr><td>link_button_text</td><td>Text for a button shown in the accordion (usually within the body).</td><td><code>string</code></td></tr><tr><td>custom_class</td><td>Allows the user to pass additional CSS classes to customize the accordion's appearance. Defaults to an empty string.</td><td><code>string</code></td></tr><tr><td>component_mode</td><td>Provides an optional mode for additional customization (e.g., dark mode or variant styles).</td><td><code>string</code></td></tr><tr><td>component_mode</td><td>Defines a special mode (<code>dark</code>, <code>light</code>).</td><td><code>string</code></td></tr><tr><td>default_open</td><td>If set to <code>"true"</code>, the accordion is expanded/open by default.</td><td><code>boolean</code></td></tr><tr><td><code>accordion_header_end_icon</code></td><td>Icon name to be displayed at the end of the accordion header (e.g., "info").</td><td><code>string</code></td></tr></tbody></table>

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2Fh7nq20VTRotUxjpD6tbA%2FAccordion%20-%20Anatomy.png?alt=media&amp;token=a22b83d5-8afc-4bdf-8813-a766fcb5eba2" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Lead-Icon**: An icon positioned at the start of the accordion title, providing visual context or indicating the type of content.

**Dropdown Icon**: An icon that indicates the expandable and collapsible nature of the accordion, usually changing direction when clicked.

**Title**: The main text that describes the section of the accordion and prompts users to expand for more details.

**Sub-title**: Situated just below the title, the sub-title offers additional context or a secondary layer of detail about the accordion's contents, enhancing the user's understanding of what to expect upon expansion.

**Description Text**: Additional descriptive text positioned next to the expand icon, offering further clarification or supplementary information about the accordion’s contents.

**Link Button**: Positioned within the paragraph, these buttons serve as CTAs (Call to Action), guiding users to take specific actions or visit linked pages.

***

## Dos and Don'ts

| Dos                                                                                   | Don'ts                                                                            |
| ------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
| Use accordions to manage and organize large amounts of content.                       | Don't use accordions for single pieces of content that do not require collapsing. |
| Label each accordion section clearly to indicate its content.                         | Avoid using ambiguous or unclear labels for accordion sections.                   |
| Ensure accordion headers are large enough to be easily tappable or clickable.         | Don't make accordion headers too small to interact with comfortably.              |
| Provide visual feedback to indicate the expanded or collapsed state.                  | Don't leave users guessing whether a section is expanded or collapsed.            |
| Use consistent styling and spacing across all accordion sections in the application.  | Don't use inconsistent styles that may confuse users.                             |
| Update the state of the accordion in real-time as sections are expanded or collapsed. | Don't use accordions if you cannot provide real-time updates.                     |


# Accordion Groups

Accordion groups are designed to organize content into collapsible sections, enabling users to expand and collapse each section as needed for a streamlined and manageable browsing experience.

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2Fn4jAsNp4qdOyPwtzl6TT%2FAccordion%20Groups%20-%20Overview.png?alt=media&amp;token=507550c3-d32f-4ddb-84cf-fded4a2dad1c" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Accordion Groups are ideal for efficiently managing space while organizing large amounts of content into digestible sections. They are perfect for interfaces such as FAQs and forms, where users benefit from accessing detailed sections one at a time without the clutter of too much visible information simultaneously.

### How it works

Each accordion group consists of multiple collapsible sections, each with a title that users can click to expand or collapse. This component may include an 'Expand All' button, allowing users to open all sections at once for quick access. Icons next to each title indicate the current state—expanded or collapsed—and provide a visual cue for operation, enhancing user interaction and accessibility.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-accordion
    design="bg-border"
    accordion_icon_class="material-icons material-symbols-outlined"
    accordion_icon_text="home"
    accordion_header_end_icon="info"
    accordion_id="accordionOne"
    header_text="Accordion Header"
    sub_title="Sub Title"
    body_description="This is the accordion body content."
    link_button_text="Button"
    custom_class=""
    component_mode=""
    default_open="true"
></dda-accordion>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaAccordion 
    design="bg-border"
    accordion_icon_class="material-icons material-symbols-outlined"
    accordion_icon_text="home"
    accordion_header_end_icon="info"
    accordion_id="accordionOne"
    header_text="Accordion Header"
    sub_title="Sub Title"
    body_description="This is the accordion body content."
    link_button_text="Button"
    custom_class=""
    component_mode=""
    default_open="true"
></DdaAccordion>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaAccordion 
    design="bg-border"
    accordion_icon_class="material-icons material-symbols-outlined"
    accordion_icon_text="home"
    accordion_header_end_icon="info"
    accordion_id="accordionOne"
    header_text="Accordion Header"
    sub_title="Sub Title"
    body_description="This is the accordion body content."
    link_button_text="Button"
    custom_class=""
    component_mode=""
    default_open="true"
></DdaAccordion>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-accordion 
    design="bg-border"
    accordion_icon_class="material-icons material-symbols-outlined"
    accordion_icon_text="home"
    accordion_header_end_icon="info"
    accordion_id="accordionOne"
    header_text="Accordion Header"
    sub_title="Sub Title"
    body_description="This is the accordion body content."
    link_button_text="Button"
    custom_class=""
    component_mode=""
    default_open="true"
></dda-accordion>

```

{% endtab %}
{% endtabs %}

### Properties

<table><thead><tr><th width="180">Property</th><th>Description</th><th>Type</th></tr></thead><tbody><tr><td><code>design</code></td><td><p></p><p>Determines the visual style of the accordion.</p><ul><li><code>'bg-border'</code> (default): Displays the accordion with a background and border.</li><li><code>'no-border'</code>: Displays the accordion without a background or border.</li></ul></td><td><code>"bg-border" | "no-border"</code></td></tr><tr><td><code>accordion_icon_class</code></td><td>CSS classes used for the accordion icon (e.g., Material Icons classes).</td><td><code>string</code></td></tr><tr><td><code>accordion_icon_text</code></td><td>The icon name or text to be displayed inside the icon element.</td><td><code>string</code></td></tr><tr><td><code>accordion_id</code></td><td>Unique identifier for the accordion, useful for targeting or toggling.</td><td><code>string</code></td></tr><tr><td><code>header_text</code></td><td>The text displayed in the accordion header. Defaults to <code>'Accordion Header'</code>.</td><td><code>string</code></td></tr><tr><td><code>sub_title</code></td><td>Optional subtitle displayed under the header.</td><td><code>string</code></td></tr><tr><td><code>body_description</code></td><td>The text content inside the accordion body. Defaults to <code>'This is the accordion body content.'</code>.</td><td><code>string</code></td></tr><tr><td><code>link_button_text</code></td><td>Text for a button shown in the accordion (usually within the body).</td><td><code>string</code></td></tr><tr><td><code>custom_class</code></td><td>Allows the user to pass additional CSS classes to customize the accordion's appearance. Defaults to an empty string.</td><td><code>string</code></td></tr><tr><td><code>component_mode</code></td><td>Provides an optional mode for additional customization (e.g., dark mode or variant styles).</td><td><code>string</code></td></tr><tr><td><code>component_mode</code></td><td>Defines a special mode (<code>dark</code>, <code>light</code>).</td><td><code>string</code></td></tr><tr><td><code>default_open</code></td><td>If set to <code>"true"</code>, the accordion is expanded/open by default.</td><td><code>boolean</code></td></tr><tr><td><code>accordion_header_end_icon</code></td><td>Icon name to be displayed at the end of the accordion header (e.g., "info").</td><td><code>string</code></td></tr></tbody></table>

### Function for handling the group accordion collapse

```html
<script>
    async function toggleGroup(groupId) {
    const all = Array.from(document.querySelectorAll('dda-accordion'));
    const targetGroup = all.filter(acc => acc.getAttribute('accordion_id') === groupId);

    if (targetGroup.length === 0) return;

    const openStates = await Promise.all(targetGroup.map(el => el.getIsOpen()));
    const allOpen = openStates.every(state => state === true);

    for (const el of targetGroup) {
      if (allOpen) {
        await el.closeAccordion();
      } else {
        await el.openAccordion();
      }
    }

    const button = document.getElementById('toggleAccordionButton');
    button.textContent = allOpen ? 'Open Group One' : 'Collapse Group One';
  }
  </script>
```

```html

<button id="toggleAccordionButton" onclick="toggleGroup('accordiongroupOne')">Toggle Group One</button>


<dda-accordion
    design="bg-border"
    header_text="What is this website ?"
    custom_class="mb-2"
    component_mode=""
    accordion_icon="info"
    accordion_id="accordiongroupOne"
    default_open="true"
>
<p>This is a sample website made to showcase the use of the Dubai
Design System Web Components Library</p>
</dda-accordion>

<dda-accordion
  design="bg-border"
  header_text="What is the Dubai Design System Component Library?"
  body_description="This is the accordion body content."
  custom_class="mb-2"
  component_mode=""
  accordion_icon="manage_search"
  accordion_id="accordiongroupOne"
  default_open="true"
>
  <p>
    The Dubai Design System Component Library is a set of pre-built,
    reusable UI components that help developers create consistent and
    scalable applications across Dubai government portals.
  </p>
</dda-accordion>

<dda-accordion
  design="bg-border"
  header_text="What is this website ?"
  custom_class="mb-2"
  component_mode=""
  accordion_icon="info"
  accordion_id="accordiongroupTwo"
  default_open="true"
>
  <p>
    This is a sample website made to showcase the use of the Dubai
    Design System Web Components Library
  </p>
</dda-accordion>

<dda-accordion
  design="bg-border"
  header_text="What is the Dubai Design System Component Library?"
  body_description="This is the accordion body content."
  custom_class="mb-2"
  component_mode=""
  accordion_icon="manage_search"
  accordion_id="accordiongroupTwo"
  default_open="true"
>
  <p>
    The Dubai Design System Component Library is a set of pre-built,
    reusable UI components that help developers create consistent and
    scalable applications across Dubai government portals.
  </p>
</dda-accordion>
```

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FwnJQmDTrKESXFYKePe0i%2FAccordion%20Groups%20-%20Anatomy.png?alt=media&amp;token=cde5b16d-5cef-4c85-a46c-b0237875c021" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Group Title**: Sits at the top of the accordion group, giving a general overview or category title that encompasses all underlying accordion sections.

**Group Lead-Icon**: An icon associated with the group title, enhancing the visual representation of the overall content category.

**Group Sub-title**: A supplementary title under the main group title, providing additional context or detail about the group’s content.

**Expand/Collapse Button**: A button that allows users to expand or collapse all accordion sections within the group simultaneously, improving usability for navigating large information sets.

**Individual Accordion Titles**: Each accordion within the group has its own title, guiding the user to the specific content contained within each section.

**Lead-Icon for Each Accordion**: Icons corresponding to each individual accordion title, visually representing the type of content within.

**Sub-title for Each Accordion**: A sub-title for additional details beneath each accordion title, offering more specific information about the content before opening the accordion.

**Description Text**: Additional text that can appear beside the collapse icon, offering brief information about the accordion’s content or state.

**Link Button**: Actionable buttons within the accordion content, providing links or actions related to the accordion’s content.

**Collapse Icon**: Icons next to each accordion title that indicate whether the accordion is open or closed, typically shown as an up or down arrow.

***

## Dos and Don'ts

| Dos                                                                                           | Don'ts                                                                                       |
| --------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
| Do use clear and concise titles for both the group and individual accordions.                 | Don't clutter titles with unnecessary information that could overwhelm the user.             |
| Do include icons that are intuitive and help visually distinguish between different sections. | Don't use overly complex or similar icons for different sections, which can cause confusion. |
| Do provide a Group Sub-title if additional context helps clarify the grouped content.         | Don't make sub-titles too lengthy; keep them brief and to the point.                         |
| Do implement an Expand/Collapse All button to enhance user convenience.                       | Don't hide the Expand/Collapse functionality where users might expect to control visibility. |
| Do provide additional description text where necessary to inform the user.                    | Don't use inconsistent styles that may confuse users.                                        |
| Update the state of the accordion in real-time as sections are expanded or collapsed.         | Don't use accordions if you cannot provide real-time updates.                                |


# Alert

Alert banners are used to convey important information or warnings to users.

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FqKYZytNuQoCwG6Jwn7j5%2FAlerts%202%20-%20Overview.png?alt=media&amp;token=0b43a7d8-6844-4006-815d-1e4e700f0c6a" alt=""><figcaption></figcaption></figure>

## Usage

### **When to Use This Component**

Alert banners are used to communicate critical information, warnings, or updates that require the user’s attention. They are ideal for displaying system messages, error notifications, success confirmations, and other significant alerts.

### **How It Works**

An alert banner component typically includes a message and may also feature optional elements like icons, titles, and action buttons. Alert banners are usually displayed prominently at the top of the interface or within a designated alert area to ensure visibility. They can appear in different states—such as success, warning, error, or information—to reflect the nature of the message.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-alert
    type="primary"
    variation="info"
    title_text="Alert Title"
    description="This is an informational alert."
    button_text="Learn more"
    close_button_name="closeAlert"
    custom_class=""
    component_mode=""
    secondary_button="Secondary"
    secondary_button_link=""
    primary_button="Primary"
    primary_button_link=""
></dda-alert>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaAlert
    type="primary"
    variation="info"
    title_text="Alert Title"
    description="This is an informational alert."
    button_text="Learn more"
    close_button_name="closeAlert"
    custom_class=""
    component_mode=""
    secondary_button="Secondary"
    secondary_button_link=""
    primary_button="Primary"
    primary_button_link=""
></DdaAlert>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaAlert
    type="primary"
    variation="info"
    title_text="Alert Title"
    description="This is an informational alert."
    button_text="Learn more"
    close_button_name="closeAlert"
    custom_class=""
    component_mode=""
    secondary_button="Secondary"
    secondary_button_link=""
    primary_button="Primary"
    primary_button_link=""
></DdaAlert>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-alert
    type="primary"
    variation="info"
    title_text="Alert Title"
    description="This is an informational alert."
    button_text="Learn more"
    close_button_name="closeAlert"
    custom_class=""
    component_mode=""
    secondary_button="Secondary"
    secondary_button_link=""
    primary_button="Primary"
    primary_button_link=""
></dda-alert>
```

{% endtab %}
{% endtabs %}

### Properties

| Property                | Description                                                                                           | Type                                          |
| ----------------------- | ----------------------------------------------------------------------------------------------------- | --------------------------------------------- |
| `type`                  | Defines the primary or secondary style variation of the alert.                                        | `"primary" \| "secondary"`                    |
| `variation`             | Specifies the alert type, which affects the visual styling.                                           | `"error" \| "info" \| "success" \| "warning"` |
| `title_text`            | The main title or heading displayed in the alert.                                                     | `string`                                      |
| `description`           | A short description or message displayed in the alert.                                                | `string`                                      |
| `button_text`           | Text for a button inside the alert                                                                    | `string`                                      |
| `close_button_name`     | Name attribute for the close button                                                                   | `string`                                      |
| `custom_class`          | Allows adding a custom CSS class for additional styling.                                              | `string`                                      |
| `component_mode`        | Provides a way to define specific component behavior or appearance (e.g., dark mode or compact mode). | `string`                                      |
| `secondary_button`      | Secondary button text                                                                                 | `string`                                      |
| `secondary_button_link` | URL for the second action button inside the alert. (optional)                                         | `string`                                      |
| `primary_button`        | Primary button text                                                                                   | `string`                                      |
| `primary_button_link`   | URL for the first action button inside the alert. (Optional)                                          | `string`                                      |
| `firstClick`            | A custom click event handler for primary button.                                                      | `(event: MouseEvent) => void`                 |
| `secondClick`           | A custom click event handler for secondary button.                                                    | `(event: MouseEvent) => void`                 |

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FEA4wTLsnzGkTHs5pkEwW%2FAlerts%202%20-%20Anatomy.png?alt=media&amp;token=d97662c5-18ee-4601-bae9-814bed3ad3d5" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Lead Icon**: Positioned to the left of the alert title, the lead icon provides a visual cue about the nature of the alert (e.g., information, warning, or error). This icon helps users quickly recognize the alert type, enhancing clarity.

**Title**: The main label for the alert, summarizing the purpose of the message. It provides a clear and concise headline, drawing attention to the alert's content.

**Message Body**: Located below the title, the message body contains additional information or details about the alert. This text provides context, helping users understand the specifics of the alert.

**Close Icon**: Positioned in the top right corner, the close icon allows users to dismiss the alert. This feature provides users with control over the visibility of the alert, making it dismissible when no longer needed.

**Primary Button**: A prominent action button within the alert, often used for the main call-to-action related to the alert. It encourages users to take the primary action required by the alert message.

**Secondary Button**: A secondary action button that offers an alternative choice or a less critical action. Positioned next to the primary button, it gives users an additional option for interaction.

***

## Dos and Don'ts

| Dos                                                                                      | Don'ts                                                                                      |
| ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
| Use alert banners to display important messages that require immediate user attention.   | Don't use alert banners for non-critical information that doesn't require immediate action. |
| Label the alert banner clearly to indicate its purpose.                                  | Avoid using ambiguous or unclear labels for alert banners.                                  |
| Include an icon to visually represent the type of alert (e.g., error, warning, success). | Don't overcrowd the alert banner with too many elements.                                    |
| Ensure the alert banner is large enough to be easily noticeable.                         | Don't make the alert banner too small or easy to overlook.                                  |
| Provide clear action buttons if the alert requires user interaction.                     | Don't include action buttons if the alert does not require any user action.                 |
| Use appropriate colors to differentiate between types of alerts.                         | Don't rely solely on color to convey the message; include text as well.                     |
| Ensure alert banners are dismissible if they are not critical.                           | Don't force users to dismiss critical alerts manually.                                      |
| Keep consistent styling and spacing across all alert banners in the application.         | Don't use inconsistent styles that may confuse users.                                       |


# Attach File

Attach file fields are used to allow users to upload files from their device.

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FUUJRVdAxotl7UqE6dhdp%2FAttach%20File%202%20-%20Overview.png?alt=media&amp;token=22b4daf8-7fe2-4e02-ab11-5eefd0efc12e" alt=""><figcaption></figcaption></figure>

## Usage

### **When to Use This Component**

Attach file fields are used in forms or other input scenarios where users need to provide files, such as documents, images, or other file types. They are ideal for applications that require file uploads as part of processes like submitting forms, attaching documents, or uploading images.

### **How It Works**

An attach file field component typically includes a label, a button to open the file picker dialog, and a display area to show the selected file name. Optional elements, such as placeholder text and helper text, can provide guidance to the user. The component can also display various states to reflect its status (e.g., focused, filled, error). The attach file field ensures users can easily select and upload files.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-attach-file 
    label="Attach File"
    place_holder="No File Selected"
    upload_button_text="Choose File"
    helper_text="Helper or footer text"
    success_text="Successfully uploaded"
    error_message=""
    validation_id="validationId"
    file_size_error_message="File size should not exceed {max} MB"
    max_file_size="200"
    size="default"
    validation_type="normal"
    input_type="normal"
    custom_class=""
    component_mode=""
    input_id="input"
    button_id="button"
    delete_button_id="clearFile"
    aria_label="input"
    button_aria_label="button"
    button_name="button"
    input_name="input"
    accept=".pdf,.docx"
    oninput=""
></dda-attach-file>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaAttachFile
    label="Attach File"
    place_holder="No File Selected"
    upload_button_text="Choose File"
    helper_text="Helper or footer text"
    success_text="Successfully uploaded"
    error_message=""
    validation_id="validationId"
    file_size_error_message="File size should not exceed {max} MB"
    max_file_size="200"
    size="default"
    validation_type="normal"
    input_type="normal"
    custom_class=""
    component_mode=""
    input_id="input"
    button_id="button"
    delete_button_id="clearFile"
    aria_label="input"
    button_aria_label="button"
    button_name="button"
    input_name="input"
    accept=".pdf,.docx"
    oninput=""
></DdaAttachFile>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaAttachFile
    label="Attach File"
    place_holder="No File Selected"
    upload_button_text="Choose File"
    helper_text="Helper or footer text"
    success_text="Successfully uploaded"
    error_message=""
    validation_id="validationId"
    file_size_error_message="File size should not exceed {max} MB"
    max_file_size="200"
    size="default"
    validation_type="normal"
    input_type="normal"
    custom_class=""
    component_mode=""
    input_id="input"
    button_id="button"
    delete_button_id="clearFile"
    aria_label="input"
    button_aria_label="button"
    button_name="button"
    input_name="input"
    accept=".pdf,.docx"
    oninput=""
></DdaAttachFile>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-attach-file
    label="Attach File"
    place_holder="No File Selected"
    upload_button_text="Choose File"
    helper_text="Helper or footer text"
    success_text="Successfully uploaded"
    error_message=""
    validation_id="validationId"
    file_size_error_message="File size should not exceed {max} MB"
    max_file_size="200"
    size="default"
    validation_type="normal"
    input_type="normal"
    custom_class=""
    component_mode=""
    input_id="input"
    button_id="button"
    delete_button_id="clearFile"
    aria_label="input"
    button_aria_label="button"
    button_name="button"
    input_name="input"
    accept=".pdf,.docx"
    oninput=""
></dda-attach-file>
```

{% endtab %}
{% endtabs %}

### Properties

| Property                  | Description                                                                                                                                                                       | Type     |
| ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| `aria_label`              | The accessible label for the file input field.                                                                                                                                    | `string` |
| `button_aria_label`       | The accessible label for the remove file button.                                                                                                                                  | `string` |
| `button_id`               | The unique identifier for the upload file button.                                                                                                                                 | `string` |
| `delete_button_id`        | The unique identifier for the delete file button.                                                                                                                                 | `string` |
| `component_mode`          | Defines a mode for component behavior                                                                                                                                             | `string` |
| `custom_class`            | Additional CSS classes to apply for custom styling.                                                                                                                               | `string` |
| `error_message`           | An error message displayed if validation fails.                                                                                                                                   | `string` |
| `helper_text`             | A small helper message displayed below the file input for additional guidance.                                                                                                    | `string` |
| `input_id`                | The unique identifier for the file input field.                                                                                                                                   | `string` |
| `input_type`              | Specifies the type of input field styling (if applicable).                                                                                                                        | `string` |
| `label`                   | The label text displayed above the file input field.                                                                                                                              | `string` |
| `size`                    | Specifies the size of the input field.                                                                                                                                            | `string` |
| `validation_type`         | Determines the validation styling applied to the input (e.g., `'error'`, `'success'`).                                                                                            | `string` |
| `button_name`             | Name of the 'Choose File' button                                                                                                                                                  | `string` |
| `input_name`              | Name of the input field                                                                                                                                                           | `string` |
| `validation_id`           | The `validation_id="validationId"` attribute links the input field to a validation message element, helping with accessibility and displaying error or helper messages correctly. | `string` |
| `place_holder`            | Placeholder text shown when no file is selected.                                                                                                                                  | `string` |
| `upload_button_text`      | ext displayed on the file upload button.                                                                                                                                          | `string` |
| `success_text`            | Message shown upon successful file upload.                                                                                                                                        | `string` |
| `file_size_error_message` | Message shown when the uploaded file exceeds the maximum size. Use `{max}` as a placeholder for size in MB.                                                                       | `string` |
| `max_file_size`           | The maximum allowed file size in megabytes.                                                                                                                                       | `string` |
| `accept`                  | File types accepted for upload (e.g. `.pdf,.docx`).                                                                                                                               | `string` |
| `oninput`                 | JS handler called during file input (not typically recommended as string).                                                                                                        | `string` |

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FNjdd4BDjWdJRkNDFqIVw%2FAttach%20File%202%20-%20Anatomy.png?alt=media&amp;token=15ca30cc-fbbd-4eb0-844f-3ff6181a156f" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Label**: Positioned above the file selection area, the label indicates the purpose of the component, prompting users to attach a file. It provides context for the file input field.

**Status Text**: Displays the current status of the file selection, such as "No File Selected" when no file has been chosen. This text updates to show the selected file name, helping users confirm their selection.

**Lead Icon**: Positioned to the left of the helper or footer text, the lead icon provides an additional visual cue, often indicating information or help related to the file attachment process.

**Caption**: Positioned below the file selection area, the caption provides additional information, instructions, or tips regarding the file upload, guiding users as they interact with the component.

**Button**: The main action button labeled "Choose File" initiates the file selection dialog. This button allows users to browse and select a file from their device for attachment.

### Dos and Don'ts

| Dos                                                                                                    | Don'ts                                                                           |
| ------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------- |
| Use attach file fields to allow users to upload files in a standardized format.                        | Don't use attach file fields for text inputs or other non-file inputs.           |
| Label the attach file field clearly to indicate its purpose.                                           | Avoid using ambiguous or unclear labels for attach file fields.                  |
| Include placeholder text to guide users on the expected file format.                                   | Don't rely solely on placeholder text for essential instructions.                |
| Provide helper text to explain any specific file requirements or limitations.                          | Don't overload the attach file field with too much information.                  |
| Ensure the attach file button is large enough to be easily tappable or clickable.                      | Avoid making the attach file button too small to interact with comfortably.      |
| Validate the uploaded file and provide clear error messages when the file format or size is incorrect. | Don't provide generic error messages that don't help users understand the issue. |
| Keep consistent styling and spacing across all attach file fields in the application.                  | Don't use inconsistent styles that may confuse users.                            |


# Avatar

Avatar visually represents a user through a profile image or initials, helping to identify individuals within the interface.

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FzY9OTGzAizxWHNAZ3DdC%2FAvatar%20-%20Overview.png?alt=media&amp;token=86a5a093-4286-44e0-9db3-d046bd69ee44" alt=""><figcaption></figcaption></figure>

## Usage

### **When to Use This Component**

Avatars are used in user interfaces to visually represent individuals, groups, or objects. They are ideal for user profiles, messaging apps, social media, dashboards, and any interface requiring visual identification of users or entities.

### **How It Works**

An avatar component displays a graphical representation, such as a photo, icon, or text (e.g., initials), within a shape (typically a circle or rounded square). Avatars can also include status indicators to show user status (e.g., online, verified). The component is configurable to display various sizes and styles based on the application’s needs.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-avatar
    type="photo"
    size="md"
    design="default"
    rounded="circle"
    src="https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg"
    icon="material-icons"
    text="AB"
    options='["Option 1","Option 2","Option 3"]'
    notification_number="20"
    custom_class=""
    component_mode=""
    aria_label="avatar"
    button_id="button"
    button_name="button"
    dropdown_enabled="true"  
>
</dda-avatar>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaAvatar
    type="photo"
    size="md"
    design="default"
    rounded="circle"
    src="https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg"
    icon="material-icons"
    text="AB"
    options='["Option 1","Option 2","Option 3"]'
    notification_number="20"
    custom_class=""
    component_mode=""
    aria_label="avatar"
    button_id="button"
    button_name="button"
    dropdown_enabled="true"
>
</DdaAvatar>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaAvatar
    type="photo"
    size="md"
    design="default"
    rounded="circle"
    src="https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg"
    icon="material-icons"
    text="AB"
    options='["Option 1","Option 2","Option 3"]'
    notification_number="20"
    custom_class=""
    component_mode=""
    aria_label="avatar"
    button_id="button"
    button_name="button"
    dropdown_enabled="true"
>
</DdaAvatar>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-avatar
    type="photo"
    size="md"
    design="default"
    rounded="circle"
    src="https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg"
    icon="material-icons"
    text="AB"
    options='["Option 1","Option 2","Option 3"]'
    notification_number="20"
    custom_class=""
    component_mode=""
    aria_label="avatar"
    button_id="button"
    button_name="button"
    dropdown_enabled="true"
>
</dda-avatar>
```

{% endtab %}
{% endtabs %}

### Properties

| Property                     | Description                                                                              | Type                                                               |
| ---------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
| `type`                       | Defines the avatar type (`photo`, `icon`, or `text`).                                    | `"icon" \| "photo" \| "text"`                                      |
| `size`                       | Sets the avatar size (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`).                              | `"lg" \| "md" \| "sm" \| "xl" \| "xs" \| "xxl"`                    |
| `design`                     | Determines the avatar design (`default`, `status`, `verified`, `story`, `notification`). | `"default" \| "notification" \| "status" \| "story" \| "verified"` |
| `rounded`                    | Specifies the avatar shape as `square` or `circle`.                                      | `"circle" \| "square"`                                             |
| `src`                        | Image URL for `photo` type avatars.                                                      | `string`                                                           |
| `icon`                       | CSS class for the icon in `icon` type avatars.                                           | `string`                                                           |
| `text`                       | Text displayed for `text` type avatars.                                                  | `string`                                                           |
| `options`                    | JSON string containing dropdown options.                                                 | `string`                                                           |
| `notification_number`        | Number displayed in the notification badge.                                              | `number`                                                           |
| `custom_class`               | Adds custom CSS classes for extra styling.                                               | `string`                                                           |
| `component_mode`             | Defines a special mode (`dark`, `light`).                                                | `string`                                                           |
| `aria_label`                 | ARIA label for accessibility and screen readers.                                         | `string`                                                           |
| `button_id`                  | Unique ID assigned to the dropdown button.                                               | `string`                                                           |
| `button_name`                | Name attribute for the buttons in avatar dropdown                                        | `string`                                                           |
| <kbd>dropdown\_enabled</kbd> | boolean for disable / enable for the options dropdown.                                   | `boolean`                                                          |

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FDiid14m6cHWoiELNetKC%2FAvatar%20-%20Anatomy.png?alt=media&amp;token=611a9661-1337-47a1-aa80-a34ac9cb947e" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Image**: Displays the user’s profile picture, icon or text, providing visual identification. It helps users quickly recognize the individual represented.

**Badge**: Positioned in the top right corner of the avatar, the badge displays a notification count or status, such as "20+." This provides users with information at a glance, such as unread messages or notifications related to the user.

**Status Icon**: Positioned at the bottom of the avatar, the status icon indicates the user’s current status (e.g., online, offline, busy). It is often color-coded, enhancing visibility and making it easy to understand the user’s availability.

### Dos and Don'ts

| Dos                                                                       | Don'ts                                                    |
| ------------------------------------------------------------------------- | --------------------------------------------------------- |
| Use avatars to visually represent users or objects.                       | Don't use avatars for text-heavy content.                 |
| Ensure avatars are large enough to be easily recognizable.                | Don't make avatars too small to identify.                 |
| Label avatars clearly if additional context is needed.                    | Avoid using ambiguous or unclear avatars without context. |
| Provide status indicators to show user status when relevant.              | Don't overload avatars with too many status indicators.   |
| Use consistent styling and spacing across all avatars in the application. | Don't use inconsistent styles that may confuse users.     |
| Update avatar images in real-time if they change.                         | Don't use outdated or incorrect images.                   |


# Breadcrumbs

Breadcrumbs provide a navigation aid that shows users their current location within a site's hierarchy, allowing them to trace their path back to previous pages easily.

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2F94aeRnfNVvEOlHQSP4Ji%2FBreadcrumbs%202%20-%20Overview.png?alt=media&amp;token=ea7774d7-22b0-4705-a386-732e2a33b69b" alt=""><figcaption></figcaption></figure>

## Usage

### **When to Use This Component**

Breadcrumbs are used in websites and applications to provide users with a navigational trail from the current page back to the homepage or root of the content hierarchy. They are ideal for complex structures with multiple levels of navigation, helping users understand their current position and navigate easily.

### **How It Works**

A breadcrumb component typically displays a series of links representing the path from the homepage to the current page. Each link corresponds to a level in the hierarchy, enabling users to navigate back to previous levels. Breadcrumbs can feature icons, text, or a combination of both to represent each level, with dividers visually separating the links for clarity.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-breadcrumb
    design="text"
    separator="chevron_right"
    custom_class=""
    component_mode=""
    data-breadcrumbs='[{"text":"Home","icon":"home","url":"/"},
                        {"text":"Library","icon":"menu_book","url":"/library"},
                        {"text":"Data","icon":"storage"}]'
></dda-breadcrumb>
```

{% endtab %}

{% tab title="React" %}

```jsx
<dda-breadcrumb
    design="text"
    separator="chevron_right"
    custom_class=""
    component_mode=""
    data-breadcrumbs='[{"text":"Home","icon":"home","url":"/"},
                        {"text":"Library","icon":"menu_book","url":"/library"},
                        {"text":"Data","icon":"storage"}]'
></dda-breadcrumb>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
  <DdaBreadcrumb
            design="text"
            separator="chevron-right"
            custom_class=""
            component_mode=""
            data-breadcrumbs='[{"text":"Home","icon":"home","url":"/"},{"text":"Library","icon":"menu_book","url":"/library"},{"text":"Data","icon":"storage","url":"/data"}]'
        ></DdaBreadcrumb>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-breadcrumb
    design="text"
    separator="chevron-right"
    custom_class=""
    component_mode=""
    data-breadcrumbs='[{"text":"Home","icon":"home","url":"/"},{"text":"Library","icon":"menu_book","url":"/library"},{"text":"Data","icon":"storage","url":"/data"}]'
></dda-breadcrumb>
```

{% endtab %}
{% endtabs %}

### Properties

| Property                 | Description                                                                                                                                                                                                                               | Type                              |
| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- |
| `component_mode`         | Defines an optional mode/class for additional styling or behavior customization.                                                                                                                                                          | `string`                          |
| `custom_class`           | Allows the user to add custom CSS classes to the breadcrumb navigation for additional styling.                                                                                                                                            | `string`                          |
| `design`                 | <p></p><p>Defines the appearance of breadcrumb items.</p><ul><li><code>'text'</code>: Displays only text.</li><li><code>'icon-text'</code>: Displays both an icon and text.</li><li><code>'icon'</code>: Displays only an icon.</li></ul> | `"icon" \| "icon-text" \| "text"` |
| `separator`              | Determines the icon used as the separator between breadcrumb items.                                                                                                                                                                       | `"chevron_right" \| "pen_size_2"` |
| navigation/custom router | <p>To add custom router you can use the useNavigator as "true" and use the event listener for navigatorClick<br><br><a href="/developers/navigation-routers">Click here</a> for More details</p>                                          |                                   |

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FhCQpPqnazoJiytoM2ZV0%2FBreadcrumbs%202%20-%20Anatomy.png?alt=media&amp;token=952f4b6e-ea5b-4675-9024-03f5718bd17c" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Lead Icon**: Positioned at the beginning of the breadcrumb trail, the lead icon (e.g., a home icon) visually represents the starting point or main category in the navigation path. It provides a quick visual cue for users to identify the home or root page.

**Label**: Each label in the breadcrumb trail represents a level or section within the navigation hierarchy, showing users their current location relative to previous pages. Labels guide users through the navigation path, helping them understand how they reached the current page.

**Trail Icon**: Positioned at the end of the breadcrumb trail, the trail icon represents the final destination or current page within the navigation path. This icon provides a visual indicator of the endpoint, helping users identify the active or last section in the breadcrumb sequence.

## Dos and Don'ts

| Dos                                                                              | Don'ts                                                               |
| -------------------------------------------------------------------------------- | -------------------------------------------------------------------- |
| Use breadcrumbs to show the user's location within the content hierarchy.        | Don't use breadcrumbs for single-level navigation.                   |
| Label each breadcrumb link clearly to indicate its destination.                  | Avoid using ambiguous or unclear labels for breadcrumb links.        |
| Ensure breadcrumb links are large enough to be easily tappable or clickable.     | Don't make breadcrumb links too small to interact with comfortably.  |
| Use consistent styling and spacing across all breadcrumbs in the application.    | Don't use inconsistent styles that may confuse users.                |
| Provide clear visual feedback when a breadcrumb link is hovered over or clicked. | Don't leave users guessing whether their interaction was successful. |
| Use appropriate dividers to separate breadcrumb links visually.                  | Don't overcrowd breadcrumbs with too many elements.                  |


# Buttons

Buttons are fundamental interactive elements used in user interfaces to trigger actions, submit forms, and navigate through different parts of an application


# Button

Text button is used to initiate actions on a page or form.

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2Fb573Na5Ko3NyMClDAfZT%2FButtons-Overview.png?alt=media&amp;token=c864963f-edec-4743-9643-63c237c9aeed" alt=""><figcaption></figcaption></figure>

## Usage

### **When to Use This Component**

Buttons enable users to initiate an action or command with a click or tap. They are used to start actions, apply functions to selected objects, and activate or deactivate features. Buttons typically trigger an immediate response and can be placed within dialogs, forms, modal windows, and other containers.

### **How It Works**

A button’s label or text description clearly conveys its purpose, guiding users in performing actions such as starting an application or saving information. Buttons serve as a fundamental building block of our products. While the secondary button variant is most commonly used, other variants are available to indicate different levels of hierarchy or specific functionalities.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-button
    button_type="button"
    button_color="default-primary"
    start_icon="sentiment_satisfied"
    button_text="Button"
    end_icon="arrow_forward"
    button_id="default-primary-btn"
    aria_label="default primary button"
    button_name="defaultPrimaryButton"
    value="default-primary-value"
    button_shape="default"
    size="md"
    gap="1"
    disabled="false"
    custom_class=""
    component_mode=""
    onclick="console.log('native click')"
></dda-button>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaButton
    button_type="button"
    button_color="default-primary"
    start_icon="sentiment_satisfied"
    button_text="Button"
    end_icon="arrow_forward"
    button_id="default-primary-btn"
    aria_label="default primary button"
    button_name="defaultPrimaryButton"
    value="default-primary-value"
    button_shape="default"
    size="md"
    gap="1"
    disabled="false"
    custom_class=""
    component_mode=""
    onclick="console.log('native click')"
></DdaButton>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaButton
    button_type="button"
    button_color="default-primary"
    start_icon="sentiment_satisfied"
    button_text="Button"
    end_icon="arrow_forward"
    button_id="default-primary-btn"
    aria_label="default primary button"
    button_name="defaultPrimaryButton"
    value="default-primary-value"
    button_shape="default"
    size="md"
    gap="1"
    disabled="false"
    custom_class=""
    component_mode=""
    onclick="console.log('native click')"
></DdaButton>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-button
    button_type="button"
    button_color="default-primary"
    start_icon="sentiment_satisfied"
    button_text="Button"
    end_icon="arrow_forward"
    button_id="default-primary-btn"
    aria_label="default primary button"
    button_name="defaultPrimaryButton"
    value="default-primary-value"
    button_shape="default"
    size="md"
    gap="1"
    disabled="false"
    custom_class=""
    component_mode=""
    onclick="console.log('native click')"
></dda-button>
```

{% endtab %}
{% endtabs %}

### Properties

| Property                                                                                                                                                               | Descriptions                                                                                                                                                                                                                                                                                                         | Type                          |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- |
| `button_type`                                                                                                                                                          | Specifies the button type. Common values: `"button"`, `"submit"`, `"reset".`                                                                                                                                                                                                                                         | `string`                      |
| `button_color`                                                                                                                                                         | <p>Defines the button color variant. Example values: <code>'default-primary'</code> , <code>'default-secondary'</code> , <code>'default-tertiary'</code> , <code>'default-link'</code> , <code>'error-primary'</code> , <code>'error-secondary'</code> , <code>'error-tertiary'</code> , <code>'error-link'</code> , |                               |
| <br><code>'onsurface-primary'</code> , <code>'onsurface-secondary'</code> , <code>'onsurface-tertiary'</code> , <code>'onsurface-link'</code> ,                        |                                                                                                                                                                                                                                                                                                                      |                               |
| <br><code>'secondary'</code> , <code>'success'</code> , <code>'warning'</code> , <code>'surface'</code> , <code>'surface-variant'</code> , <code>'disabled'</code></p> | `string`                                                                                                                                                                                                                                                                                                             |                               |
| `start_icon`                                                                                                                                                           | The name of the icon to display at the start of the button. Uses Material Icons.                                                                                                                                                                                                                                     | `string`                      |
| `button_text`                                                                                                                                                          | The text for button                                                                                                                                                                                                                                                                                                  | `string`                      |
| `end_icon`                                                                                                                                                             | The name of the icon to display at the end of the button. Uses Material Icons.                                                                                                                                                                                                                                       | `string`                      |
| `button_id`                                                                                                                                                            | Unique identifier for the button element.                                                                                                                                                                                                                                                                            | `string`                      |
| `aria_label`                                                                                                                                                           | Accessibility label for screen readers.                                                                                                                                                                                                                                                                              | `string`                      |
| `button_name`                                                                                                                                                          | Name attribute for the button component                                                                                                                                                                                                                                                                              | `string`                      |
| `value`                                                                                                                                                                | Value of the button                                                                                                                                                                                                                                                                                                  | `string`                      |
| `button_shape`                                                                                                                                                         | Defines the button's shape. Example values: `'rounded'`, `'square'`, `'pill'`.                                                                                                                                                                                                                                       | `string`                      |
| `size`                                                                                                                                                                 | cifies the button size. Example values: `'sm'`, `'md'`, `'lg'`.                                                                                                                                                                                                                                                      | `string`                      |
| `gap`                                                                                                                                                                  | Specifies the spacing between elements inside the button. `1`  ,  `2`                                                                                                                                                                                                                                                | `number`                      |
| `disabled`                                                                                                                                                             | Determines if the button should be disabled.                                                                                                                                                                                                                                                                         | `boolean`                     |
| `custom_class`                                                                                                                                                         | Allows adding a custom CSS class to the button for additional styling.                                                                                                                                                                                                                                               | `string`                      |
| `component_mode`                                                                                                                                                       | Used for setting a mode-related styling or behavior.                                                                                                                                                                                                                                                                 | `string`                      |
| `onclick`                                                                                                                                                              | Function to be executed when the button is clicked.                                                                                                                                                                                                                                                                  | `(event: MouseEvent) => void` |

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FwwDgwnDtV75fTA2k2cYf%2FButtons-Anatomy.png?alt=media&amp;token=16eef918-066b-4ed5-813c-418d389cd587" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Lead Icon**: Positioned to the left of the button text, the lead icon visually represents the action or purpose of the button. It provides a quick visual cue that helps users understand the button's function at a glance.

**Text**: The main label of the button, describing the action that will be performed when the button is clicked. Clear and concise text improves usability by indicating the button’s purpose.

**Trail Action**: Positioned to the right of the button text, the trail action (such as an arrow) further emphasizes the direction or nature of the action. It visually reinforces the button’s function, often indicating forward movement or progression.

## Dos and Don'ts

| Dos                                                                                                          | Don'ts                                                                                                          |
| ------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------- |
| Use text buttons for less prominent actions or secondary actions.                                            | Don't use text buttons for primary actions or actions that require high visibility.                             |
| Ensure text buttons have sufficient touch target size and padding for accessibility.                         | Don't use text buttons in tight spaces where they might be difficult to interact with.                          |
| Use clear, descriptive text that indicates the action of the button.                                         | Avoid using generic labels like "Click Here" or "Submit" that don't provide specific context.                   |
| Ensure text buttons meet color contrast requirements for readability and accessibility.                      | Don't rely solely on color to indicate the button's state or importance; consider using additional visual cues. |
| Use text buttons in contexts where minimal visual emphasis is needed, such as in toolbars or inline actions. | Don't use text buttons in contexts where visual prominence and strong call-to-action are required.              |
| Provide adequate spacing around text buttons to avoid accidental clicks on adjacent elements.                | Avoid placing text buttons too close to other interactive elements, which can cause usability issues.           |
| Use consistent styling for text buttons to maintain a cohesive design system.                                | Don't use inconsistent styles for text buttons across different parts of the application.                       |
| Consider the text length and avoid truncation or wrapping of button text.                                    | Don't use overly long text that might not fit within the button's design constraints.                           |


# Icon Button

Icon Button is used to perform an action with an icon, without requiring a text label. It is often used for actions like editing, deleting, or navigating.

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FiA3m1is1WM1RA31DTTti%2FIcon%20Buttons-Overview.png?alt=media&amp;token=5de39d2f-1ded-4fc1-aa22-f2124ff2a7aa" alt=""><figcaption></figcaption></figure>

## Usage

### **When to Use This Component**

Icon buttons allow users to perform quick actions using only an icon, making them ideal for spaces like toolbars, headers, or mobile interfaces where space is limited. They’re best suited for familiar actions (e.g., "edit," "delete") .&#x20;

### **How It Works**

An icon button consists of a single icon within a button shape, designed to convey its purpose through the icon alone. Icon buttons enhance usability by providing efficient, space-saving interactions. Each button has distinct visual states (hover, active, disabled) and can be styled to indicate hierarchy or function, supporting user navigation and interaction.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-button
    button_type="button"
    button_color="default-primary"
    start_icon="sentiment_satisfied"
    button_id="icon-button"
    aria_label="icon button"
    button_name="iconButton"
    value="icon-value"
    icon_button_shape="default"
    size="md"
    disabled="false"
    custom_class=""
    component_mode=""
    onclick="console.log('native click')"
></dda-button>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaButton
    button_color="default-primary"
    start_icon="sentiment_satisfied"
    button_id="icon-button"
    aria_label="icon button"
    button_name="iconButton"
    value="icon-value"
    icon_button_shape="default"
    size="md"
    disabled="false"
    custom_class=""
    component_mode=""
    onclick="console.log('native click')"
></DdaButton>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaButton
    button_color="default-primary"
    start_icon="sentiment_satisfied"
    button_id="icon-button"
    aria_label="icon button"
    button_name="iconButton"
    value="icon-value"
    icon_button_shape="default"
    size="md"
    disabled="false"
    custom_class=""
    component_mode=""
    onclick="console.log('native click')"
></DdaButton>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-button
    button_color="default-primary"
    start_icon="sentiment_satisfied"
    button_id="icon-button"
    aria_label="icon button"
    button_name="iconButton"
    value="icon-value"
    icon_button_shape="default"
    size="md"
    disabled="false"
    custom_class=""
    component_mode=""
    onclick="console.log('native click')"
></dda-button>
```

{% endtab %}
{% endtabs %}

## Properties

| Property                                                                                                                                                               | Descriptions                                                                                                                                                                                                                                                                                                         | Type                          |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- |
| `button_type`                                                                                                                                                          | Specifies the button type. Common values: `"button"`, `"submit"`, `"reset".`                                                                                                                                                                                                                                         | `string`                      |
| `button_color`                                                                                                                                                         | <p>Defines the button color variant. Example values: <code>'default-primary'</code> , <code>'default-secondary'</code> , <code>'default-tertiary'</code> , <code>'default-link'</code> , <code>'error-primary'</code> , <code>'error-secondary'</code> , <code>'error-tertiary'</code> , <code>'error-link'</code> , |                               |
| <br><code>'onsurface-primary'</code> , <code>'onsurface-secondary'</code> , <code>'onsurface-tertiary'</code> , <code>'onsurface-link'</code> ,                        |                                                                                                                                                                                                                                                                                                                      |                               |
| <br><code>'secondary'</code> , <code>'success'</code> , <code>'warning'</code> , <code>'surface'</code> , <code>'surface-variant'</code> , <code>'disabled'</code></p> | `string`                                                                                                                                                                                                                                                                                                             |                               |
| `start_icon`                                                                                                                                                           | The name of the icon to display at the start of the button. Uses Material Icons.                                                                                                                                                                                                                                     | `string`                      |
| `button_id`                                                                                                                                                            | Unique identifier for the button element.                                                                                                                                                                                                                                                                            | `string`                      |
| `aria_label`                                                                                                                                                           | Accessibility label for screen readers.                                                                                                                                                                                                                                                                              | `string`                      |
| `button_name`                                                                                                                                                          | Name attribute for the button component                                                                                                                                                                                                                                                                              | `string`                      |
| `value`                                                                                                                                                                | Value of the button                                                                                                                                                                                                                                                                                                  | `string`                      |
| `icon_button_shape`                                                                                                                                                    | Defines the shape of an icon-only button.                                                                                                                                                                                                                                                                            | `string`                      |
| `size`                                                                                                                                                                 | cifies the button size. Example values: `'sm'`, `'md'`, `'lg'`.                                                                                                                                                                                                                                                      | `string`                      |
| `clickHandler`                                                                                                                                                         | Function to be executed when the button is clicked.                                                                                                                                                                                                                                                                  | `(event: MouseEvent) => void` |
| `disabled`                                                                                                                                                             | Determines if the button should be disabled.                                                                                                                                                                                                                                                                         | `boolean`                     |
| `custom_class`                                                                                                                                                         | Allows adding a custom CSS class to the button for additional styling.                                                                                                                                                                                                                                               | `string`                      |
| `component_mode`                                                                                                                                                       | Used for setting a mode-related styling or behavior.                                                                                                                                                                                                                                                                 | `string`                      |
| `onclick`                                                                                                                                                              | unction to be executed when the button is clicked.                                                                                                                                                                                                                                                                   | `(event: MouseEvent) => void` |

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FdrfymmxCrJCHmIEA6K9H%2FIcon%20Buttons%20-%20Anatomy.png?alt=media&amp;token=98b1d124-99b6-4830-9555-5bb33970c507" alt=""><figcaption></figcaption></figure>

### Anatomy Option

**Icon**: The central element of the button, the icon visually represents the action associated with the button. It allows users to quickly understand the button's purpose, especially in interfaces where space is limited. The icon itself is the primary visual cue, making the button intuitive and easy to recognize.

## Dos and Don'ts

| Dos                                                                                   | Don'ts                                                                                        |
| ------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
| Use clear and recognizable icons that represent the action effectively.               | Don’t overcrowd the interface with too many Icon Buttons; prioritize actions.                 |
| Ensure the button is easily tappable or clickable, with sufficient spacing around it. | Avoid using ambiguous or unclear icons.                                                       |
| Provide tooltips or ARIA labels for icons that might not be universally understood.   | Don’t rely solely on color to indicate different button states; use shapes and icons as well. |
| Use appropriate variants to indicate the button's importance or state.                | Don’t use icons without providing textual alternatives for accessibility purposes.            |
| Ensure icons have sufficient contrast against their background.                       | Avoid inconsistent usage of icon button styles across similar actions.                        |


# Link Button

A Link Button is styled as a button but acts like a hyperlink, guiding users to other pages or resources. It’s commonly used for navigational actions such as "Learn More" or "Download".

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2Frg7nwJxcHWw5V6PTUHss%2FLink-Buttons-Overview.png?alt=media&amp;token=ee45a8e9-0a1e-4d14-99f9-f7655a765c33" alt=""><figcaption></figcaption></figure>

## Usage

### **When to Use This Component**

Link buttons facilitate straightforward navigation, using text to direct users to different pages or resources. They are perfect for contexts like footers or menu items where clear labeling is crucial. Typically used for actions such as "View More" or "Sign Up", they guide users effectively through a digital environment.

### **How It Works**

A Link Button consists of clear, concise text within a button outline, designed to direct users with straightforward language. It optimizes navigation by clearly stating its function, such as "Learn More" or "Register." Link Buttons feature distinct visual states (hover, active, disabled) and can be styled to match the design hierarchy, facilitating easy user interaction and guidance through different sections or pages.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-link-button
    button_color="default-primary"
    start_icon="sentiment_satisfied"
    link_button_text="Button"
    end_icon="arrow_forward"
    button_id="link-button"
    href="#"
    aria_label="link-Button"
    button_shape="default"
    size="md"
    gap="1"
    target=""
    rel="noopener noreferrer"
    custom_class=""
    component_mode=""
    onclick="console.log('clicked')"
></dda-link-button>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaLinkButton
    button_color="default-primary"
    start_icon="sentiment_satisfied"
    link_button_text="Button"
    end_icon="arrow_forward"
    button_id="link-button"
    href="#"
    aria_label="link-Button"
    button_shape="default"
    size="md"
    gap="1"
    target=""
    rel="noopener noreferrer"
    custom_class=""
    component_mode=""
    onclick="console.log('clicked')"
></DdaLinkButton>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaLinkButton
    button_color="default-primary"
    start_icon="sentiment_satisfied"
    link_button_text="Button"
    end_icon="arrow_forward"
    button_id="link-button"
    href="#"
    aria_label="link-Button"
    button_shape="default"
    size="md"
    gap="1"
    target=""
    rel="noopener noreferrer"
    custom_class=""
    component_mode=""
    onclick="console.log('clicked')"
></DdaLinkButton>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-link-button
    button_color="default-primary"
    start_icon="sentiment_satisfied"
    link_button_text="Button"
    end_icon="arrow_forward"
    button_id="link-button"
    href="#"
    aria_label="link-Button"
    button_shape="default"
    size="md"
    gap="1"
    target=""
    rel="noopener noreferrer"
    custom_class=""
    component_mode=""
    onclick="console.log('clicked')"
></dda-link-button>
```

{% endtab %}
{% endtabs %}

### Properties

| Property           | Description                                                                                                                                                           | Type       |
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
| `button_color`     | Defines the color theme of the button. Common values could be `'primary'`, `'error'`, or any custom color class.                                                      | `string`   |
| `start_icon`       | A string representing the icon class to be displayed at the start of the button (before any text). It uses material icon classes by default.                          | `string`   |
| `link_button_text` | The text content of the button.                                                                                                                                       | `string`   |
| `end_icon`         | A string representing the icon class to be displayed at the end of the button (after any text). It uses material icon classes by default.                             | `string`   |
| `button_id`        | A string that sets the `id` attribute of the button, allowing for unique identification in the DOM.                                                                   | `string`   |
| `href`             | A string that defines the link for the button. This makes the button behave like an anchor tag (`<a>`). Defaults to `"#"` if not specified.                           | `string`   |
| `aria_label`       | A string that defines the accessible label for the button. It helps with accessibility, especially for screen readers.                                                | `string`   |
| `button_shape`     | A string to define the shape of the button, like `'round'`, `'square'`, or any custom class for shaping.                                                              | `string`   |
| `size`             | A string that defines the size of the button. Possible values could include `'sm'` (small), `'md'` (medium), or `'lg'` (large).                                       | `string`   |
| `gap`              | A number that defines the spacing between the button content (like text and icons). It adjusts the gap between the start and end icons and any content in the middle. | `number`   |
| `Target`           | pecifies where to open the linked document. E.g., `_blank`, `_self`.                                                                                                  | `string`   |
| `rel`              | Specifies the relationship between the current document and the linked document (important for security when using `_blank`).                                         | `string`   |
| `custom_class`     | A string that allows for a custom CSS class to be applied to the button. Useful for additional styling beyond the predefined options.                                 | `string`   |
| `component_mode`   | A string that can be used to define the mode of the component, for example, a theme or variation of the button.                                                       | `string`   |
| `onClick`          | JavaScript function to execute when the button is clicked.                                                                                                            | `function` |

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FIppQvNzNNAEy9Sd0qiRj%2FLink-Buttons-Anatomy.png?alt=media&amp;token=deb18469-d44e-4161-b342-d1137c904aed" alt=""><figcaption></figcaption></figure>

### Anatomy Option

**Lead Icon**: Positioned at the beginning, the lead icon primes the user on the button's function, offering a visual cue that enhances recognition and usability.

**Text**: The central text on the button conveys the action or intent clearly and directly, guiding the user with explicit instructions or labels.

**Trail Action**: A secondary icon or element at the end, providing additional interaction options or indicating further actions, such as navigation arrows or dropdown indicators.

## Dos and Don'ts

| Dos                                                                                                                                             | Don'ts                                                                                                                                            |
| ----------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| Use descriptive text that clearly indicates where the link will lead, such as "View Account Details" or "Read More About Our Services".         | Avoid using generic text like "Click Here"; use phrases that explain the result of the interaction.                                               |
| Ensure Link Buttons are easy to locate and visually stand out as clickable elements, enhancing navigation.                                      | Do not saturate your interface with Link Buttons; use them sparingly and strategically to guide users without overwhelming them.                  |
| Provide adequate spacing with enough padding and margin around each button to make them easily clickable, especially on mobile devices.         | Avoid inconsistencies in style; ensure that Link Buttons are consistent with the rest of your website or app to keep the user interface cohesive. |
| Highlight interaction by changing the appearance (e.g., underline, color change) on hover or focus to indicate that the text is interactive.    | Do not rely solely on color to differentiate link buttons; consider adding icons or different styles for better distinction.                      |
| Maintain accessibility by using appropriate ARIA roles and properties, and ensure text has high contrast against its background for visibility. | Prevent accessibility issues by not using small font sizes or low-contrast text that can be hard to read for those with visual impairments.       |


# Social Media Buttons

Social Media Login Buttons enable quick login or signup using social media accounts, offering a convenient authentication option.

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2F6I5lcbi8XDc5LYn0bXSQ%2FSocial%20Media%20Buttons-Overview.png?alt=media&amp;token=72843871-5941-4964-8dfb-7e7a24236c62" alt=""><figcaption></figcaption></figure>

## Usage

### **When to Use This Component**

Social Media Login Buttons are ideal for providing users with a quick, familiar login option via their social media accounts. They are commonly used on login or signup pages, offering a seamless alternative to traditional email or password-based authentication.

### **How It Works**

A Social Media Login Button enables users to authenticate by connecting their social media account with a single click or tap. Each button displays the logo of the corresponding social media platform, ensuring instant recognition and a clear understanding of the login method.

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FebuwIRkXWA9knIG7lOi8%2FSocial%20Media%20Buttons-Anatomy.png?alt=media&amp;token=f24f8928-c6c6-4702-ac31-ae762c7ab5a5" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Brand Logo**: Positioned to the left of the button text, the brand logo (e.g., the Apple logo, Google, Facebook) represents the social media or service provider associated with the login. This logo provides quick brand recognition, helping users identify the service they’re using for authentication.

**Text**: The main label of the button, such as "Sign in with Apple," describes the action that will be taken when the button is clicked. This text clarifies the login method, making it easy for users to understand the purpose of the button.

## Dos and Don'ts

| Dos                                                                                   | Don'ts                                                                                                |
| ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
| Use official logos and colors of each social media platform for brand consistency.    | Don’t alter the colors or logos, as this may reduce recognizability and violate brand guidelines.     |
| Ensure clear labeling or tooltip if the icon alone may not be obvious to all users.   | Don’t use social media login buttons as the only login option if users might not have those accounts. |
| Place Social Media Login Buttons in a prominent area on the login or signup page.     | Don’t overcrowd the page with too many social media options; limit to popular platforms.              |
| Provide a visual focus state for keyboard navigation to meet accessibility standards. | Don’t neglect accessibility—ensure buttons are usable with keyboard and screen readers.               |


# Split Button

A Split Button combines a dropdown menu for related options in one compact UI component, allowing quick execution of default tasks and easy access to additional actions.

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FHzIVx4H3miXx3KLfsCEN%2FSplit%20Button%20-%20Overview.png?alt=media&amp;token=9ec133bf-0150-4747-a15f-3e3e1cd90a04" alt=""><figcaption></figcaption></figure>

## Usage

### **When to Use This Component**

Split Buttons are particularly effective in user interfaces where space is at a premium but multiple related actions may be required from a single point. They are ideal for forms, toolbars, or any application context where users might need quick access to primary actions along with related secondary options.

### **How It Works**

A Split Button combines a default action button with a dropdown arrow. Users can click the main part of the button to perform the most common action, or select the dropdown arrow to reveal and select from a list of additional actions. This design allows for both speed in common tasks and flexibility in accessing more complex options, with clear icons or text to indicate the function of each choice.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-split-button
    text_button_type="button"
    button_color="default-primary"
    start_icon="sentiment_satisfied"
    button_text="Button"
    text_button_id="default-primary-btn"
    aria_label="default primary button"
    text_button_name="defaultPrimaryButton"
    value="default-primary-value"
    button_shape="default"
    size="md"
    gap="1"
    disabled="false"
    custom_class=""
    component_mode=""
    onclick="console.log('native click')"
>
  <ul slot="menu">
    <li><a href="#">link-1</a></li>
    <li><a href="#">link-2</a></li>
    <li><button type="button">Button</button></li>
  </ul>
</dda-split-button>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaSplitButton
    text_button_type="button"
    button_color="default-primary"
    start_icon="sentiment_satisfied"
    button_text="Button"
    text_button_id="default-primary-btn"
    aria_label="default primary button"
    text_button_name="defaultPrimaryButton"
    value="default-primary-value"
    button_shape="default"
    size="md"
    gap="1"
    disabled="false"
    custom_class=""
    component_mode=""
    onclick="console.log('native click')"
>
  <ul slot="menu">
    <li><a href="#">link-1</a></li>
    <li><a href="#">link-2</a></li>
    <li><button type="button">Button</button></li>
  </ul>
</DdaSplitButton>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaSplitButton
    text_button_type="button"
    button_color="default-primary"
    start_icon="sentiment_satisfied"
    button_text="Button"
    text_button_id="default-primary-btn"
    aria_label="default primary button"
    text_button_name="defaultPrimaryButton"
    value="default-primary-value"
    button_shape="default"
    size="md"
    gap="1"
    disabled="false"
    custom_class=""
    component_mode=""
    onclick="console.log('native click')"
>
  <ul slot="menu">
    <li><a href="#">link-1</a></li>
    <li><a href="#">link-2</a></li>
    <li><button type="button">Button</button></li>
  </ul>
</DdaSplitButton>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-split-button
    text_button_type="button"
    button_color="default-primary"
    start_icon="sentiment_satisfied"
    button_text="Button"
    text_button_id="default-primary-btn"
    aria_label="default primary button"
    text_button_name="defaultPrimaryButton"
    value="default-primary-value"
    button_shape="default"
    size="md"
    gap="1"
    disabled="false"
    custom_class=""
    component_mode=""
    onclick="console.log('native click')"
>
  <ul slot="menu">
    <li><a href="#">link-1</a></li>
    <li><a href="#">link-2</a></li>
    <li><button type="button">Button</button></li>
  </ul>
</dda-split-button>
```

{% endtab %}
{% endtabs %}

### Properties

| Property                                                                                                                                                               | Descriptions                                                                                                                                                                                                                                                                                                         | Type                          |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- |
| `text_button_type`                                                                                                                                                     | Specifies the button type. Common values: `"button"`, `"submit"`, `"reset".`                                                                                                                                                                                                                                         | `string`                      |
| `button_color`                                                                                                                                                         | <p>Defines the button color variant. Example values: <code>'default-primary'</code> , <code>'default-secondary'</code> , <code>'default-tertiary'</code> , <code>'default-link'</code> , <code>'error-primary'</code> , <code>'error-secondary'</code> , <code>'error-tertiary'</code> , <code>'error-link'</code> , |                               |
| <br><code>'onsurface-primary'</code> , <code>'onsurface-secondary'</code> , <code>'onsurface-tertiary'</code> , <code>'onsurface-link'</code> ,                        |                                                                                                                                                                                                                                                                                                                      |                               |
| <br><code>'secondary'</code> , <code>'success'</code> , <code>'warning'</code> , <code>'surface'</code> , <code>'surface-variant'</code> , <code>'disabled'</code></p> | `string`                                                                                                                                                                                                                                                                                                             |                               |
| `start_icon`                                                                                                                                                           | The name of the icon to display at the start of the button. Uses Material Icons.                                                                                                                                                                                                                                     | `string`                      |
| `button_text`                                                                                                                                                          | The text for button                                                                                                                                                                                                                                                                                                  | `string`                      |
| `text_button_id`                                                                                                                                                       | Unique identifier for the button element.                                                                                                                                                                                                                                                                            | `string`                      |
| `aria_label`                                                                                                                                                           | Accessibility label for screen readers.                                                                                                                                                                                                                                                                              | `string`                      |
| `text_button_name`                                                                                                                                                     | Name attribute for the button component                                                                                                                                                                                                                                                                              | `string`                      |
| `value`                                                                                                                                                                | <p></p><p>Value of the button</p>                                                                                                                                                                                                                                                                                    | `string`                      |
| `button_shape`                                                                                                                                                         | Defines the button's shape. Example values: `'rounded'`, `'square'`                                                                                                                                                                                                                                                  | `string`                      |
| `size`                                                                                                                                                                 | cifies the button size. Example values: `'sm'`, `'md'`, `'lg'`.                                                                                                                                                                                                                                                      | `string`                      |
| `gap`                                                                                                                                                                  | Specifies the spacing between elements inside the button. `1`  ,  `2`                                                                                                                                                                                                                                                | `number`                      |
| `disabled`                                                                                                                                                             | Determines if the button should be disabled.                                                                                                                                                                                                                                                                         | `boolean`                     |
| `custom_class`                                                                                                                                                         | Allows adding a custom CSS class to the button for additional styling.                                                                                                                                                                                                                                               | `string`                      |
| `component_mode`                                                                                                                                                       | Used for setting a mode-related styling or behavior.                                                                                                                                                                                                                                                                 | `string`                      |
| `onclick`                                                                                                                                                              | Function to be executed when the button is clicked.                                                                                                                                                                                                                                                                  | `(event: MouseEvent) => void` |

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FA7DuY4ogNDUpHB2UMNo6%2FSplit%20Button%20-%20Anatomy.png?alt=media&amp;token=e72fb92e-a605-44e2-8d0a-4e69afe7b925" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Lead Icon**: Positioned to the left of the button text, the lead icon visually represents the action or purpose of the button. It provides a quick visual cue that helps users understand the button's function at a glance.

**Text**: The main label of the button, describing the action that will be performed when the button is clicked. Clear and concise text improves usability by indicating the button’s purpose.

**Trail Action**: Positioned to the right of the button text, the trail action (such as an arrow) further emphasizes the direction or nature of the action. It visually reinforces the button’s function, often indicating forward movement or progression.

**Seperator:** A visual divider within the button, typically placed between the button text and the trail action, helping to distinguish the primary action from secondary options or commands.

## Dos and Don'ts

| Dos                                                                                   | Don'ts                                                                                                |
| ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
| Use official logos and colors of each social media platform for brand consistency.    | Don’t alter the colors or logos, as this may reduce recognizability and violate brand guidelines.     |
| Ensure clear labeling or tooltip if the icon alone may not be obvious to all users.   | Don’t use social media login buttons as the only login option if users might not have those accounts. |
| Place Social Media Login Buttons in a prominent area on the login or signup page.     | Don’t overcrowd the page with too many social media options; limit to popular platforms.              |
| Provide a visual focus state for keyboard navigation to meet accessibility standards. | Don’t neglect accessibility—ensure buttons are usable with keyboard and screen readers.               |


# Checkbox

Checkbox components are versatile interactive elements used in user interfaces to enable users to make single or multiple selections.


# Checkbox

Checkboxes allow users to select multiple options from a set of predefined options.

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FJAHoisWfV9IlB96KXIjj%2FCheckbox%20-%20Overview.png?alt=media&amp;token=7dc59c99-b81f-476f-bc37-d8a5dbcefc58" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Checkboxes are used when users need to select one or more options from a list. They are ideal for forms, settings, and any interface where multiple selections are allowed or required. Common use cases include selecting multiple interests, choosing preferences, or marking tasks as complete.

### How it works

Checkboxes are typically presented in groups, with each box representing a different option that users can check or uncheck independently. Each checkbox includes a square box and a label, with optional elements like subtitles or trailing icons for additional context or emphasis.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-checkbox
    title_text="Checkbox Title"
    checked="false"
    style_type="fill"
    supporting="Supporting Text"
    group_name="checkboxgroup"
    input_id="checkboxOne"
    aria_label="checkbox"
    custom_class=""
    component_mode=""
    checkbox_status="normal"
    checkboxchange=""
></dda-checkbox>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaCheckbox
    title_text="Checkbox Title"
    checked="false"
    style_type="fill"
    supporting="Supporting Text"
    group_name="checkboxgroup"
    input_id="checkboxOne"
    aria_label="checkbox"
    custom_class=""
    component_mode=""
    checkbox_status="normal"
    checkboxchange=""
></DdaCheckbox>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaCheckbox
    title_text="Checkbox Title"
    checked="false"
    style_type="fill"
    supporting="Supporting Text"
    group_name="checkboxgroup"
    input_id="checkboxOne"
    aria_label="checkbox"
    custom_class=""
    component_mode=""
    checkbox_status="normal"
    checkboxchange=""
></DdaCheckbox>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-checkbox
    title_text="Checkbox Title"
    checked="false"
    style_type="fill"
    supporting="Supporting Text"
    group_name="checkboxgroup"
    input_id="checkboxOne"
    aria_label="checkbox"
    custom_class=""
    component_mode=""
    checkbox_status="normal"
    checkboxchange=""
></dda-checkbox>
```

{% endtab %}
{% endtabs %}

### Properties

| Property          | Description                                                                                                             | Type      |
| ----------------- | ----------------------------------------------------------------------------------------------------------------------- | --------- |
| `title_text`      | The main text label displayed next to the checkbox.                                                                     | `string`  |
| `checked`         | Determines whether the checkbox is checked (`true`) or unchecked (`false`) by default.                                  | `boolean` |
| `style_type`      | Specifies the visual style of the checkbox. Defaults to `'fill'`, `'`stroke`'` but can be customized with other styles. | `string`  |
| `supporting`      | Additional supporting text displayed below the main title.                                                              | `string`  |
| `group_name`      | The name attribute of the checkbox, useful for grouping multiple checkboxes together.                                   | `string`  |
| `input_id`        | The unique identifier for the checkbox input, used to associate the `<label>` with the input.                           | `string`  |
| `aria_label`      | Provides an accessible label for screen readers when a visible text label is not available.                             | `string`  |
| `custom_class`    | Additional custom CSS classes to apply to the checkbox container.                                                       | `string`  |
| `component_mode`  | Determines the mode or theme of the component, if applicable.                                                           | `string`  |
| `checkbox_status` | Applies a status-based CSS class to the checkbox, such as 'disabled' or 'error'.                                        | `string`  |
| `checkboxchange`  | JS handler triggered on checkbox state change                                                                           | `string`  |

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FoJNizoZ66P7EDmRumiZ5%2FCheckbox%20-%20Anatomy.png?alt=media&amp;token=25240644-fdec-4773-8b88-e134360b2926" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Checkbox Icon**: The visual checkbox element that indicates the selection state. Users can check or uncheck this icon to select or deselect an option.

**Checkbox Label**: The main label associated with the checkbox, providing a brief description of the option or action related to the checkbox.

**Subtitle**: Positioned below the checkbox title, the subtitle offers additional context or supporting information about the checkbox option, helping users understand the checkbox's purpose.

## Dos and Don'ts

| Dos                                                                    | Don'ts                                                                                  |
| ---------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
| Use checkboxes when users need to select multiple options from a set.  | Don't use checkboxes for single selection; use radio buttons for that purpose.          |
| Label each checkbox clearly to indicate the option it represents.      | Avoid using ambiguous or unclear labels for checkboxes.                                 |
| Group related checkboxes together visually and logically.              | Don't scatter related checkboxes throughout different parts of the UI.                  |
| Ensure checkboxes are large enough to be easily tappable or clickable. | Avoid making checkboxes too small to interact with comfortably.                         |
| Use consistent spacing between checkboxes in the same group.           | Don't place checkboxes too close together or too far apart, which can hinder usability. |
| Provide a clear visual indication of the checked state.                | Don't leave users guessing which options are currently selected.                        |
| Include appropriate aria-labels for accessibility.                     | Don't neglect accessibility requirements such as focus states and keyboard navigation.  |
| Ensure each checkbox has sufficient contrast against its background.   | Avoid using low contrast that can make the checkboxes difficult to see.                 |


# Checkbox Groups

Checkbox groups enable users to select multiple options from a predefined list, offering flexibility in choice and customization of preferences.

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FE0o6zNp76edG6xNahhcx%2FCheckbox%20Group%20-%20Overview.png?alt=media&amp;token=09b6abac-2821-4283-9eec-4c1f83814fb1" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Checkboxes are essential when users need to make one or multiple selections from a set of options. They are particularly useful in forms, settings, or any interface where multiple choices are permissible or required. Common applications include selecting various interests or preferences, or marking tasks as complete.

### How it works

Checkboxes are usually arranged in groups, where each checkbox represents a distinct option that users can independently check or uncheck. Every checkbox consists of a square box accompanied by a label, and may include additional elements like subtitles or trailing icons to provide more context or highlight specific options.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<ul>
    <li>
        <dda-checkbox
            title_text="Checkbox Title"
            checked="false"
            style_type="fill"
            supporting="Supporting Text"
            group_name="checkboxgroup"
            input_id="checkboxOne"
            aria_label="checkbox"
            custom_class=""
            component_mode=""
            checkbox_status="normal"
            checkboxchange=""
        ></dda-checkbox>
    </li>
    <li>
        <dda-checkbox
            title_text="Checkbox Title"
            checked="false"
            style_type="fill"
            supporting="Supporting Text"
            group_name="checkboxgroup"
            input_id="checkboxTwo"
            aria_label="checkbox"
            custom_class=""
            component_mode=""
            checkbox_status="normal"
            checkboxchange=""
        ></dda-checkbox>
    </li>
</ul>
```

{% endtab %}

{% tab title="React" %}

```jsx
<ul>
    <li>
        <DdaCheckbox
            title_text="Checkbox Title"
            checked="false"
            style_type="fill"
            supporting="Supporting Text"
            group_name="checkboxgroup"
            input_id="checkboxOne"
            aria_label="checkbox"
            custom_class=""
            component_mode=""
            checkbox_status="normal"
            checkboxchange=""
        ></DdaCheckbox>
    </li>
    <li>
        <DdaCheckbox
            title_text="Checkbox Title"
            checked="false"
            style_type="fill"
            supporting="Supporting Text"
            group_name="checkboxgroup"
            input_id="checkboxTwo"
            aria_label="checkbox"
            custom_class=""
            component_mode=""
            checkbox_status="normal"
            checkboxchange=""
        ></DdaCheckbox>
    </li>
</ul>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<ul>
    <li>
        <DdaCheckbox
            title_text="Checkbox Title"
            checked="false"
            style_type="fill"
            supporting="Supporting Text"
            group_name="checkboxgroup"
            input_id="checkboxOne"
            aria_label="checkbox"
            custom_class=""
            component_mode=""
            checkbox_status="normal"
            checkboxchange=""
        ></DdaCheckbox>
    </li>
    <li>
        <DdaCheckbox
            title_text="Checkbox Title"
            checked="false"
            style_type="fill"
            supporting="Supporting Text"
            group_name="checkboxgroup"
            input_id="checkboxTwo"
            aria_label="checkbox"
            custom_class=""
            component_mode=""
            checkbox_status="normal"
            checkboxchange=""
        ></DdaCheckbox>
    </li>
</ul>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<ul>
    <li>
        <dda-checkbox
            title_text="Checkbox Title"
            checked="false"
            style_type="fill"
            supporting="Supporting Text"
            group_name="checkboxgroup"
            input_id="checkboxOne"
            aria_label="checkbox"
            custom_class=""
            component_mode=""
            checkbox_status="normal"
            checkboxchange=""
        ></dda-checkbox>
    </li>
    <li>
        <dda-checkbox
            title_text="Checkbox Title"
            checked="false"
            style_type="fill"
            supporting="Supporting Text"
            group_name="checkboxgroup"
            input_id="checkboxTwo"
            aria_label="checkbox"
            custom_class=""
            component_mode=""
            checkbox_status="normal"
            checkboxchange=""
        ></dda-checkbox>
    </li>
</ul>
```

{% endtab %}
{% endtabs %}

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FviDkni7Wg67ukBuJWzAq%2FCheckbox%20Group%20-%20Anatomy.png?alt=media&amp;token=f82fd7bf-7b32-4daa-92b8-4815a7772a8b" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Checkbox Icon**: The visual checkbox element that indicates the selection state. Users can check or uncheck this icon to select or deselect an option.

**Checkbox Title**: The main label associated with the checkbox, providing a brief description of the option or action related to the checkbox.

**Supporting Text**: Positioned below the checkbox title, the supporting text offers additional context or supporting information about the checkbox option, helping users understand the checkbox's purpose.

## Dos and Don'ts

| Dos                                                                                                                             | Don'ts                                                                                    |
| ------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
| Do label each checkbox clearly to ensure users understand what they are choosing.                                               | Don't use vague or ambiguous labels that can confuse users about what they are selecting. |
| Do provide sufficient spacing between checkboxes to prevent selection errors.                                                   | Don't place checkboxes too closely together, which can lead to accidental selections.     |
| Do use a logical grouping for related options to help users navigate the choices easily.                                        | Don't mix unrelated options in a single group, as it can complicate the decision process. |
| Do include a 'Select All' option if appropriate, to simplify selections for larger lists.                                       | Don't force users to select more options than they need; provide clear selections.        |
| Use consistent spacing between cDo ensure that checkboxes are accessible, with keyboard navigability and screen reader support. | Don't ignore accessibility standards, making it difficult for all users to interact.      |
| Do provide immediate visual feedback when a checkbox is selected or deselected.                                                 | Don't delay updates to the interface, which can confuse users about their selections.     |
| Do consider using checkboxes with additional context like subtitles or icons when needed.                                       | Don't overload checkboxes with too much information, which can overwhelm users.           |


# Cards


# Banner Cards

Banner cards use interactive and clickable features to engage users, enhancing the presentation of content effectively.

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FRkmOEgSW544Su42WBkQS%2FBanner%20Cards%20-%20Overview.png?alt=media&amp;token=4c2ab0ee-bfdd-456a-9d58-8ba5f98db8f7" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Banner cards prominently display key information, special offers, or critical updates. They are particularly effective in engaging users and guiding them towards desired actions within a visually concise and interactive format.

### How it works

Banner cards combine elements like clickable features and concise informational displays. These components seamlessly work together to present information in an engaging way, encourage user interaction, and drive engagement, thus enhancing the overall user experience with interactive and visually appealing content.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-banner-card
  banner_card_type="button"
  image_src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvhlzYedWoCSkLB2HFQ87P5gPjCmJqmTt8vw&s"
  image_alt="image alt"
  banner_card_title="Card Title"
  banner_card_description="Lorem Ipsum..."
  banner_card_id="exampleId"
  custom_class=""
  component_mode=""
  banner_card_value="optional value"
  banner_card_name="optional name"
></dda-banner-card>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaBannerCard
  banner_card_type="button"
  image_src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvhlzYedWoCSkLB2HFQ87P5gPjCmJqmTt8vw&s"
  image_alt="image alt"
  banner_card_title="Card Title"
  banner_card_description="Lorem Ipsum..."
  banner_card_id="exampleId"
  custom_class=""
  component_mode=""
  banner_card_value="optional value"
  banner_card_name="optional name"
></DdaBannerCard>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaBannerCard
  banner_card_type="button"
  image_src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvhlzYedWoCSkLB2HFQ87P5gPjCmJqmTt8vw&s"
  image_alt="image alt"
  banner_card_title="Card Title"
  banner_card_description="Lorem Ipsum..."
  banner_card_id="exampleId"
  custom_class=""
  component_mode=""
  banner_card_value="optional value"
  banner_card_name="optional name"
></DdaBannerCard>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-banner-card
  image_src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvhlzYedWoCSkLB2HFQ87P5gPjCmJqmTt8vw&s"
  banner_card_type="button"
  image_alt="image alt"
  banner_card_title="Card Title"
  banner_card_description="Lorem Ipsum..."
  banner_card_id="exampleId"
  custom_class=""
  component_mode=""
  banner_card_value="optional value"
  banner_card_name="optional name"
></dda-banner-card>
```

{% endtab %}
{% endtabs %}

### Properties

| Property                  | Description                                                                      | Type     |
| ------------------------- | -------------------------------------------------------------------------------- | -------- |
| `image_src`               | Path to the icon or image shown on the banner card.                              | `string` |
| `image_alt`               | Displays descriptive text when images fail to load, maintaining content clarity. | `string` |
| `banner_card_title`       | The main title or heading of the card.                                           | `string` |
| `banner_card_description` | Short description or content text of the card.                                   | `string` |
| `banner_card_id`          | Unique identifier for the banner card (useful for targeting).                    | `string` |
| `custom_class`            | Additional CSS classes to apply for custom styling.                              | `string` |
| `component_mode`          | Defines the component behavior mode (e.g. compact, readonly).                    | `string` |
| `banner_card_value`       | Optional value to associate with the card (used in form or state context).       | `string` |
| `banner_card_name`        | Optional name attribute to group or identify cards                               | `string` |

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FFinPwGT3E40qBL7LmIH0%2FBanner%20Cards%20-%20Anatomy.png?alt=media&amp;token=2fbdf10e-30f6-49c6-be07-31af92c2789d" alt=""><figcaption></figcaption></figure>

**Icon**: Positioned at the top, the icon visually signifies the theme or function of the card, making it easily recognizable at a glance.

**Title**: The title, located directly below the icon, succinctly communicates the main focus or service provided by the card.

**Description**: This brief text offers a clear explanation or summary of what the user can expect, enhancing understanding and engagement.

**Banner Card Container**: This container houses the title, description, and icon, organizing these elements in a designated space to enhance focus on key information within the card.

***

## Dos and Don'ts

| Dos                                                                                          | Don'ts                                                                                   |
| -------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
| **Use clear, legible icons** that immediately convey the card's purpose or action.           | **Don’t use low-quality or blurry images** for the `image_src`—it reduces visual appeal. |
| **Write concise, meaningful titles** to ensure quick understanding.                          | **Avoid long or vague titles** that don’t communicate the card’s content.                |
| **Keep descriptions short and relevant** to avoid overwhelming users.                        | **Don’t overload the description** with too much text—keep it scannable.                 |
| **Use consistent styling and spacing** if multiple cards are displayed together.             | **Avoid placing multiple cards without spacing**, which can cause visual clutter.        |
| Maintain a consistent design language across all cards to ensure a cohesive user experience. | **Don’t leave the `onclick` empty or use console logs in production.**                   |


# Event Card

Event cards provide a compact, visually engaging way to display key details about upcoming events, enabling quick discovery, interaction, and navigation.

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2Fn3qfsT4XYjX8dkmDDbhP%2FEvent%20Card%20-%20Overview.png?alt=media&amp;token=8baa4992-4b23-470a-8b95-3bf32ddc36ad" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Event cards are used to highlight upcoming events in a compact, visually engaging format. Ideal for dashboards, landing pages, or event listings, they provide users with at-a-glance details like date, time, location, and participants, encouraging quick discovery and interaction.

### How it works

Event cards integrate visual and textual elements—such as banners, dates, titles, descriptions, and avatars—into a single interactive block. Key information like event time, date, location, and attendee previews are clearly displayed, with optional actions (e.g., "Open") allowing users to explore more. This layout improves scannability and promotes engagement by offering a clear, actionable summary of the event.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-event-card
    card_header_text="Event"
    card_header_icon="more_horiz"
    card_header_icon_id="cartHeaderAction"
    image_src="https://lipsum.app/id/12/1800x700"
    event_month="Oct"
    event_date="26"
    header_text="Backend Team"
    body_text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    custom_class=""
    component_mode=""
    data-chip-list='[{"chip_text":"11:49"},{"chip_text":"29.20.2023"},{"chip_text":"Wall St."}]'
    data-avatar-list='[{"src":"https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg"},{"src":"https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg"},{"src":"https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg"},{"src":"https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg"}]'
></dda-event-card>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaEventCard
    card_header_text="Event"
    card_header_icon="more_horiz"
    card_header_icon_id="cartHeaderAction"
    image_src="https://lipsum.app/id/12/1800x700"
    event_month="Oct"
    event_date="26"
    header_text="Backend Team"
    body_text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    custom_class=""
    component_mode=""
    data-chip-list='[{"chip_text":"11:49"},{"chip_text":"29.20.2023"},{"chip_text":"Wall St."}]'
    data-avatar-list='[{"src":"https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg"},{"src":"https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg"},{"src":"https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg"},{"src":"https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg"}]'
></DdaEventCard>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaEventCard
    card_header_text="Event"
    card_header_icon="more_horiz"
    card_header_icon_id="cartHeaderAction"
    image_src="https://lipsum.app/id/12/1800x700"
    event_month="Oct"
    event_date="26"
    header_text="Backend Team"
    body_text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    custom_class=""
    component_mode=""
    data-chip-list='[{"chip_text":"11:49"},{"chip_text":"29.20.2023"},{"chip_text":"Wall St."}]'
    data-avatar-list='[{"src":"https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg"},{"src":"https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg"},{"src":"https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg"},{"src":"https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg"}]'
></DdaEventCard>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-event-card
    card_header_text="Event"
    card_header_icon="more_horiz"
    card_header_icon_id="cartHeaderAction"
    image_src="https://lipsum.app/id/12/1800x700"
    event_month="Oct"
    event_date="26"
    header_text="Backend Team"
    body_text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    custom_class=""
    component_mode=""
    data-chip-list='[{"chip_text":"11:49"},{"chip_text":"29.20.2023"},{"chip_text":"Wall St."}]'
    data-avatar-list='[{"src":"https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg"},{"src":"https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg"},{"src":"https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg"},{"src":"https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg"}]'
></dda-event-card>
```

{% endtab %}
{% endtabs %}

### Properties

| Property               | Description                                                                                                                                                                                                               | Type     |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| card\_header\_text     | The label displayed at the top of the banner card, typically indicating the card’s category or context (e.g., "Event").                                                                                                   | `string` |
| card\_header\_icon     | Name of the Icon to be shown alongside the header text.                                                                                                                                                                   | `string` |
| card\_header\_icon\_id | Unique identifier for the header icon element. Useful for targeting the icon programmatically (e.g., for click events or testing).                                                                                        | `string` |
| image\_src             | URL path to the banner image displayed in the card.                                                                                                                                                                       | `string` |
| event\_month           | Short-form month (e.g., "Oct", "Dec") indicating when the event takes place.                                                                                                                                              | `string` |
| event\_date            | Day of the month (e.g., "26") representing the event date.                                                                                                                                                                | `string` |
| header\_text           | The main title or name of the event (e.g., "Backend Team").                                                                                                                                                               | `string` |
| body\_text             | Descriptive text providing more context or details about the event.                                                                                                                                                       | `string` |
| custom\_class          | Optional custom CSS class to apply additional styling to the card.                                                                                                                                                        | `string` |
| component\_mode        | Defines the visual or functional mode of the component. Can be used to switch between layout or style variants.                                                                                                           | `string` |
| data-chip-list         | <p>A JSON-formatted array of chip objects. Each chip typically displays event-related metadata such as time, date, or location.<br>Example: <code>\[{ "chip\_text": "11:49" }, { "chip\_text": "29.20.2023" }]</code></p> | `string` |
| data-avatar-list       | A JSON-formatted array of avatar objects, typically used to show associated team members or speakers.                                                                                                                     | `string` |

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2Fz2aoFae9L4tDwt7D3Dqz%2FEvent%20Card%20-%20Anatomy.png?alt=media&amp;token=2389d424-e329-44c5-9a20-df6589f7e527" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Card Title:** Indicates the type of content (e.g., “Event”), helping users immediately recognize the card’s purpose.

**Icon:** **con:** A contextual icon that can represent various functions such as settings, alerts, status indicators, or additional options—serving as a quick access point for supporting actions or information relevant to the event card.

**Display Date:** Prominently displays the event date in a badge style to draw attention at a glance.

**Image:** A banner image representing the event, used for visual context and thematic consistency.

**Event Title:** The primary title of the event, clearly stating its name or subject.

**Description:** A short text summary providing users with a quick overview of the event’s focus or content.

**Chips:** Compact elements displaying essential event metadata like time, full date, and location.

**Icon & Avatar:**  Profile images of attendees, offering a social preview of who is joining the event.

**Icon Button:** A action button that typically opens a list of additional participants or adds new ones.

**Divider:** A horizontal line that separates the main content from actions, enhancing visual organization and readability.

**Link Button:** A clear call-to-action that guides users to view more detailed event information.

***

## Dos and Don'ts

| Dos                                                                                          | Don'ts                                                                                   |
| -------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
| **Use clear, legible icons** that immediately convey the card's purpose or action.           | **Don’t use low-quality or blurry images** for the `image_src`—it reduces visual appeal. |
| **Write concise, meaningful titles** to ensure quick understanding.                          | **Avoid long or vague titles** that don’t communicate the card’s content.                |
| **Keep descriptions short and relevant** to avoid overwhelming users.                        | **Don’t overload the description** with too much text—keep it scannable.                 |
| **Use consistent styling and spacing** if multiple cards are displayed together.             | **Avoid placing multiple cards without spacing**, which can cause visual clutter.        |
| Maintain a consistent design language across all cards to ensure a cohesive user experience. | **Don’t leave the `onclick` empty or use console logs in production.**                   |


# Group Card

Group cards provide a concise, visually structured summary of a team or group, enabling users to review key details and take action with clarity and confidence.

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FxrW8zoAV0kAzUWfcRWs6%2FGroup%20Card%20-%20Overview.png?alt=media&amp;token=9074c799-608b-4983-b8a3-b44680c0bb04" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Group cards are used to display and confirm group-related information in a concise, focused format. Ideal for collaboration platforms, team selection flows, or onboarding experiences, they help users review key details—such as group name, description, and associated avatar—before proceeding with an action.

### How it works

Group cards combine visual identity (group avatar), a title (e.g., group or team name), a brief description, and clear action buttons such as “Cancel” and “Continue.” This structure ensures that users can quickly recognize the group, understand its context, and either proceed or abort the interaction. The layout promotes clarity, reinforces intentional actions, and supports a smooth user experience when managing or joining groups

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-information-card
    image_src="https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg"
    image_alt="alternate text"
    header_text="Team"
    body_text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    left_button_name="Cancel"
    left_button_href="https://example.com"
    left_button_rel=""
    left_button_start_icon=""
    left_button_end_icon=""
    left_button_data_fancybox=""
    left_button_target=""
    right_button_name="Continue"
    right_button_href="https://example.com"
    right_button_rel=""
    right_button_start_icon=""
    right_button_end_icon=""
    right_button_data_fancybox=""
    right_button_target=""
    custom_class=""
    component_mode=""
></dda-information-card>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaInformationCard
    image_src="https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg"
    image_alt="alternate text"
    header_text="Team"
    body_text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    left_button_name="Cancel"
    left_button_href="https://example.com"
    left_button_rel=""
    left_button_start_icon=""
    left_button_end_icon=""
    left_button_data_fancybox=""
    left_button_target=""
    right_button_name="Continue"
    right_button_href="https://example.com"
    right_button_rel=""
    right_button_start_icon=""
    right_button_end_icon=""
    right_button_data_fancybox=""
    right_button_target=""
    custom_class=""
    component_mode=""
></DdaInformationCard>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaInformationCard
    image_src="https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg"
    image_alt="alternate text"
    header_text="Team"
    body_text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    left_button_name="Cancel"
    left_button_href="https://example.com"
    left_button_rel=""
    left_button_start_icon=""
    left_button_end_icon=""
    left_button_data_fancybox=""
    left_button_target=""
    right_button_name="Continue"
    right_button_href="https://example.com"
    right_button_rel=""
    right_button_start_icon=""
    right_button_end_icon=""
    right_button_data_fancybox=""
    right_button_target=""
    custom_class=""
    component_mode=""
></DdaInformationCard>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-information-card
    image_src="https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg"
    image_alt="alternate text"
    header_text="Team"
    body_text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    left_button_name="Cancel"
    left_button_href="https://example.com"
    left_button_rel=""
    left_button_start_icon=""
    left_button_end_icon=""
    left_button_data_fancybox=""
    left_button_target=""
    right_button_name="Continue"
    right_button_href="https://example.com"
    right_button_rel=""
    right_button_start_icon=""
    right_button_end_icon=""
    right_button_data_fancybox=""
    right_button_target=""
    custom_class=""
    component_mode=""
></dda-information-card>
```

{% endtab %}
{% endtabs %}

### Properties

| **Property**                 | **Description**                                                                         | **Type**                   |
| ---------------------------- | --------------------------------------------------------------------------------------- | -------------------------- |
| `image_src`                  | URL of the image to display on the card.                                                | `string`                   |
| `image_alt`                  | Alternative text for the image, used for accessibility.                                 | `string`                   |
| `header_text`                | Text to display as the card header/title.                                               | `string`                   |
| `body_text`                  | Main descriptive text/content of the card.                                              | `string`                   |
| `left_button_name`           | Text label for the left button.                                                         | `string`                   |
| `left_button_href`           | URL the left button links to.                                                           | `string`                   |
| `left_button_rel`            | `rel` attribute for the left button's link (e.g., `"noopener noreferrer"`).             | `string`                   |
| `left_button_start_icon`     | Icon name to show at the start (left) of the left button label.                         | `string`                   |
| `left_button_end_icon`       | Icon name to show at the end (right) of the left button label.                          | `string`                   |
| `left_button_data_fancybox`  | Optional attribute for integrating with Fancybox or similar plugins on the left button. | `string`                   |
| `left_button_target`         | Target attribute for the left button link (e.g., `"_blank"` to open in new tab).        | `string`                   |
| `right_button_name`          | Text label for the right button.                                                        | `string`                   |
| `right_button_href`          | URL the right button links to.                                                          | `string`                   |
| `right_button_rel`           | `rel` attribute for the right button's link.                                            | `string`                   |
| `right_button_start_icon`    | Icon name to show at the start of the right button label.                               | `string`                   |
| `right_button_end_icon`      | Icon name to show at the end of the right button label.                                 | `string`                   |
| `right_button_data_fancybox` | Optional Fancybox integration attribute for the right button.                           | `string`                   |
| `right_button_target`        | Target attribute for the right button link.                                             | `string`                   |
| `custom_class`               | Custom CSS class to add extra styling to the card.                                      | `string`                   |
| `component_mode`             | Optional mode or variant of the component (if applicable).                              | `string`                   |
| useNavigator                 | Enables/Disables the use of event listener instead of href attribute on links           | string ("true" \| "false") |
| navigatorClick               | Use it to capture the on click event after useNavigator is set to true                  | EventListener              |

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2F7rEbAgHabx0aF8K1fcyz%2FGroup%20Card%20-%20Anatomy.png?alt=media&amp;token=eaa25abe-b827-4bf3-8987-9006425d6335" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Avatar:** A image representing the group or a key member, used to establish visual identity and context.

**Card Title:** Displays the name of the group or team, serving as the primary identifier.

**Description:** A brief text block that provides supporting context about the group, its purpose, or relevant details.

**Divider:** A horizontal line that visually separates content from action buttons, enhancing layout clarity.

**Primary Button:** A high-emphasis action that confirms the user’s selection or initiates the next step in the flow.

**Tertiary Button:** A lower-emphasis action allowing the user to back out or dismiss the card without proceeding.

***

## Dos and Don'ts

| Dos                                                                                          | Don'ts                                                                                   |
| -------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
| **Use clear, legible icons** that immediately convey the card's purpose or action.           | **Don’t use low-quality or blurry images** for the `image_src`—it reduces visual appeal. |
| **Write concise, meaningful titles** to ensure quick understanding.                          | **Avoid long or vague titles** that don’t communicate the card’s content.                |
| **Keep descriptions short and relevant** to avoid overwhelming users.                        | **Don’t overload the description** with too much text—keep it scannable.                 |
| **Use consistent styling and spacing** if multiple cards are displayed together.             | **Avoid placing multiple cards without spacing**, which can cause visual clutter.        |
| Maintain a consistent design language across all cards to ensure a cohesive user experience. | **Don’t leave the `onclick` empty or use console logs in production.**                   |


# Pricing Card

The Pricing Card is a flexible UI component designed to present pricing-based content or listings — such as real estate, SaaS plans, or subscription offerings — in a visually engaging and informative

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2F5XdbherJiHAeL78bkIyS%2FPricing%20Card%20-%20Overview.png?alt=media&amp;token=ed343dbf-7baa-443d-bae4-cffb97d0fe61" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Pricing cards are used to present the cost and key details of a product, service, or offering in a clear, compact format. They are ideal for use in comparison views, subscription models, product listings, or rental platforms—helping users quickly evaluate pricing, features, and value propositions.

### How it works

A pricing card typically includes an image or icon to represent the item, a title or name, a short description or location, the price (e.g., per month or per unit), and a set of chips or badges to highlight key attributes. Optional labels (e.g., "Featured") or utility icons provide added context or interaction. The layout is optimized for scannability, allowing users to compare multiple offerings and take informed action.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-pricing-card
    image_src="https://lipsum.app/id/12/1800x1200"
    image_chip_label="Label"
    image_chip_icon="fiber_manual_record"
    image_chip_icon_family="material-icons"
    image_chip_icon_size="sm"
    header_text="Backend Team"
    header_text_icon="more_horiz"
    card_header_icon_id="cartHeaderAction"
    body_text_icon="sentiment_satisfied"
    body_text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    price_text="$1,750.00"
    price_period="month"
    custom_class=""
    component_mode=""
    data-chip-list='[{"chip_text":"3 Bedrooms"},{"chip_text":"1 Bathroom"},{"chip_text":"bnb"}]'
></dda-pricing-card>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaPricingCard
    image_src="https://lipsum.app/id/12/1800x1200"
    image_chip_label="Label"
    image_chip_icon="fiber_manual_record"
    image_chip_icon_family="material-icons"
    image_chip_icon_size="sm"
    header_text="Backend Team"
    header_text_icon="more_horiz"
    card_header_icon_id="cartHeaderAction"
    body_text_icon="sentiment_satisfied"
    body_text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    price_text="$1,750.00"
    price_period="month"
    custom_class=""
    component_mode=""
    data-chip-list='[{"chip_text":"3 Bedrooms"},{"chip_text":"1 Bathroom"},{"chip_text":"bnb"}]'
></DdaPricingCard>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaPricingCard
    image_src="https://lipsum.app/id/12/1800x1200"
    image_chip_label="Label"
    image_chip_icon="fiber_manual_record"
    image_chip_icon_family="material-icons"
    image_chip_icon_size="sm"
    header_text="Backend Team"
    header_text_icon="more_horiz"
    card_header_icon_id="cartHeaderAction"
    body_text_icon="sentiment_satisfied"
    body_text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    price_text="$1,750.00"
    price_period="month"
    custom_class=""
    component_mode=""
    data-chip-list='[{"chip_text":"3 Bedrooms"},{"chip_text":"1 Bathroom"},{"chip_text":"bnb"}]'
></DdaPricingCard>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-pricing-card
    image_src="https://lipsum.app/id/12/1800x1200"
    image_chip_label="Label"
    image_chip_icon="fiber_manual_record"
    image_chip_icon_family="material-icons"
    image_chip_icon_size="sm"
    header_text="Backend Team"
    header_text_icon="more_horiz"
    card_header_icon_id="cartHeaderAction"
    body_text_icon="sentiment_satisfied"
    body_text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    price_text="$1,750.00"
    price_period="month"
    custom_class=""
    component_mode=""
    data-chip-list='[{"chip_text":"3 Bedrooms"},{"chip_text":"1 Bathroom"},{"chip_text":"bnb"}]'
></dda-pricing-card>
```

{% endtab %}
{% endtabs %}

### Properties

| Property               | Description                                                                                                                                                                                                        | Type     |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- |
| `header_text`          | The main title or heading of the pricing card, usually describing the listing or offering (e.g., "Backend Team").                                                                                                  | `string` |
| `header_text_icon`     | The Icon name displayed next to the header text, providing additional visual context (e.g., info, action).                                                                                                         | `string` |
| `card_header_icon_id`  | Unique identifier for the header icon element. Useful for targeting during scripting or testing.                                                                                                                   | `string` |
| <kbd>`body_text`</kbd> | Detailed description or content about the offering.                                                                                                                                                                | `string` |
| `body_text_icon`       | The Icon name shown next to the body text, reinforcing the message visually.                                                                                                                                       | `string` |
| `price_text`           | The price displayed on the card, including currency formatting (e.g., "$1,750.00").                                                                                                                                | `string` |
| `price_period`         | Time period associated with the price (e.g., "month", "week", "one-time")                                                                                                                                          | `string` |
| `custom_class`         | Optional custom CSS class to apply additional or overridden styling to the card.                                                                                                                                   | `string` |
| `component_mode`       | Defines the visual or functional variant of the component (used for theme or layout switching).                                                                                                                    | `string` |
| `chip_list`            | <p>A JSON-formatted array of chips, each displaying quick property details such as features, amenities, or tags.<br>Example:<br><code>\[{ "chip\_text": "3 Bedrooms" }, { "chip\_text": "1 Bathroom" }]</code></p> | `string` |

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FK462gfsNr7TLUG0zTJUl%2FPricing%20Card%20-%20Anatomy.png?alt=media&amp;token=d0c343b8-d234-4b6d-8d3f-fe7632e855a1" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Chips:** Used in two areas of the card—over the image as a label (e.g., “New” or category tags), and below the pricing to display key attributes such as number of bedrooms, bathrooms, or type (e.g., “bnb”). They enhance scannability and help users quickly assess features.

**Image:** A visual representation of the item, space, or service, helping users quickly recognize what the card refers to.

**Card Title:** The name of the product, place, or package—serving as the primary identifier for the offering.

**Text Description:** A short secondary line that may show the address, description, or provider information.

**Price Text:** Prominently styled to highlight the cost of the item or service, often paired with a unit (e.g., per month, per hour) or a pricing basis (e.g., per service) to clarify the value proposition.

**Divider:** A subtle line that separates visual and textual elements, ensuring clear layout structure.

**Icons:** Generic interactive or informational symbols that offer additional context or functionality, such as toggles, actions, or indicators.

***

## Dos and Don'ts

| Dos                                                                                          | Don'ts                                                                                   |
| -------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
| **Use clear, legible icons** that immediately convey the card's purpose or action.           | **Don’t use low-quality or blurry images** for the `image_src`—it reduces visual appeal. |
| **Write concise, meaningful titles** to ensure quick understanding.                          | **Avoid long or vague titles** that don’t communicate the card’s content.                |
| **Keep descriptions short and relevant** to avoid overwhelming users.                        | **Don’t overload the description** with too much text—keep it scannable.                 |
| **Use consistent styling and spacing** if multiple cards are displayed together.             | **Avoid placing multiple cards without spacing**, which can cause visual clutter.        |
| Maintain a consistent design language across all cards to ensure a cohesive user experience. | **Don’t leave the `onclick` empty or use console logs in production.**                   |


# Team Member Card

Team Member Cards provide a quick, visually organized snapshot of an individual’s identity, role, and status within a team, helping users easily recognize and understand team composition at a glance.

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FC0FZV23i06O9KCisXPBk%2FTeam%20Member%20Card%20-%20Overview.png?alt=media&amp;token=0a8f3aa8-08d2-409d-be62-0fb84802f154" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Team member cards are used to display individual profiles within a team or organizational context. They're ideal for showcasing contributors on project dashboards, collaboration platforms, or directory listings where quick recognition and role context are essential.

### How it works

This card presents a member’s avatar, name, job title or contribution (e.g., "Comments Received"), and current status (e.g., "Offline") in a clean, readable layout. The status chip visually communicates availability, while the concise format supports fast scanning and better team awareness.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-team-member-card
    image_src="https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg"
    team_member_name="Omar Al-Hamadi"
    team_member_position="Chief Executive Officer"
    design="default"
    custom_class=""
    component_mode=""
></dda-team-member-card>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaTeamMemberCard
    image_src="https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg"
    team_member_name="Omar Al-Hamadi"
    team_member_position="Chief Executive Officer"
    design="default"
    custom_class=""
    component_mode=""
></DdaTeamMemberCard>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaTeamMemberCard
    image_src="https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg"
    team_member_name="Omar Al-Hamadi"
    team_member_position="Chief Executive Officer"
    design="default"
    custom_class=""
    component_mode=""
></DdaTeamMemberCard>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-team-member-card
    image_src="https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg"
    team_member_name="Omar Al-Hamadi"
    team_member_position="Chief Executive Officer"
    design="default"
    custom_class=""
    component_mode=""
></dda-team-member-card>
```

{% endtab %}
{% endtabs %}

### Properties

| Property               | Description                                            | Type     |
| ---------------------- | ------------------------------------------------------ | -------- |
| `image_src`            | URL of the team member’s image/avatar                  | `string` |
| `team_member_name`     | Full name of the team member                           | `string` |
| `team_member_position` | Job title or position of the team member               | `string` |
| `design`               | Design variant or style of the card. `default`  `blue` | `string` |
| `custom_class`         | Additional CSS class(es) for custom styling            | `string` |
| `component_mode`       | Mode or state of the component (if any)                | `string` |

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FbwQ3Hu6HlNGqsEcZl1yJ%2FTeam%20Member%20Card%20-%20Anatomy.png?alt=media&amp;token=53eb8cc3-11d1-4f07-8bc5-b24f104e7d35" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Avatar:** A visual identifier that can be an image, icon, or text initials—used to represent the team member and support quick recognition within the interface.

**Card Title:** The name of the individual, acting as the primary label for the card.

**Description:** A short label or role descriptor (e.g., “Comments Received”) that clarifies the member’s activity or contribution.

**Chips:** Status indicators (e.g., “Offline”) displayed as colored pills to communicate availability or activity in real time.

***

## Dos and Don'ts

| Dos                                                                                          | Don'ts                                                                                   |
| -------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
| **Use clear, legible icons** that immediately convey the card's purpose or action.           | **Don’t use low-quality or blurry images** for the `image_src`—it reduces visual appeal. |
| **Write concise, meaningful titles** to ensure quick understanding.                          | **Avoid long or vague titles** that don’t communicate the card’s content.                |
| **Keep descriptions short and relevant** to avoid overwhelming users.                        | **Don’t overload the description** with too much text—keep it scannable.                 |
| **Use consistent styling and spacing** if multiple cards are displayed together.             | **Avoid placing multiple cards without spacing**, which can cause visual clutter.        |
| Maintain a consistent design language across all cards to ensure a cohesive user experience. | **Don’t leave the `onclick` empty or use console logs in production.**                   |


# Team Section Card

Team Section Cards provide a clean, visual introduction to individual team members by highlighting their image, name, and role, helping users quickly recognize key personnel and understand organizatio

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FUoazIAtu9fXa7Tuxm1hF%2FTeam%20Section%20Card%20-%20Overview.png?alt=media&amp;token=d81ceaa5-c973-403c-bda8-fb3f9ab32fc0" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Use the Team Section Card to visually introduce individual team members, showcasing their name, role, and image in a clean and prominent layout. Ideal for “About Us” or organizational pages, this card supports transparency, recognition, and trust by humanizing the team behind a service or product.

### How it works

The card combines a large profile image with a bold name and a secondary role label, helping users quickly understand who the person is and what they do. It maintains a consistent format across team listings, promoting clarity and visual harmony.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-teamsection-card
    image_src="static/media/public_images/Teammembercard.svg"
    header_text="Jeffery Walker"
    body_text="Cloud Architect"
    custom_class="dda-w-50 my-custom-class"
    component_mode=""
    card_type="variant-one"
></dda-teamsection-card>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaTeamsectionCard
    image_src="static/media/public_images/Teammembercard.svg"
    header_text="Jeffery Walker"
    body_text="Cloud Architect"
    custom_class="dda-w-50 my-custom-class"
    component_mode=""
    card_type="variant-one"
></DdaTeamsectionCard>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaTeamsectionCard
    image_src="static/media/public_images/Teammembercard.svg"
    header_text="Jeffery Walker"
    body_text="Cloud Architect"
    custom_class="dda-w-50 my-custom-class"
    component_mode=""
    card_type="variant-one"
></DdaTeamsectionCard>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-teamsection-card
    image_src="static/media/public_images/Teammembercard.svg"
    header_text="Jeffery Walker"
    body_text="Cloud Architect"
    custom_class="dda-w-50 my-custom-class"
    component_mode=""
    card_type="variant-one"
></dda-teamsection-card>
```

{% endtab %}
{% endtabs %}

### Properties

| Property        | Description                                                                                                                                                                            | Type     |
| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| image\_src      | Path to the profile or avatar image displayed on the card.                                                                                                                             | `string` |
| header\_text    | The name or title shown on the card, typically used for team member names (e.g., "Jeffery Walker").                                                                                    | `string` |
| body\_text      | Subheading or role designation for the individual (e.g., "Cloud Architect").                                                                                                           | `string` |
| custom\_class   | Optional custom CSS classes for styling adjustments or layout control (e.g., width, margins).                                                                                          | `string` |
| component\_mode | Optional mode for visual or functional variation (e.g., light/dark theme or layout variant).                                                                                           | `string` |
| card\_type      | Defines the visual variant or structural layout of the card (e.g.,  `variant-one, variant-two, variant-three, variant-four, variant-five, variant-six, variant-seven, variant-eight` ) | `string` |

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FbKGJbysSrlXPWPUFXH6m%2FTeam%20Section%20Card%20-%20Anatomy.png?alt=media&amp;token=37497552-3d3e-4448-973b-09188f4dc4b0" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Image:** A large, centered photo representing the team member, providing visual recognition and a human touch.

**Name:** Bold text displaying the team member's name for clear identification.

**Job Title:** A secondary label beneath the name that indicates the person’s role or position within the organization.

**Container:** A subtle overlay or box that groups the name and job title, ensuring readability and visual hierarchy against the image background.

***

## Dos and Don'ts

| Dos                                                                                     | Don'ts                                                                                      |
| --------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
| **Use high-quality, professional images** that clearly show the individual.             | Don’t use low-resolution, blurry, or unprofessional photos.                                 |
| **Maintain visual consistency** across all team cards in size, layout, and typography.  | **Don’t use inconsistent fonts or spacing** between team cards.                             |
| **Ensure readability** by using contrasting text over image backgrounds or a container. | **Don’t place text directly on busy image areas** without a container or overlay.           |
| **Use consistent styling and spacing** if multiple cards are displayed together.        | **Don’t ignore accessibility**—ensure text is legible and semantic structure is maintained. |


# Video Card

Video cards deliver key video content with supporting details and actions in a compact, engaging layout.

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FGWqrSgM9L31JEWJEvFTt%2FVideo%20Card%20-%20Overview.png?alt=media&amp;token=1dbe64b1-3df7-4a2b-af9f-90b59b39a567" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

A Video Card is used to promote or preview video content within a website or application. It’s ideal for media libraries, learning platforms, or landing pages where users can engage with visual media directly or be directed to a detailed video page.

### How it works

The card typically includes a thumbnail image, play icon overlay, title, and optional description or metadata (e.g., duration or category). Clicking the card either plays the video in-place or redirects the user to a dedicated video screen. This format encourages quick discovery and intuitive playback.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-image-card
    image_src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvhlzYedWoCSkLB2HFQ87P5gPjCmJqmTt8vw&amp;s"
    image_alt="alternate text"
    header_text="Backend Team"
    date_text="31 September 2024"
    body_text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    left_button_name="Cancel"
    left_button_href="https://example.com"
    left_button_rel=""
    left_button_start_icon=""
    left_button_end_icon=""
    left_button_data_fancybox=""
    left_button_target=""
    right_button_name="Continue"
    right_button_href="https://example.com"
    right_button_rel=""
    right_button_start_icon=""
    right_button_end_icon=""
    right_button_data_fancybox=""
    right_button_target=""
    file_size="Size: "
    file_type="Type: "
    custom_class=""
    component_mode=""
></dda-image-card>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaImageCard
    image_src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvhlzYedWoCSkLB2HFQ87P5gPjCmJqmTt8vw&amp;s"
    image_alt="alternate text"
    header_text="Backend Team"
    date_text="31 September 2024"
    body_text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    left_button_name="Cancel"
    left_button_href="https://example.com"
    left_button_rel=""
    left_button_start_icon=""
    left_button_end_icon=""
    left_button_data_fancybox=""
    left_button_target=""
    right_button_name="Continue"
    right_button_href="https://example.com"
    right_button_rel=""
    right_button_start_icon=""
    right_button_end_icon=""
    right_button_data_fancybox=""
    right_button_target=""
    file_size="Size: "
    file_type="Type: "
    custom_class=""
    component_mode=""
></DdaImageCard>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaImageCard
    image_src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvhlzYedWoCSkLB2HFQ87P5gPjCmJqmTt8vw&amp;s"
    image_alt="alternate text"
    header_text="Backend Team"
    date_text="31 September 2024"
    body_text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    left_button_name="Cancel"
    left_button_href="https://example.com"
    left_button_rel=""
    left_button_start_icon=""
    left_button_end_icon=""
    left_button_data_fancybox=""
    left_button_target=""
    right_button_name="Continue"
    right_button_href="https://example.com"
    right_button_rel=""
    right_button_start_icon=""
    right_button_end_icon=""
    right_button_data_fancybox=""
    right_button_target=""
    file_size="Size: "
    file_type="Type: "
    custom_class=""
    component_mode=""
></DdaImageCard>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-image-card
    image_src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvhlzYedWoCSkLB2HFQ87P5gPjCmJqmTt8vw&amp;s"
    image_alt="alternate text"
    header_text="Backend Team"
    date_text="31 September 2024"
    body_text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    left_button_name="Cancel"
    left_button_href="https://example.com"
    left_button_rel=""
    left_button_start_icon=""
    left_button_end_icon=""
    left_button_data_fancybox=""
    left_button_target=""
    right_button_name="Continue"
    right_button_href="https://example.com"
    right_button_rel=""
    right_button_start_icon=""
    right_button_end_icon=""
    right_button_data_fancybox=""
    right_button_target=""
    file_size="Size: "
    file_type="Type: "
    custom_class=""
    component_mode=""
></dda-image-card>
```

{% endtab %}
{% endtabs %}

### Properties

| Prop                         | Type   | Description                                                       |
| ---------------------------- | ------ | ----------------------------------------------------------------- |
| `image_src`                  | string | URL of the image displayed in the card.                           |
| `image_alt`                  | string | Alternate text for the image for accessibility.                   |
| `header_text`                | string | Header title text shown on the card.                              |
| `date_text`                  | string | Date or subtitle text shown under the header.                     |
| `body_text`                  | string | Main content or description text displayed on the card.           |
| `left_button_name`           | string | Text for the left action button.                                  |
| `left_button_href`           | string | URL for the left action button link.                              |
| `left_button_rel`            | string | Rel attribute for the left button (e.g. `"noopener noreferrer"`). |
| `left_button_start_icon`     | string | Icon name to show before left button text (optional).             |
| `left_button_end_icon`       | string | Icon name to show after left button text (optional).              |
| `left_button_data_fancybox`  | string | Data attribute for fancybox integration on left button.           |
| `left_button_target`         | string | Target attribute for left button (`"_blank"`, `"_self"`, etc).    |
| `right_button_name`          | string | Text for the right action button.                                 |
| `right_button_href`          | string | URL for the right action button link.                             |
| `right_button_rel`           | string | Rel attribute for the right button.                               |
| `right_button_start_icon`    | string | Icon name before right button text (optional).                    |
| `right_button_end_icon`      | string | Icon name after right button text (optional).                     |
| `right_button_data_fancybox` | string | Data attribute for fancybox on right button.                      |
| `right_button_target`        | string | Target attribute for right button.                                |
| `file_size`                  | string | Text label showing file size (if applicable).                     |
| `file_type`                  | string | Text label showing file type (if applicable).                     |
| `custom_class`               | string | Additional CSS class(es) to customize styling.                    |
| `component_mode`             | string | Optional mode to alter card style or behavior (if implemented).   |

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FkK1En2YZMn2dg1blIJM8%2FVideo%20Card%20-%20Anatomy.png?alt=media&amp;token=3694ef1b-88fa-4781-aa87-fd8ca4f187cc" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Avatar**: Represents the author, speaker, or contributor associated with the video.

**Video**: A thumbnail or preview still of the video content; serves as a visual hook.

**Date Label**: Displays the publishing or recording date for quick context.

**Card Title**: Communicates the main subject or title of the video, drawing user attention.

**Description**: A short summary or context related to the video content.

**Divider**: Separates content from actions, maintaining visual hierarchy.

**Primary Button**: A main action (e.g., Continue or Watch), driving user engagement.

**Tertiary Button**: A low-priority action (e.g., Cancel), offering users a non-primary route.

***

## Dos and Don'ts

| Dos                                                                             | Don'ts                                                        |
| ------------------------------------------------------------------------------- | ------------------------------------------------------------- |
| Use a high-quality, relevant thumbnail or still for the video.                  | Don’t use blurry, unrelated, or low-resolution videos.        |
| Clearly label the video title and provide a short, meaningful description.      | Don’t use vague or overly long titles and descriptions.       |
| Include a visible play indicator or call-to-action (e.g., “Watch”, “Continue”). | Don’t make users guess whether the card is interactive.       |
| Use consistent styling for buttons and spacing between elements.                | Don’t overcrowd the card or use inconsistent visual elements. |


# Custom Cards

Custom cards provide a flexible, user-driven layout that allows full control over the card’s appearance and content. Ideal for showcasing a variety of data types or visuals, these cards can be styled,

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FPaSaPl2wByRU3TbalOaR%2FCustom-Card.png?alt=media&amp;token=409fa799-c8fc-43c5-b040-b8a58d3a061c" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Custom cards are perfect when you need flexibility in both design and content. Use them when standard card layouts don't meet your requirements, and you want to tailor the structure, style, and interaction to suit specific data types, user needs, or branding guidelines. Ideal for dashboards, content feeds, or modular UI sections, custom cards empower designers and developers to create rich, personalized components.

### How it works

Custom cards act as a configurable container that supports dynamic content and layout customization. Users can define their own combinations of elements—such as headings, icons, buttons, media, and metadata—and control styling aspects like spacing, colors, and typography. This modular approach enables the creation of reusable components while allowing full creative freedom to adapt to various use cases. Optional slots or configuration props can be used to inject custom content or interactivity, making the cards highly versatile across projects.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-custom-card
    card_header_text="Card Custom Title"
    card_header_icon="more_horiz"
    card_header_icon_id="cartHeaderdotts"
    custom_class="custom-card"
    component_mode=""
>
    <img src="https://lipsum.app/id/12/1800x800" class="dda-card-img dda-rounded-md" alt="card image"/>
    <h5 class="h5 Regular" aria-label="Card title">Card main title</h5>
    <p class="dda-card-text dda-d-flex dda-align-items-start dda-gap-2" aria-label="Card description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <div class="dda-row">
        <div class="dda-col-6">
            <dda-button
                button_type="button"
                button_color="default-primary"
                start_icon=""
                button_text="Cancel"
                end_icon=""
                button_id="default-primary-btn"
                aria_label="default primary button"
                button_name="defaultPrimaryButton"
                value="default-primary-value"
                button_shape="default"
                size="md"
                gap="1"
                disabled="false"
                custom_class="dda-w-100"
                component_mode=""
                onclick="console.log('native click')"
            ></dda-button>
        </div>
        <div class="dda-col-6">
            <dda-button
                button_type="button"
                button_color="default-primary"
                start_icon=""
                button_text="Submit"
                end_icon=""
                button_id="default-primary-btn"
                aria_label="default primary button"
                button_name="defaultPrimaryButton"
                value="default-primary-value"
                button_shape="default"
                size="md"
                gap="1"
                disabled="false"
                custom_class="dda-w-100"
                component_mode=""
                onclick="console.log('native click')"
            ></dda-button>
        </div>
    </div>
</dda-custom-card>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaCustomCard
    card_header_text="Card Custom Title"
    card_header_icon="more_horiz"
    card_header_icon_id="cartHeaderdotts"
    custom_class="custom-card"
    component_mode=""
>
    <img src="https://lipsum.app/id/12/1800x800" class="dda-card-img dda-rounded-md" alt="card image"/>
    <h5 class="h5 Regular" aria-label="Card title">Card main title</h5>
    <p class="dda-card-text dda-d-flex dda-align-items-start dda-gap-2" aria-label="Card description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <div class="dda-row">
        <div class="dda-col-6">
            <dda-button
                button_type="button"
                button_color="default-primary"
                start_icon=""
                button_text="Cancel"
                end_icon=""
                button_id="default-primary-btn"
                aria_label="default primary button"
                button_name="defaultPrimaryButton"
                value="default-primary-value"
                button_shape="default"
                size="md"
                gap="1"
                disabled="false"
                custom_class="dda-w-100"
                component_mode=""
                onclick="console.log('native click')"
            ></dda-button>
        </div>
        <div class="dda-col-6">
            <dda-button
                button_type="button"
                button_color="default-primary"
                start_icon=""
                button_text="Submit"
                end_icon=""
                button_id="default-primary-btn"
                aria_label="default primary button"
                button_name="defaultPrimaryButton"
                value="default-primary-value"
                button_shape="default"
                size="md"
                gap="1"
                disabled="false"
                custom_class="dda-w-100"
                component_mode=""
                onclick="console.log('native click')"
            ></dda-button>
        </div>
    </div>
</DdaCustomCard>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaCustomCard
    card_header_text="Card Custom Title"
    card_header_icon="more_horiz"
    card_header_icon_id="cartHeaderdotts"
    custom_class="custom-card"
    component_mode=""
>
    <img src="https://lipsum.app/id/12/1800x800" class="dda-card-img dda-rounded-md" alt="card image"/>
    <h5 class="h5 Regular" aria-label="Card title">Card main title</h5>
    <p class="dda-card-text dda-d-flex dda-align-items-start dda-gap-2" aria-label="Card description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <div class="dda-row">
        <div class="dda-col-6">
            <dda-button
                button_type="button"
                button_color="default-primary"
                start_icon=""
                button_text="Cancel"
                end_icon=""
                button_id="default-primary-btn"
                aria_label="default primary button"
                button_name="defaultPrimaryButton"
                value="default-primary-value"
                button_shape="default"
                size="md"
                gap="1"
                disabled="false"
                custom_class="dda-w-100"
                component_mode=""
                onclick="console.log('native click')"
            ></dda-button>
        </div>
        <div class="dda-col-6">
            <dda-button
                button_type="button"
                button_color="default-primary"
                start_icon=""
                button_text="Submit"
                end_icon=""
                button_id="default-primary-btn"
                aria_label="default primary button"
                button_name="defaultPrimaryButton"
                value="default-primary-value"
                button_shape="default"
                size="md"
                gap="1"
                disabled="false"
                custom_class="dda-w-100"
                component_mode=""
                onclick="console.log('native click')"
            ></dda-button>
        </div>
    </div>
</DdaCustomCard>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-custom-card
    card_header_text="Card Custom Title"
    card_header_icon="more_horiz"
    card_header_icon_id="cartHeaderdotts"
    custom_class="custom-card"
    component_mode=""
>
    <img src="https://lipsum.app/id/12/1800x800" class="dda-card-img dda-rounded-md" alt="card image"/>
    <h5 class="h5 Regular" aria-label="Card title">Card main title</h5>
    <p class="dda-card-text dda-d-flex dda-align-items-start dda-gap-2" aria-label="Card description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <div class="dda-row">
        <div class="dda-col-6">
            <dda-button
                button_type="button"
                button_color="default-primary"
                start_icon=""
                button_text="Cancel"
                end_icon=""
                button_id="default-primary-btn"
                aria_label="default primary button"
                button_name="defaultPrimaryButton"
                value="default-primary-value"
                button_shape="default"
                size="md"
                gap="1"
                disabled="false"
                custom_class="dda-w-100"
                component_mode=""
                onclick="console.log('native click')"
            ></dda-button>
        </div>
        <div class="dda-col-6">
            <dda-button
                button_type="button"
                button_color="default-primary"
                start_icon=""
                button_text="Submit"
                end_icon=""
                button_id="default-primary-btn"
                aria_label="default primary button"
                button_name="defaultPrimaryButton"
                value="default-primary-value"
                button_shape="default"
                size="md"
                gap="1"
                disabled="false"
                custom_class="dda-w-100"
                component_mode=""
                onclick="console.log('native click')"
            ></dda-button>
        </div>
    </div>
</dda-custom-card>
```

{% endtab %}
{% endtabs %}

### Properties

| Property               | Description                                                                                                                        | Type     |
| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | -------- |
| card\_header\_text     | The label displayed at the top of the banner card, typically indicating the card’s category or context (e.g., "Event").            | `string` |
| card\_header\_icon     | Name of the Icon to be shown alongside the header text.                                                                            | `string` |
| card\_header\_icon\_id | Unique identifier for the header icon element. Useful for targeting the icon programmatically (e.g., for click events or testing). | `string` |

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FYMC1RzLmoQy5OgWocHZM%2FCustom-card-details.png?alt=media&amp;token=0f30a829-4827-41c2-9ecf-317f49ac6a58" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Card Title:** Indicates the type of content (e.g., “Event”), helping users immediately recognize the card’s purpose.

**Icon:** **con:** A contextual icon that can represent various functions such as settings, alerts, status indicators, or additional options—serving as a quick access point for supporting actions or information relevant to the event card.

**Image:** A banner image representing the event, used for visual context and thematic consistency.

**Event Title:** The primary title of the event, clearly stating its name or subject.

**Description:** A short text summary providing users with a quick overview of the event’s focus or content.

**Button:** A clear call-to-action that guides users to view more detailed event information.

***

## Dos and Don'ts

| Dos                                                                                          | Don'ts                                                                                   |
| -------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
| **Use clear, legible icons** that immediately convey the card's purpose or action.           | **Don’t use low-quality or blurry images** for the `image_src`—it reduces visual appeal. |
| **Write concise, meaningful titles** to ensure quick understanding.                          | **Avoid long or vague titles** that don’t communicate the card’s content.                |
| **Keep descriptions short and relevant** to avoid overwhelming users.                        | **Don’t overload the description** with too much text—keep it scannable.                 |
| **Use consistent styling and spacing** if multiple cards are displayed together.             | **Avoid placing multiple cards without spacing**, which can cause visual clutter.        |
| Maintain a consistent design language across all cards to ensure a cohesive user experience. | **Don’t leave the `onclick` empty or use console logs in production.**                   |


# Chips

Chips are small, interactive components used to display information, filter content, or trigger actions.

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2Fj9tOJxZBIMpGjrw8KIzk%2FChips%20-%20Overview.png?alt=media&amp;token=0617a004-3f06-4c5f-a015-5023d87e696d" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Chips are used to represent information, filter options, or initiate actions in a compact format. They are suitable for displaying tags, categories, contacts, and other small content items. Chips can be used individually or in groups, offering an efficient way to show content or actions in limited space.

### How it works

A chip typically includes a label and may feature optional elements like icons or buttons for additional actions. Chips can be interactive, allowing users to click or tap them to trigger actions (e.g., filtering content or selecting options), or static, simply displaying information without interaction.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-chip
    chip_text="Label"
    bg_color="grey"
    chip_icon="sentiment_satisfied"
    chip_icon_size="md"
    chip_icon_family="material-icons material-symbols-outlined"
    show_close_icon="true"
    custom_class=""
    component_mode=""
    onclick="console.log('clicked')"
>
</dda-chip>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaChip 
    chip_text="Label"
    bg_color="grey"
    chip_icon="sentiment_satisfied"
    chip_icon_size="md"
    chip_icon_family="material-icons material-symbols-outlined"
    show_close_icon="true"
    custom_class=""
    component_mode=""
    onclick="console.log('clicked')"
>
</DdaChip>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaChip 
    chip_text="Label"
    bg_color="grey"
    chip_icon="sentiment_satisfied"
    chip_icon_size="md"
    chip_icon_family="material-icons material-symbols-outlined"
    show_close_icon="true"
    custom_class=""
    component_mode=""
    onclick="console.log('clicked')"
>
</DdaChip>
```

{% endtab %}

{% tab title="Angular" %}

<pre class="language-jsx"><code class="lang-jsx">&#x3C;dda-chip 
<strong>    chip_text="Label"
</strong>    bg_color="grey"
    chip_icon="sentiment_satisfied"
    chip_icon_size="md"
    chip_icon_family="material-icons material-symbols-outlined"
    show_close_icon="true"
    rounded="circle"
    custom_class=""
    component_mode=""
    onclick="console.log('clicked')"
>
&#x3C;/dda-chip>
</code></pre>

{% endtab %}
{% endtabs %}

### Properties

| Property           | Description                                                                                                                | Type                          |
| ------------------ | -------------------------------------------------------------------------------------------------------------------------- | ----------------------------- |
| `bg_color`         | Specifies the background color of the chip. It can be predefined colors such as `'success'`, `'danger'`, `'warning'`, etc. | `string`                      |
| `clickHandler`     | A callback function triggered when the close icon is clicked. Accepts a `MouseEvent` parameter.                            | `(event: MouseEvent) => void` |
| `component_mode`   | Enables different modes for the component, potentially changing its appearance or behavior.                                | `string`                      |
| `custom_class`     | Allows users to pass additional CSS classes for custom styling.                                                            | `string`                      |
| `icon`             | The name of a Material Icon to be displayed at the beginning of the chip.                                                  | `string`                      |
| `rounded`          | Defines the roundness of the chip's edges. Accepts values like `'sm'`, `'circle'` for different border-radius levels.      | `string`                      |
| `show_close_icon`  | Determines whether a close (✕) icon should appear inside the chip, allowing users to remove it.                            | `boolean`                     |
| `size`             | Defines the size of the chip. Expected values are `'sm'`, `'md'`, or `'lg'`.                                               | `string`                      |
| `Chip Icon Family` | Define the icon font family                                                                                                | `string`                      |
| `Chip icon Text`   | Define the icon text                                                                                                       | `string`                      |

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2F5Rn8Mlh5hervob1gXGEZ%2FChips%20-%20Anatomy.png?alt=media&amp;token=aa1e2968-e11e-4c23-bfc7-4f8a44a1a1b6" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Lead Icon**: Positioned on the left side of the chip, the lead icon provides a visual representation related to the chip’s content or purpose, helping users quickly identify the context.

**Label**: The main text of the chip, indicating its content or purpose. It provides a brief, clear description to make the chip's function easily understandable.

**Trail Icon**: Positioned on the right side of the chip, the trail icon allows users to interact with the chip.

## Dos and Don'ts

| Use chips to represent information, filter options, or trigger actions. | Don't use chips for large blocks of text or complex interactions.    |
| ----------------------------------------------------------------------- | -------------------------------------------------------------------- |
| Label chips clearly to indicate their purpose.                          | Avoid using ambiguous or unclear labels for chips.                   |
| Ensure chips are large enough to be easily tappable or clickable.       | Don't make chips too small to interact with comfortably.             |
| Use consistent styling and spacing across all chips in the application. | Don't use inconsistent styles that may confuse users.                |
| Include icons or buttons in chips when additional actions are needed.   | Don't overcrowd chips with too many elements.                        |
| Provide clear visual feedback when chips are interacted with.           | Don't leave users guessing whether their interaction was successful. |


# Credit Card

Credit card visualizations are used to display key information about a credit card in a visually appealing format.

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FVgxKe6eAlP52gY1pAl9n%2FProgress%20Circles%20-%20Overview.png?alt=media&amp;token=203c8b3d-e6dd-48b6-958a-adfc524dfc6f" alt=""><figcaption></figcaption></figure>

## Usage

### **When to Use This Component**

Credit card visualizations are used in financial applications and dashboards to display essential information like card number, cardholder name, balance, and other relevant details. They are ideal for account overviews, payment details, or any interface where users need to view or manage their credit card information.

### **How It Works**

A credit card visualization component presents key credit card information in a design resembling a physical card, typically displaying details such as the card number, cardholder name, and balance. It may include various visual styles to represent different types of cards, enhancing the user’s understanding and organization of their financial information.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-credit-card
    balance="$5,750.20"
    name="MARIA GOMEZ"
    card_number="1289"
    card_type="https://www.mastercard.com/content/dam/public/brandcenter/assets/images/logos/mclogo-for-footer.svg"
    design="default"
    custom_class=""
    component_mode=""
></dda-credit-card>
```

{% endtab %}

{% tab title="React" %}

```jsx
   <DdaCreditCard
            balance="$5,750.20"
            name="MARIA GOMEZ"
            card_number="1289"
            card_type="https://www.mastercard.com/content/dam/public/brandcenter/assets/images/logos/mclogo-for-footer.svg"
            design="default"
            custom_class=""
            component_mode=""
        ></DdaCreditCard>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
    <DdaCreditCard
            balance="$5,750.20"
            name="MARIA GOMEZ"
            card_number="1289"
            card_type="https://www.mastercard.com/content/dam/public/brandcenter/assets/images/logos/mclogo-for-footer.svg"
            design="default"
            custom_class=""
            component_mode=""
        ></DdaCreditCard>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-credit-card
    balance="$5,750.20"
    name="MARIA GOMEZ"
    card_number="1289"
    card_type="https://www.mastercard.com/content/dam/public/brandcenter/assets/images/logos/mclogo-for-footer.svg"
    design="default"
    custom_class=""
    component_mode=""
></dda-credit-card>
```

{% endtab %}
{% endtabs %}

### Properties

<table><thead><tr><th width="193">Property</th><th>Description</th><th>Type</th></tr></thead><tbody><tr><td><code>balance</code></td><td>Represents the current balance displayed on the credit card.<br>Example: <code>"AED 50,000"</code> or <code>"$200.00"</code></td><td><code>string</code></td></tr><tr><td><code>card_number</code></td><td>The full card number, but only the last four digits are displayed for security.<br>Example: <code>"1234567812345678"</code> (will display as <code>**** 5678</code>)</td><td><code>string</code></td></tr><tr><td><code>card_type</code></td><td>A URL or path to the card type icon/image (e.g., Visa, MasterCard, etc.).<br>Example: <code>"/assets/icons/visa.png"</code></td><td><code>string</code></td></tr><tr><td><code>component_mode</code></td><td>Represents different modes/styles of the component, possibly controlled dynamically.</td><td><code>string</code></td></tr><tr><td><code>custom_class</code></td><td>Allows users to apply additional custom CSS classes to the component.</td><td><code>string</code></td></tr><tr><td><code>design</code></td><td>Specifies the design theme of the card, used for adding specific styling classes.</td><td><code>string</code></td></tr><tr><td><code>name</code></td><td>Displays the cardholder's name.<br>Example: <code>"John Doe"</code></td><td><code>string</code></td></tr></tbody></table>

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FhN73MnieKCjXrChN4y8z%2FProgress%20Circles%20-%20Anatomy.png?alt=media&amp;token=e5c3fec4-6a15-4d88-a7bb-5356f9814900" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Card Header**: Displays the header text, such as "Current Balance," indicating the purpose or type of information presented on the card.

**Card Balance**: Shows the current balance amount, providing the user with financial information at a glance.

**Cardholder's Name**: Displays the name of the cardholder, confirming ownership and identity on the card.

**Card Number**: Shows a partially masked card number for security, typically showing only the last four digits to help the user identify the card.

**Contactless Symbol**: Positioned in the upper right corner, this symbol indicates that the card supports contactless payments.

**Brand Logo**: Displays the logo of the card provider (e.g., Mastercard), adding visual identification of the issuing brand.

## Dos and Don'ts

| Dos                                                                                                 | Don'ts                                                                       |
| --------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
| Use credit card visualizations to display key information about credit cards clearly and concisely. | Don't overload the card with too much information that can clutter the view. |
| Ensure the card number is partially masked for security.                                            | Don't display the full card number unless absolutely necessary and secure.   |
| Label the fields clearly to indicate what each piece of information represents.                     | Avoid using ambiguous or unclear labels for card details.                    |
| Provide visual feedback when the card information is updated.                                       | Don't leave users guessing whether their information has been updated.       |
| Use consistent styling and spacing across all credit card visualizations in the application.        | Don't use inconsistent styles that may confuse users.                        |
| Ensure the design is responsive and looks good on all device sizes.                                 | Don't design the card visualization for a specific device only.              |


# Credit Card Input Field

Credit Card Input Field enables users to input and verify their card information.

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2Fm41E14oScGQAAkSFdG8O%2FCredit%20Card%20Field%20-%20Overview.png?alt=media&amp;token=35ebe305-00c7-4304-878c-8c3d8370ffc3" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Credit card fields are used in forms and input scenarios where users need to enter their credit card information for transactions. They ensure a consistent format for input, making it easier to validate and process the credit card number accurately.

### How it works

A credit card field component typically includes a label, an input area formatted specifically for credit card numbers, and optional elements like placeholder text or helper text to guide the user. It may have different states to reflect its status, such as focused, filled, or error. This component helps users enter credit card information in the correct format, improving both accuracy and ease of use.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-creditcard-field
    placeholder="0000 - 0000 - 0000 - 0000"
    label="Card Number"
    restrict_input="false"
    value=""
    card_icon="https://www.mastercard.com/content/dam/public/brandcenter/assets/images/logos/mclogo-for-footer.svg"
    size="default"
    helper_text="Helper or footer text"
    error_message=""
    validation_type="normal"
    custom_class=""
    component_mode=""
    input_id="input"
    aria_label="credit-card-field"
    onchange=""
    input_name="input"
></dda-creditcard-field>
```

{% endtab %}

{% tab title="React" %}

```jsx
 <DdaCreditcardField
    placeholder="0000 - 0000 - 0000 - 0000"
    label="Card Number"
    restrict_input="false"
    value=""
    card_icon="https://www.mastercard.com/content/dam/public/brandcenter/assets/images/logos/mclogo-for-footer.svg"
    size="default"
    helper_text="Helper or footer text"
    error_message=""
    validation_type="normal"
    custom_class=""
    component_mode=""
    input_id="input"
    aria_label="credit-card-field"
    onchange=""
    input_name="input"
  ></DdaCreditcardField>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
 <DdaCreditcardField
    placeholder="0000 - 0000 - 0000 - 0000"
    label="Card Number"
    restrict_input="false"
    value=""
    card_icon="https://www.mastercard.com/content/dam/public/brandcenter/assets/images/logos/mclogo-for-footer.svg"
    size="default"
    helper_text="Helper or footer text"
    error_message=""
    validation_type="normal"
    custom_class=""
    component_mode=""
    input_id="input"
    aria_label="credit-card-field"
    onchange=""
    input_name="input"
  ></DdaCreditcardField>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-creditcard-field
    placeholder="0000 - 0000 - 0000 - 0000"
    label="Card Number"
    restrict_input="false"
    value=""
    card_icon="https://www.mastercard.com/content/dam/public/brandcenter/assets/images/logos/mclogo-for-footer.svg"
    size="default"
    helper_text="Helper or footer text"
    error_message=""
    validation_type="normal"
    custom_class=""
    component_mode=""
    input_id="input"
    aria_label="credit-card-field"
    onchange=""
    input_name="input"
></dda-creditcard-field>
```

{% endtab %}
{% endtabs %}

### Properties

| Property          | Description                                                                                                                                                       | Type      |
| ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
| `aria_label`      | An optional `aria-label` attribute for improved accessibility, helping screen readers describe the input field to users with visual impairments.                  | `string`  |
| `card_icon`       | The path to the image representing the card icon, such as a credit card or payment method logo, that will be displayed next to the input field.                   | `string`  |
| `component_mode`  | A string representing a specific mode for the component, which can be used for styling or behavior modifications, such as 'edit' or 'view'.                       | `string`  |
| `custom_class`    | An optional custom CSS class that can be applied to the input field or the surrounding container for additional styling.                                          | `string`  |
| `disabled`        | A boolean flag that determines if the input field should be disabled. If `true`, the user won't be able to interact with the field.                               | `boolean` |
| `error_message`   | A message that will be displayed if there is an error related to the credit card input, such as an invalid card number.                                           | `string`  |
| `helper_text`     | Additional descriptive text or guidance that will be shown below the input field, typically providing hints to the user.                                          | `string`  |
| `input_id`        | The unique identifier (`id`) for the input field, which is useful for labeling, accessibility, and DOM manipulation.                                              | `string`  |
| `input_type`      | A string that defines the type of the input field. For example, this could control the appearance or behavior of the input (e.g., 'password' for obscuring text). | `string`  |
| `label`           | The label text associated with the input field. This is typically used to describe the input field's purpose.                                                     | `string`  |
| `placeholder`     | The placeholder text to be displayed in the input field when it is empty.                                                                                         | `string`  |
| `restrict_input`  | A boolean flag that, when set to `true`, limits the input field's length to 100 characters. If `false`, it allows a maximum of 25 characters.                     | `boolean` |
| `size`            | A string that determines the size of the input field. It could be values like 'small', 'medium', or 'large', which adjusts the styling of the input field.        | `string`  |
| `validation_type` | A string used to specify the validation style for the input field, such as 'required', 'invalid', or any custom validation type.                                  | `string`  |
| `value`           | The current value of the credit card input. It is used to set and update the value of the input programmatically.                                                 | `string`  |
| `input_name`      | Name attribute for the input field                                                                                                                                | `string`  |

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FpgYyhLK6ATimXArhvr1H%2FCredit%20Card%20Field%20-%20Anatomy.png?alt=media&amp;token=92459298-5379-42bd-a1d4-cb78246fd934" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Label**: Positioned above the input field, the label ("Card Number") indicates the purpose of the field, guiding users to enter their card number.

**Placeholder**: The placeholder text inside the input field ("0000 - 0000 - 0000 - 0000") provides a visual example of the expected card number format, helping users understand how to enter the information.

**Lead Icon**: Positioned to the left of the helper text, the lead icon provides an additional visual cue, often indicating information or help related to the input field.

**Caption**: Positioned below the input field, the caption provides additional instructions or context, such as "Helper or footer text," to assist users with the input.

## Dos and Don'ts

| Dos                                                                                              | Don'ts                                                                           |
| ------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------- |
| Use credit card fields to collect users' credit card numbers in a standardized format.           | Don't use credit card fields for non-credit card number inputs.                  |
| Label the credit card field clearly to indicate its purpose.                                     | Avoid using ambiguous or unclear labels for credit card fields.                  |
| Include placeholder text to show the expected credit card number format.                         | Don't rely solely on placeholder text for essential instructions.                |
| Provide helper text to explain any specific formatting requirements.                             | Don't overload the credit card field with too much information.                  |
| Ensure the credit card field is large enough to be easily tappable or clickable.                 | Avoid making the credit card field too small to interact with comfortably.       |
| Validate input and provide clear error messages when the credit card number format is incorrect. | Don't provide generic error messages that don't help users understand the issue. |
| Keep consistent styling and spacing across all credit card fields in the application.            | Don't use inconsistent styles that may confuse users.                            |


# Header

Headers play a crucial role in structuring content, providing clear navigation and enhancing readability by organizing information into distinct, easily digestible sections for users.

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FwJ7SrzaAKMbNrkCOXBGX%2FHeader%20-%20Overview.png?alt=media&amp;token=a8d45770-18d5-4da5-aaa4-3c7d8c2b048f" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

The header component should be used on all pages of the website to provide a consistent navigation experience for users. It serves as a central hub for accessing key sections of the site, ensuring users can easily locate important features or content regardless of their current location within the website.

### How it works

The header component typically includes three key sections: a branding area, navigation tabs, and interactive controls. The branding area prominently features logos for clear organizational identity. Navigation tabs provide quick access to different sections, with a visual indicator for the active tab. Interactive controls include a search bar for content discovery, an accessibility icon for usability features, a language toggle for switching between languages, and a login button for user authentication. The header is designed to adapt fluidly to different screen sizes, ensuring clarity, usability, and accessibility across devices.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-header
    first-logo-href="https://www.dubai.gov.ae"
    first-logo-src="https://www.dof.gov.ae/Style Library/img/gov-logo.svg"
    first-logo-white-src="https://www.dof.gov.ae/Style Library/img/gov-logo-white.svg"
    first-logo-alt="Dubai-Digital-Authority"
    first-logo-target="_blank"
	
    second-logo-href="https://www.dubai.gov.ae"
    second-logo-src="https://www.digitaldubai.ae/ResourcePackages/Theme/assets/dist/images/logo.svg"
    second-logo-white-src="https://www.digitaldubai.ae/ResourcePackages/Theme/assets/dist/images/logo-white.svg"
    second-logo-alt="Dubai-Digital-Authority"
	
    search_button_name="search_button_name"
    search_input_name="search_input_name"
    search_input_placeholder="Search"
    searchfunctionality="() => console.log('Search Functionality')"
    search_tooltip="Search"
    mobile-menu-search-id="mobileSearch"
    mobile-menu-search-url="javascript:void(0)"
	
    use-predesigned-accessibility-menu="true"
    accessibility_tooltip="Accessibility"
    toggle_accessibility_button_name="toggle_accessibility_button_name"
    accessibility_button_text="accessibility_button_text"
    accessibility_button_id="accessibility_button_id"
    accessibility_button_icon_family="material-icons  material-symbols-outlined"
    accessibility_button_icon_name="accessible_forward"
    accessibilitymenufunctionality="() => console.log('Accessibility Menu Functionality')"
    close_accessibility_button_name="close_accessibility_button_name"
	
    contrast_title="Contrast"
    contrast_description="Select your preferred contrast setting"
    contrast_noraml_text="Normal"
    contrast_color_blind_text="Colours Blind"
    contrast_red_weakness_text="Red Weakness"
    contrast_green_weakness_text="Green Weakness"
	
    normalcontrast="() => console.log('Normal Text')"
    blindcontrast="() => console.log('Blind Text')"
    redcontrast="() => console.log('Red Text')"
    greencontrast="() => console.log('Green Text')"
	
    screen_reader_title="Screen Reader"
    screen_reader_description="Listen to the content of the page by clicking play or listen"
    read_speaker_link="app-eu.readspeaker.com"
	
    text_size_title="Text Size"
    text_size_description="Use the buttons below to increase or decrease the text size"
    smtextsize="() => console.log('Small Text')"
    basetextsize="() => console.log('Base Text')"
    lgtextsize="() => console.log('Large Text')"
	
    language_tooltip="Language"
    language_text="العربية"
    language_button_name="language_button_name"
    languageswitch="() => console.log('Language Switcher')"
	
    login_tooltip="Login"
    login-text="Login"
    login-link="/Login"
    login-icon="account_circle"
    use-login-popup="true"
    login-popup-links='[
        {"popupItemLabel":"Profile","url":"#"},
        {"popupItemLabel":"Logout","url":"#"} 
    ]'
	
    hamburger_menu_button_name="Menu"
    side-main-menu-title="Main Menu"
    side-menu-items='[{"label":"Home","active":"true","href":"#","subMenu":[]},{"label":"Initiatives","href":"#","subMenu":[{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-1","href":"#","subMenu":[{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-2","href":"#","subMenu":[{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-4","href":"#"}]},{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-3","href":"#"}]},{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-1","href":"#","subMenu":[{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-2","href":"#","subMenu":[{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-4","href":"#"}]},{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-3","href":"#"}]}]},{"label":"Services","href":"#","subMenu":[{"headerLabel":"Service","subLinkClass":"","label":"Service-1","href":"#"},{"headerLabel":"Service","subLinkClass":"","label":"Service-2","href":"#"}]},{"label":"Data","href":"#","subMenu":[]},{"label":"Government Services","href":"#","subMenu":[]},{"label":"Investor Relations","href":"#","subMenu":[]},{"label":"Locations","href":"#","subMenu":[]},{"label":"Newsroom","href":"#","subMenu":[]},{"label":"Contact Us","href":"#","subMenu":[]}]'
    
    hide-other-menu="false"
    side-other-menu-title="Other"
    other-menu-items='[{"label":"Menu 1","active":"true","href":"#"},{"label":"Menu 2","href":"#"},{"label":"Menu 3","href":"#"}]'
    
    close_menu_button_name="close_menu_button_name"
    
    quick-links='[
	{"headerMenuLabel":"Home","active":"true","url":"#"}
	
	//Default Sub Menu
	{"headerMenuLabel":"About Us","url":"javascript:void(0)","type":"dda_default_submenu","children":[
	    {"headerMenuLabel":"Submenu 1","url":"#","defaultSubMenuTitle":"Submenu 1 Title","children":[
		{"headerMenuLabel":"SubSubmenu 1","url":"#"},
		{"headerMenuLabel":"SubSubmenu 1","url":"#"}
	    ]},
	    {"headerMenuLabel":"Submenu 2","url":"#","defaultSubMenuTitle":"Submenu 2 Title","children":[
		{"headerMenuLabel":"SubSubmenu 2","url":"#"},
		{"headerMenuLabel":"SubSubmenu 2","url":"#"}
	    ]},
	    {"headerMenuLabel":"Submenu 3","url":"#"}
	]},
	
	//Mega Menu
	{"headerMenuLabel":"Services","url":"javascript:void(0)","type":"dda_main_megamenu","children":[
	    {"title":"QUICK LINKS 1","items":[
	        {"headerMenuLabel":"Service 1","url":"#","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},
		{"headerMenuLabel":"Service 2","url":"#"},
		{"headerMenuLabel":"Service 3","url":"#"}
	    ]},
	    {"title":"QUICK LINKS 2","items":[
		{"headerMenuLabel":"Service 1","url":"#"},
		{"headerMenuLabel":"Service 2","url":"#"},
		{"headerMenuLabel":"Service 3","url":"#"}
	    ]},
	    {"title":"QUICK LINKS 3","items":[
		{"headerMenuLabel":"Service 3","url":"#"}
	    ]},
	    {"title":"QUICK LINKS 4","items":[
		{"headerMenuLabel":"Service 4","url":"#"}
            ]}
	]},
		
	{"headerMenuLabel":"Contact","url":"#"}
    ]'
></dda-header>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaHeader
    first-logo-href="https://www.dubai.gov.ae"
    first-logo-src="https://www.dof.gov.ae/Style Library/img/gov-logo.svg"
    first-logo-white-src="https://www.dof.gov.ae/Style Library/img/gov-logo-white.svg"
    first-logo-alt="Dubai-Digital-Authority"
    first-logo-target="_blank"
	
    second-logo-href="https://www.dubai.gov.ae"
    second-logo-src="https://www.digitaldubai.ae/ResourcePackages/Theme/assets/dist/images/logo.svg"
    second-logo-white-src="https://www.digitaldubai.ae/ResourcePackages/Theme/assets/dist/images/logo-white.svg"
    second-logo-alt="Dubai-Digital-Authority"
	
    search_button_name="search_button_name"
    search_input_name="search_input_name"
    search_input_placeholder="Search"
    searchfunctionality="() => console.log('Search Functionality')"
    search_tooltip="Search"
    mobile-menu-search-id="mobileSearch"
    mobile-menu-search-url="javascript:void(0)"
	
    use-predesigned-accessibility-menu="true"
    accessibility_tooltip="Accessibility"
    toggle_accessibility_button_name="toggle_accessibility_button_name"
    accessibility_button_text="accessibility_button_text"
    accessibility_button_id="accessibility_button_id"
    accessibility_button_icon_family="material-icons  material-symbols-outlined"
    accessibility_button_icon_name="accessible_forward"
    accessibilitymenufunctionality="() => console.log('Accessibility Menu Functionality')"
    close_accessibility_button_name="close_accessibility_button_name"
	
    contrast_title="Contrast"
    contrast_description="Select your preferred contrast setting"
    contrast_noraml_text="Normal"
    contrast_color_blind_text="Colours Blind"
    contrast_red_weakness_text="Red Weakness"
    contrast_green_weakness_text="Green Weakness"
	
    normalcontrast="() => console.log('Normal Text')"
    blindcontrast="() => console.log('Blind Text')"
    redcontrast="() => console.log('Red Text')"
    greencontrast="() => console.log('Green Text')"
	
    screen_reader_title="Screen Reader"
    screen_reader_description="Listen to the content of the page by clicking play or listen"
    read_speaker_link="app-eu.readspeaker.com"
	
    text_size_title="Text Size"
    text_size_description="Use the buttons below to increase or decrease the text size"
    smtextsize="() => console.log('Small Text')"
    basetextsize="() => console.log('Base Text')"
    lgtextsize="() => console.log('Large Text')"
	
    language_tooltip="Language"
    language_text="العربية"
    language_button_name="language_button_name"
    languageswitch="() => console.log('Language Switcher')"
	
    login_tooltip="Login"
    login-text="Login"
    login-link="/Login"
    login-icon="account_circle"
    use-login-popup="true"
    login-popup-links='[
        {"popupItemLabel":"Profile","url":"#"},
        {"popupItemLabel":"Logout","url":"#"} 
    ]'
	
    hamburger_menu_button_name="Menu"
    side-main-menu-title="Main Menu"
    side-menu-items='[{"label":"Home","active":"true","href":"#","subMenu":[]},{"label":"Initiatives","href":"#","subMenu":[{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-1","href":"#","subMenu":[{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-2","href":"#","subMenu":[{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-4","href":"#"}]},{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-3","href":"#"}]},{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-1","href":"#","subMenu":[{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-2","href":"#","subMenu":[{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-4","href":"#"}]},{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-3","href":"#"}]}]},{"label":"Services","href":"#","subMenu":[{"headerLabel":"Service","subLinkClass":"","label":"Service-1","href":"#"},{"headerLabel":"Service","subLinkClass":"","label":"Service-2","href":"#"}]},{"label":"Data","href":"#","subMenu":[]},{"label":"Government Services","href":"#","subMenu":[]},{"label":"Investor Relations","href":"#","subMenu":[]},{"label":"Locations","href":"#","subMenu":[]},{"label":"Newsroom","href":"#","subMenu":[]},{"label":"Contact Us","href":"#","subMenu":[]}]'
    
    hide-other-menu="false"
    side-other-menu-title="Other"
    other-menu-items='[{"label":"Menu 1","active":"true","href":"#"},{"label":"Menu 2","href":"#"},{"label":"Menu 3","href":"#"}]'
    
    close_menu_button_name="close_menu_button_name"
    
    quick-links='[
	{"headerMenuLabel":"Home","active":"true","url":"#"}
	
	//Default Sub Menu
	{"headerMenuLabel":"About Us","url":"javascript:void(0)","type":"dda_default_submenu","children":[
	    {"headerMenuLabel":"Submenu 1","url":"#","defaultSubMenuTitle":"Submenu 1 Title","children":[
		{"headerMenuLabel":"SubSubmenu 1","url":"#"},
		{"headerMenuLabel":"SubSubmenu 1","url":"#"}
	    ]},
	    {"headerMenuLabel":"Submenu 2","url":"#","defaultSubMenuTitle":"Submenu 2 Title","children":[
		{"headerMenuLabel":"SubSubmenu 2","url":"#"},
		{"headerMenuLabel":"SubSubmenu 2","url":"#"}
	    ]},
	    {"headerMenuLabel":"Submenu 3","url":"#"}
	]},
	
	//Mega Menu
	{"headerMenuLabel":"Services","url":"javascript:void(0)","type":"dda_main_megamenu","children":[
	    {"title":"QUICK LINKS 1","items":[
	        {"headerMenuLabel":"Service 1","url":"#","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},
		{"headerMenuLabel":"Service 2","url":"#"},
		{"headerMenuLabel":"Service 3","url":"#"}
	    ]},
	    {"title":"QUICK LINKS 2","items":[
		{"headerMenuLabel":"Service 1","url":"#"},
		{"headerMenuLabel":"Service 2","url":"#"},
		{"headerMenuLabel":"Service 3","url":"#"}
	    ]},
	    {"title":"QUICK LINKS 3","items":[
		{"headerMenuLabel":"Service 3","url":"#"}
	    ]},
	    {"title":"QUICK LINKS 4","items":[
		{"headerMenuLabel":"Service 4","url":"#"}
            ]}
	]},
		
	{"headerMenuLabel":"Contact","url":"#"}
    ]'
><DdaHeader/>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaHeader
    first-logo-href="https://www.dubai.gov.ae"
    first-logo-src="https://www.dof.gov.ae/Style Library/img/gov-logo.svg"
    first-logo-white-src="https://www.dof.gov.ae/Style Library/img/gov-logo-white.svg"
    first-logo-alt="Dubai-Digital-Authority"
    first-logo-target="_blank"
	
    second-logo-href="https://www.dubai.gov.ae"
    second-logo-src="https://www.digitaldubai.ae/ResourcePackages/Theme/assets/dist/images/logo.svg"
    second-logo-white-src="https://www.digitaldubai.ae/ResourcePackages/Theme/assets/dist/images/logo-white.svg"
    second-logo-alt="Dubai-Digital-Authority"
	
    search_button_name="search_button_name"
    search_input_name="search_input_name"
    search_input_placeholder="Search"
    searchfunctionality="() => console.log('Search Functionality')"
    search_tooltip="Search"
    mobile-menu-search-id="mobileSearch"
    mobile-menu-search-url="javascript:void(0)"
	
    use-predesigned-accessibility-menu="true"
    accessibility_tooltip="Accessibility"
    toggle_accessibility_button_name="toggle_accessibility_button_name"
    accessibility_button_text="accessibility_button_text"
    accessibility_button_id="accessibility_button_id"
    accessibility_button_icon_family="material-icons  material-symbols-outlined"
    accessibility_button_icon_name="accessible_forward"
    accessibilitymenufunctionality="() => console.log('Accessibility Menu Functionality')"
    close_accessibility_button_name="close_accessibility_button_name"
	
    contrast_title="Contrast"
    contrast_description="Select your preferred contrast setting"
    contrast_noraml_text="Normal"
    contrast_color_blind_text="Colours Blind"
    contrast_red_weakness_text="Red Weakness"
    contrast_green_weakness_text="Green Weakness"
	
    normalcontrast="() => console.log('Normal Text')"
    blindcontrast="() => console.log('Blind Text')"
    redcontrast="() => console.log('Red Text')"
    greencontrast="() => console.log('Green Text')"
	
    screen_reader_title="Screen Reader"
    screen_reader_description="Listen to the content of the page by clicking play or listen"
    read_speaker_link="app-eu.readspeaker.com"
	
    text_size_title="Text Size"
    text_size_description="Use the buttons below to increase or decrease the text size"
    smtextsize="() => console.log('Small Text')"
    basetextsize="() => console.log('Base Text')"
    lgtextsize="() => console.log('Large Text')"
	
    language_tooltip="Language"
    language_text="العربية"
    language_button_name="language_button_name"
    languageswitch="() => console.log('Language Switcher')"
	
    login_tooltip="Login"
    login-text="Login"
    login-link="/Login"
    login-icon="account_circle"
    use-login-popup="true"
    login-popup-links='[
        {"popupItemLabel":"Profile","url":"#"},
        {"popupItemLabel":"Logout","url":"#"} 
    ]'
	
    hamburger_menu_button_name="Menu"
    side-main-menu-title="Main Menu"
    side-menu-items='[{"label":"Home","active":"true","href":"#","subMenu":[]},{"label":"Initiatives","href":"#","subMenu":[{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-1","href":"#","subMenu":[{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-2","href":"#","subMenu":[{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-4","href":"#"}]},{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-3","href":"#"}]},{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-1","href":"#","subMenu":[{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-2","href":"#","subMenu":[{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-4","href":"#"}]},{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-3","href":"#"}]}]},{"label":"Services","href":"#","subMenu":[{"headerLabel":"Service","subLinkClass":"","label":"Service-1","href":"#"},{"headerLabel":"Service","subLinkClass":"","label":"Service-2","href":"#"}]},{"label":"Data","href":"#","subMenu":[]},{"label":"Government Services","href":"#","subMenu":[]},{"label":"Investor Relations","href":"#","subMenu":[]},{"label":"Locations","href":"#","subMenu":[]},{"label":"Newsroom","href":"#","subMenu":[]},{"label":"Contact Us","href":"#","subMenu":[]}]'
    
    hide-other-menu="false"
    side-other-menu-title="Other"
    other-menu-items='[{"label":"Menu 1","active":"true","href":"#"},{"label":"Menu 2","href":"#"},{"label":"Menu 3","href":"#"}]'
    
    close_menu_button_name="close_menu_button_name"
    
    quick-links='[
	{"headerMenuLabel":"Home","active":"true","url":"#"}
	
	//Default Sub Menu
	{"headerMenuLabel":"About Us","url":"javascript:void(0)","type":"dda_default_submenu","children":[
	    {"headerMenuLabel":"Submenu 1","url":"#","defaultSubMenuTitle":"Submenu 1 Title","children":[
		{"headerMenuLabel":"SubSubmenu 1","url":"#"},
		{"headerMenuLabel":"SubSubmenu 1","url":"#"}
	    ]},
	    {"headerMenuLabel":"Submenu 2","url":"#","defaultSubMenuTitle":"Submenu 2 Title","children":[
		{"headerMenuLabel":"SubSubmenu 2","url":"#"},
		{"headerMenuLabel":"SubSubmenu 2","url":"#"}
	    ]},
	    {"headerMenuLabel":"Submenu 3","url":"#"}
	]},
	
	//Mega Menu
	{"headerMenuLabel":"Services","url":"javascript:void(0)","type":"dda_main_megamenu","children":[
	    {"title":"QUICK LINKS 1","items":[
	        {"headerMenuLabel":"Service 1","url":"#","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},
		{"headerMenuLabel":"Service 2","url":"#"},
		{"headerMenuLabel":"Service 3","url":"#"}
	    ]},
	    {"title":"QUICK LINKS 2","items":[
		{"headerMenuLabel":"Service 1","url":"#"},
		{"headerMenuLabel":"Service 2","url":"#"},
		{"headerMenuLabel":"Service 3","url":"#"}
	    ]},
	    {"title":"QUICK LINKS 3","items":[
		{"headerMenuLabel":"Service 3","url":"#"}
	    ]},
	    {"title":"QUICK LINKS 4","items":[
		{"headerMenuLabel":"Service 4","url":"#"}
            ]}
	]},
		
	{"headerMenuLabel":"Contact","url":"#"}
    ]'
><DdaHeader/> 
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-header
    first-logo-href="https://www.dubai.gov.ae"
    first-logo-src="https://www.dof.gov.ae/Style Library/img/gov-logo.svg"
    first-logo-white-src="https://www.dof.gov.ae/Style Library/img/gov-logo-white.svg"
    first-logo-alt="Dubai-Digital-Authority"
    first-logo-target="_blank"
	
    second-logo-href="https://www.dubai.gov.ae"
    second-logo-src="https://www.digitaldubai.ae/ResourcePackages/Theme/assets/dist/images/logo.svg"
    second-logo-white-src="https://www.digitaldubai.ae/ResourcePackages/Theme/assets/dist/images/logo-white.svg"
    second-logo-alt="Dubai-Digital-Authority"
	
    search_button_name="search_button_name"
    search_input_name="search_input_name"
    search_input_placeholder="Search"
    searchfunctionality="() => console.log('Search Functionality')"
    search_tooltip="Search"
    mobile-menu-search-id="mobileSearch"
    mobile-menu-search-url="javascript:void(0)"
	
    use-predesigned-accessibility-menu="true"
    accessibility_tooltip="Accessibility"
    toggle_accessibility_button_name="toggle_accessibility_button_name"
    accessibility_button_text="accessibility_button_text"
    accessibility_button_id="accessibility_button_id"
    accessibility_button_icon_family="material-icons  material-symbols-outlined"
    accessibility_button_icon_name="accessible_forward"
    accessibilitymenufunctionality="() => console.log('Accessibility Menu Functionality')"
    close_accessibility_button_name="close_accessibility_button_name"
	
    contrast_title="Contrast"
    contrast_description="Select your preferred contrast setting"
    contrast_noraml_text="Normal"
    contrast_color_blind_text="Colours Blind"
    contrast_red_weakness_text="Red Weakness"
    contrast_green_weakness_text="Green Weakness"
	
    normalcontrast="() => console.log('Normal Text')"
    blindcontrast="() => console.log('Blind Text')"
    redcontrast="() => console.log('Red Text')"
    greencontrast="() => console.log('Green Text')"
	
    screen_reader_title="Screen Reader"
    screen_reader_description="Listen to the content of the page by clicking play or listen"
    read_speaker_link="app-eu.readspeaker.com"
	
    text_size_title="Text Size"
    text_size_description="Use the buttons below to increase or decrease the text size"
    smtextsize="() => console.log('Small Text')"
    basetextsize="() => console.log('Base Text')"
    lgtextsize="() => console.log('Large Text')"
	
    language_tooltip="Language"
    language_text="العربية"
    language_button_name="language_button_name"
    languageswitch="() => console.log('Language Switcher')"
	
    login_tooltip="Login"
    login-text="Login"
    login-link="/Login"
    login-icon="account_circle"
    use-login-popup="true"
    login-popup-links='[
        {"popupItemLabel":"Profile","url":"#"},
        {"popupItemLabel":"Logout","url":"#"} 
    ]'
	
    hamburger_menu_button_name="Menu"
    side-main-menu-title="Main Menu"
    side-menu-items='[{"label":"Home","active":"true","href":"#","subMenu":[]},{"label":"Initiatives","href":"#","subMenu":[{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-1","href":"#","subMenu":[{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-2","href":"#","subMenu":[{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-4","href":"#"}]},{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-3","href":"#"}]},{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-1","href":"#","subMenu":[{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-2","href":"#","subMenu":[{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-4","href":"#"}]},{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-3","href":"#"}]}]},{"label":"Services","href":"#","subMenu":[{"headerLabel":"Service","subLinkClass":"","label":"Service-1","href":"#"},{"headerLabel":"Service","subLinkClass":"","label":"Service-2","href":"#"}]},{"label":"Data","href":"#","subMenu":[]},{"label":"Government Services","href":"#","subMenu":[]},{"label":"Investor Relations","href":"#","subMenu":[]},{"label":"Locations","href":"#","subMenu":[]},{"label":"Newsroom","href":"#","subMenu":[]},{"label":"Contact Us","href":"#","subMenu":[]}]'
    
    hide-other-menu="false"
    side-other-menu-title="Other"
    other-menu-items='[{"label":"Menu 1","active":"true","href":"#"},{"label":"Menu 2","href":"#"},{"label":"Menu 3","href":"#"}]'
    
    close_menu_button_name="close_menu_button_name"
    
    quick-links='[
	{"headerMenuLabel":"Home","active":"true","url":"#"}
	
	//Default Sub Menu
	{"headerMenuLabel":"About Us","url":"javascript:void(0)","type":"dda_default_submenu","children":[
	    {"headerMenuLabel":"Submenu 1","url":"#","defaultSubMenuTitle":"Submenu 1 Title","children":[
		{"headerMenuLabel":"SubSubmenu 1","url":"#"},
		{"headerMenuLabel":"SubSubmenu 1","url":"#"}
	    ]},
	    {"headerMenuLabel":"Submenu 2","url":"#","defaultSubMenuTitle":"Submenu 2 Title","children":[
		{"headerMenuLabel":"SubSubmenu 2","url":"#"},
		{"headerMenuLabel":"SubSubmenu 2","url":"#"}
	    ]},
	    {"headerMenuLabel":"Submenu 3","url":"#"}
	]},
	
	//Mega Menu
	{"headerMenuLabel":"Services","url":"javascript:void(0)","type":"dda_main_megamenu","children":[
	    {"title":"QUICK LINKS 1","items":[
	        {"headerMenuLabel":"Service 1","url":"#","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},
		{"headerMenuLabel":"Service 2","url":"#"},
		{"headerMenuLabel":"Service 3","url":"#"}
	    ]},
	    {"title":"QUICK LINKS 2","items":[
		{"headerMenuLabel":"Service 1","url":"#"},
		{"headerMenuLabel":"Service 2","url":"#"},
		{"headerMenuLabel":"Service 3","url":"#"}
	    ]},
	    {"title":"QUICK LINKS 3","items":[
		{"headerMenuLabel":"Service 3","url":"#"}
	    ]},
	    {"title":"QUICK LINKS 4","items":[
		{"headerMenuLabel":"Service 4","url":"#"}
            ]}
	]},
		
	{"headerMenuLabel":"Contact","url":"#"}
    ]'
></dda-header>
```

{% endtab %}
{% endtabs %}

### Header Transparent Mode

To make the header area transparent, apply the following class to the body tag of the landing page:

```html
<body class="transparent"></body>        
```

### **Header Level Menu Configuration (Quick Links)**

The `quick-links` property defines the structure of the header navigation menu. It accepts a JSON array of menu items, each of which can represent:

* A **Simple Menu Link**
* A **Default Submenu** (with optional nested sub-submenus)
* A **Mega Menu** (with grouped links and optional descriptions)

### Structure Overview

```json
[
  {
    "headerMenuLabel": "Home",
    "url": "#"
  },
  {
    "headerMenuLabel": "About Us",
    "url": "javascript:void(0)",
    "type": "dda_default_submenu",
    "children": [
      {
        "headerMenuLabel": "Submenu 1",
        "url": "#",
        "defaultSubMenuTitle": "Submenu 1 Title",
        "children": [
          {
            "headerMenuLabel": "SubSubmenu 1",
            "url": "#"
          }
        ]
      }
    ]
  },
  {
    "headerMenuLabel": "Services",
    "url": "javascript:void(0)",
    "type": "dda_main_megamenu",
    "children": [
      {
        "title": "QUICK LINKS 1",
        "items": [
          {
            "headerMenuLabel": "Service 1",
            "url": "#",
            "description": "Optional description here"
          }
        ]
      }
    ]
  }
]

```

### Menu Item Types

* **Simple Menu Item**
  * A top-level navigation link.
  * **Properties**:
    * `headerMenuLabel`: Text to display.
    * `url`: Link to navigate to.
* **Default Submenu (`dda_default_submenu`)**
  * Allows nested submenus and sub-submenus.
  * **Properties**:
    * `type`: `"dda_default_submenu"`
    * `children`: Array of submenu items.
    * Each child can also contain a `children` array for sub-submenus.
* **Mega Menu (`dda_main_megamenu`)**
  * Displays grouped menu links in columns.
  * **Properties**:
    * `type`: `"dda_main_megamenu"`
    * `children`: Array of groups.
    * Each group includes a `title` and an `items` array.

## Login Button - Popup Usage

The Login Button component supports both direct link navigation and an optional popup menu for additional user actions.

Use `use-login-popup="true"` when the login button is intended to handle **multiple authenticated actions**, not just login.

```json
use-login-popup="true"
login-popup-links='[
        {"popupItemLabel":"Profile","url":"/Profile"},
        {"popupItemLabel":"Logout","url":"/Logout"} 
]'
```

## Properties

Logo Attributes

| Property                | Description                                                                                                | Type     |
| ----------------------- | ---------------------------------------------------------------------------------------------------------- | -------- |
| `first-logo-href`       | Link URL for the first logo (usually a government entity)                                                  | `string` |
| `firstLogoSrc`          | URL of the primary logo displayed in the header.                                                           | `string` |
| `first-logo-white-src`  | White/dark-mode version of the first logo.                                                                 | `string` |
| `firstLogoAlt`          | Alternative text for the primary logo for accessibility purposes.                                          | `string` |
| first-logo-target       | Specifies where to open the first logo link. Use `_blank` to open the link in a new browser tab or window. | `string` |
| `second-logo-href`      | Link URL for the second logo (e.g., Digital Dubai).                                                        | `string` |
| `secondLogoSrc`         | URL of the secondary logo, typically displayed in a different theme or color variation.                    | `string` |
| `second-logo-white-src` | White/dark-mode version of the second logo.                                                                | `string` |
| `secondLogoAlt`         | Alternative text for the secondary logo for accessibility purposes.                                        | `string` |

### Navigation & Menu Attributes

<table><thead><tr><th>Property</th><th>Description</th><th>Type</th></tr></thead><tbody><tr><td><code>hamburger_menu_button_name</code></td><td>Name attribute for the hamburger menu button</td><td><code>string</code></td></tr><tr><td><code>close_menu_button_name</code></td><td>Name attribute for the sidebar  close button</td><td><code>string</code></td></tr><tr><td><code>side-main-menu-title</code></td><td>Title for the primary sidebar menu</td><td><code>string</code></td></tr><tr><td><code>sideMenuItems</code></td><td>JSON string representing an array of side menu items, including links and potential submenus.</td><td><code>string</code></td></tr><tr><td><code>hide-other-menu</code></td><td>Boolean (<code>true</code>/<code>false</code>) to show or hide the "Other" menu.</td><td><code>string</code></td></tr><tr><td><code>side-other-menu-title</code></td><td>Title label for the secondary or "Other" menu.</td><td><code>string</code></td></tr><tr><td><code>other-menu-items</code></td><td>JSON array for "Other" menu items and links.</td><td><code>string</code></td></tr><tr><td><code>quick-links</code></td><td>JSON array for top-level navigation with default dropdown and megamenu dropdown<br><strong>Format:</strong><br><em>[ { "headerMenuLabel": "Services", "url": "javascript:void(0)", "type": "dda_main_megamenu", "children": [ { "title": "QUICK LINKS 2", "items": [ { "headerMenuLabel": "Service 1", "url": "#", "quickLinksIcon": "home" }, { "headerMenuLabel": "Service 2", "url": "#", "quickLinksIcon": "star" } ] } ] } ]</em></td><td><code>string</code><br><br><br><br></td></tr><tr><td><code>header_default_submenu</code></td><td>Enables or disables the default submenu under the card header. Use "true" or "false" as a string.</td><td><code>boolean</code></td></tr><tr><td><code>useNavigator</code></td><td>Enables/Disables the use of event listener instead of href attribute on links </td><td>string ("true" | "false")</td></tr><tr><td><code>navigatorClick</code></td><td>Use it to capture the on click event after useNavigator is set to true</td><td>EventListener</td></tr><tr><td><p></p><pre class="language-typescriptreact"><code class="lang-typescriptreact">showQuickLinksIcon
</code></pre></td><td>Set to "false" to hide Icons in Mega Menus for Quick Links Sub Menus.<br>Default to "true"</td><td><p></p><pre class="language-typescriptreact"><code class="lang-typescriptreact">boolean
</code></pre></td></tr></tbody></table>

For description and example about handling routers in Single Page Applications (SPA) refer to [Navigation/Router](/developers/navigation-routers) page

### Search Attributes

| Property                   | Description                                                     | Type     |
| -------------------------- | --------------------------------------------------------------- | -------- |
| `search_button_name`       | Name attribute for the search button                            | `string` |
| `search_input_name`        | Name attribute for the search input field                       | `string` |
| `search_input_placeholder` | Placeholder text for the search input.                          | `string` |
| `searchfunctionality`      | JavaScript function to trigger on search (e.g., search action). | `string` |
| `onInputChanged`           | onevent property for search box                                 |          |

### Accessibility Attributes

| Property                             | Description                                                    | Type                                                           |
| ------------------------------------ | -------------------------------------------------------------- | -------------------------------------------------------------- |
| `use-predesigned-accessibility-menu` | Use predesigned accessibility menu                             | `string`                                                       |
| `accessibility_button_text`          | Text shown on the accessibility button                         | `string`                                                       |
| `toggle_accessibility_button_name`   | Label/name for toggling the accessibility panel.               | `string`                                                       |
| `close_accessibility_button_name`    | Name attribute for the close button for the accessibility menu | `string`                                                       |
| `accessibilitymenufunctionality`     | JavaScript function triggered when accessibility menu is used. | JavaScript function triggered when accessibility menu is used. |
| `accessibility_button_id`            | Managable accessibility button ID                              | `string`                                                       |

### Accessibility Menu Options

| Property                       | Description                                           | Type                                                         |
| ------------------------------ | ----------------------------------------------------- | ------------------------------------------------------------ |
| `contrast_title`               | Title for the contrast settings section.              | `string`                                                     |
| `contrast_description`         | Description for contrast selection instructions.      | `string`                                                     |
| `contrast_noraml_text`         | Label for normal contrast option.                     | `string`                                                     |
| `contrast_color_blind_text`    | Label for color-blind-friendly contrast.              | `string`                                                     |
| `contrast_red_weakness_text`   | Label for red weakness color mode.                    | `string`                                                     |
| `contrast_green_weakness_text` | Label for green weakness color mode.                  | `string`                                                     |
| `screen_reader_title`          | Title for screen reader feature.                      | `string`                                                     |
| `screen_reader_description`    | Description of how the screen reader works.           | `string`                                                     |
| `text_size_title`              | Title for text size settings.                         | `string`                                                     |
| `text_size_description`        | Description of how to use text size controls.         | `string`                                                     |
| `selected_contrast`            | string to set the selected value for contrast option  | "normal" \| "colorblind" \| "redweakness" \| "greenweakness" |
| `selected_text_size`           | string to set the selected value for text size option | "normal" \| "large" \| "small"                               |

### Text Size Control Functions

<table><thead><tr><th>Property</th><th>Description</th><th>Type</th></tr></thead><tbody><tr><td><code>smtextsize</code></td><td>Triggered when the user decreases the text size.</td><td><pre><code>EventEmitter
</code></pre></td></tr><tr><td><code>baseTextSize</code></td><td>Triggered when the user selects the default text size.</td><td><pre><code>EventEmitter
</code></pre></td></tr><tr><td><code>lgTextSize</code></td><td>Triggered when the user increases the text size.</td><td><pre><code>EventEmitter
</code></pre></td></tr></tbody></table>

### Contrast Mode Functions

<table><thead><tr><th>Property</th><th>Description</th><th>Type</th></tr></thead><tbody><tr><td><code>normalContrast</code></td><td>Triggered when the user selects the normal contrast setting.</td><td><pre><code>EventEmitter
</code></pre></td></tr><tr><td><code>blindContrast</code></td><td>Triggered when the user selects the contrast setting for color blindness.</td><td><pre><code>EventEmitter
</code></pre></td></tr><tr><td><code>redContrast</code></td><td>Triggered when the user selects the contrast setting for red weakness.</td><td><pre><code>EventEmitter
</code></pre></td></tr><tr><td><code>greenContrast</code></td><td>Triggered when the user selects the contrast setting for green weakness.</td><td><pre><code>EventEmitter
</code></pre></td></tr></tbody></table>

### Language and Login Attributes

<table><thead><tr><th>Property</th><th>Description</th><th>Type</th></tr></thead><tbody><tr><td><code>language_text</code></td><td>Sets the language text for the language button</td><td><code>string</code></td></tr><tr><td><code>language_button_name</code></td><td>Name attribute for the language button</td><td><code>string</code></td></tr><tr><td><code>languageSwitch</code></td><td>Triggered when the user selects the language switch option.</td><td><p></p><pre class="language-typescriptreact"><code class="lang-typescriptreact">EventEmitter&#x3C;void>
</code></pre></td></tr><tr><td><code>loginLink</code></td><td>URL for the login page, allowing users to navigate to the authentication screen.</td><td><code>string</code></td></tr><tr><td><code>login-text</code></td><td>Text displayed on the login button.</td><td><code>string</code></td></tr><tr><td><code>quickLinks</code></td><td>JSON string representing an array of quick link items, used in the mega menu for fast navigation.</td><td><code>string</code></td></tr><tr><td><code>readSpeakerLink</code></td><td>URL for the ReadSpeaker integration, allowing users to listen to page content.</td><td><code>string</code></td></tr><tr><td><code>accessibility_button_name</code></td><td>Name attribute for the accessibility button</td><td><code>string</code></td></tr><tr><td><p></p><pre class="language-typescriptreact"><code class="lang-typescriptreact">useLoginPopup
</code></pre></td><td>to trigger login dropdown instead of using href link.</td><td>boolean</td></tr><tr><td><p></p><pre class="language-typescriptreact"><code class="lang-typescriptreact">loginPopupLinks
</code></pre></td><td>string array for items in the dropdown used in conjunction with useLoginPopup</td><td>["popupItemLabel":"Profile"","url": "/profile"]</td></tr></tbody></table>

### ReadSpeaker Attribute

| Property          | Description                                                                    | Type     |
| ----------------- | ------------------------------------------------------------------------------ | -------- |
| `readSpeakerLink` | URL for the ReadSpeaker integration, allowing users to listen to page content. | `string` |

### **Sidebar Control**

| Property                    | Description                    | Type     |
| --------------------------- | ------------------------------ | -------- |
| `close_sidebar_button_name` | Label for closing the sidebar. | `string` |

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2F7FzYYxKBY3lmjM0AfmTP%2FHeader%20-%20Anatomy.png?alt=media&amp;token=a6831339-bae2-41d8-a87d-8f96ac2e2ce4" alt=""><figcaption></figcaption></figure>

**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.                                |


# Home Carousel

Banner cards use interactive and clickable features to engage users, enhancing the presentation of content effectively.

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FRkmOEgSW544Su42WBkQS%2FBanner%20Cards%20-%20Overview.png?alt=media&amp;token=4c2ab0ee-bfdd-456a-9d58-8ba5f98db8f7" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Banner cards prominently display key information, special offers, or critical updates. They are particularly effective in engaging users and guiding them towards desired actions within a visually concise and interactive format.

### How it works

Banner cards combine elements like clickable features and concise informational displays. These components seamlessly work together to present information in an engaging way, encourage user interaction, and drive engagement, thus enhancing the overall user experience with interactive and visually appealing content.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-home-carousel
    items_in_view="5"
    bannercardlist='[
        {"banner_card_href":"javascript:void(0)","image_src":"static/media/public_images/BannerCardIcon1.svg","image_alt":"image one","banner_card_title":"Welcome Banner 1","banner_card_description":"Description 1","banner_card_id":"bannerCardOne"},
        {"banner_card_href":"javascript:void(0)","image_src":"static/media/public_images/BannerCardIcon2.svg","image_alt":"image two","banner_card_title":"Welcome Banner 2","banner_card_description":"Description 2","banner_card_id":"bannerCardTwo"},
	{"banner_card_href":"javascript:void(0)","image_src":"static/media/public_images/BannerCardIcon3.svg","image_alt":"image three","banner_card_title":"Welcome Banner 3","banner_card_description":"Lorem ipsum, or lipsum as it is sometimes known","banner_card_id":"bannerCardThree"},
	{"banner_card_href":"javascript:void(0)","image_src":"static/media/public_images/BannerCardIcon4.svg","image_alt":"image four","banner_card_title":"Welcome Banner 4","banner_card_description":"Description 4","banner_card_id":"bannerCardFour"},
	{"banner_card_href":"javascript:void(0)","image_src":"static/media/public_images/BannerCardIcon5.svg","image_alt":"image five","banner_card_title":"Welcome Banner 5","banner_card_description":"Description 5","banner_card_id":"bannerCardFive"},
	{"banner_card_href":"javascript:void(0)","image_src":"static/media/public_images/BannerCardIcon2.svg","image_alt":"image six","banner_card_title":"Welcome Banner 6","banner_card_description":"Description 6","banner_card_id":"bannerCardSix"}
    ]'
></dda-home-carousel>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaHomeCarousel
  items_in_view="5"
  bannercardlist='[
        {"banner_card_href":"javascript:void(0)","image_src":"static/media/public_images/BannerCardIcon1.svg","image_alt":"image one","banner_card_title":"Welcome Banner 1","banner_card_description":"Description 1","banner_card_id":"bannerCardOne"},
        {"banner_card_href":"javascript:void(0)","image_src":"static/media/public_images/BannerCardIcon2.svg","image_alt":"image two","banner_card_title":"Welcome Banner 2","banner_card_description":"Description 2","banner_card_id":"bannerCardTwo"},
	{"banner_card_href":"javascript:void(0)","image_src":"static/media/public_images/BannerCardIcon3.svg","image_alt":"image three","banner_card_title":"Welcome Banner 3","banner_card_description":"Lorem ipsum, or lipsum as it is sometimes known","banner_card_id":"bannerCardThree"},
	{"banner_card_href":"javascript:void(0)","image_src":"static/media/public_images/BannerCardIcon4.svg","image_alt":"image four","banner_card_title":"Welcome Banner 4","banner_card_description":"Description 4","banner_card_id":"bannerCardFour"},
	{"banner_card_href":"javascript:void(0)","image_src":"static/media/public_images/BannerCardIcon5.svg","image_alt":"image five","banner_card_title":"Welcome Banner 5","banner_card_description":"Description 5","banner_card_id":"bannerCardFive"},
	{"banner_card_href":"javascript:void(0)","image_src":"static/media/public_images/BannerCardIcon2.svg","image_alt":"image six","banner_card_title":"Welcome Banner 6","banner_card_description":"Description 6","banner_card_id":"bannerCardSix"}
    ]'
>
</DdaHomeCarousel>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaHomeCarousel
  items_in_view="5"
  bannercardlist='[
        {"banner_card_href":"javascript:void(0)","image_src":"static/media/public_images/BannerCardIcon1.svg","image_alt":"image one","banner_card_title":"Welcome Banner 1","banner_card_description":"Description 1","banner_card_id":"bannerCardOne"},
        {"banner_card_href":"javascript:void(0)","image_src":"static/media/public_images/BannerCardIcon2.svg","image_alt":"image two","banner_card_title":"Welcome Banner 2","banner_card_description":"Description 2","banner_card_id":"bannerCardTwo"},
	{"banner_card_href":"javascript:void(0)","image_src":"static/media/public_images/BannerCardIcon3.svg","image_alt":"image three","banner_card_title":"Welcome Banner 3","banner_card_description":"Lorem ipsum, or lipsum as it is sometimes known","banner_card_id":"bannerCardThree"},
	{"banner_card_href":"javascript:void(0)","image_src":"static/media/public_images/BannerCardIcon4.svg","image_alt":"image four","banner_card_title":"Welcome Banner 4","banner_card_description":"Description 4","banner_card_id":"bannerCardFour"},
	{"banner_card_href":"javascript:void(0)","image_src":"static/media/public_images/BannerCardIcon5.svg","image_alt":"image five","banner_card_title":"Welcome Banner 5","banner_card_description":"Description 5","banner_card_id":"bannerCardFive"},
	{"banner_card_href":"javascript:void(0)","image_src":"static/media/public_images/BannerCardIcon2.svg","image_alt":"image six","banner_card_title":"Welcome Banner 6","banner_card_description":"Description 6","banner_card_id":"bannerCardSix"}
    ]'
>
</DdaHomeCarousel>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-home-carousel
    items_in_view="5"
    bannercardlist='[
        {"banner_card_href":"javascript:void(0)","image_src":"static/media/public_images/BannerCardIcon1.svg","image_alt":"image one","banner_card_title":"Welcome Banner 1","banner_card_description":"Description 1","banner_card_id":"bannerCardOne"},
        {"banner_card_href":"javascript:void(0)","image_src":"static/media/public_images/BannerCardIcon2.svg","image_alt":"image two","banner_card_title":"Welcome Banner 2","banner_card_description":"Description 2","banner_card_id":"bannerCardTwo"},
	{"banner_card_href":"javascript:void(0)","image_src":"static/media/public_images/BannerCardIcon3.svg","image_alt":"image three","banner_card_title":"Welcome Banner 3","banner_card_description":"Lorem ipsum, or lipsum as it is sometimes known","banner_card_id":"bannerCardThree"},
	{"banner_card_href":"javascript:void(0)","image_src":"static/media/public_images/BannerCardIcon4.svg","image_alt":"image four","banner_card_title":"Welcome Banner 4","banner_card_description":"Description 4","banner_card_id":"bannerCardFour"},
	{"banner_card_href":"javascript:void(0)","image_src":"static/media/public_images/BannerCardIcon5.svg","image_alt":"image five","banner_card_title":"Welcome Banner 5","banner_card_description":"Description 5","banner_card_id":"bannerCardFive"},
	{"banner_card_href":"javascript:void(0)","image_src":"static/media/public_images/BannerCardIcon2.svg","image_alt":"image six","banner_card_title":"Welcome Banner 6","banner_card_description":"Description 6","banner_card_id":"bannerCardSix"}
    ]'
></dda-home-carousel>
```

{% endtab %}
{% endtabs %}

### Properties

| Property                  | Description                                                                      | Type     |
| ------------------------- | -------------------------------------------------------------------------------- | -------- |
| items\_in\_view           | The number of cards to be visible on the initial load                            | `string` |
| `image_src`               | Path to the icon or image shown on the banner card.                              | `string` |
| `banner_card_title`       | The main title or heading of the card.                                           | `string` |
| `banner_card_description` | Short description or content text of the card.                                   | `string` |
| `onclick`                 | JavaScript function triggered when the card is clicked.                          | `string` |
| `banner_card_href`        | Link that the banner card redirects to when clicked.                             | `string` |
| `banner_card_id`          | Unique identifier for the banner card (useful for targeting).                    | `string` |
| `image_alt`               | Displays descriptive text when images fail to load, maintaining content clarity. | `string` |

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FFinPwGT3E40qBL7LmIH0%2FBanner%20Cards%20-%20Anatomy.png?alt=media&amp;token=2fbdf10e-30f6-49c6-be07-31af92c2789d" alt=""><figcaption></figcaption></figure>

**Icon**: Positioned at the top, the icon visually signifies the theme or function of the card, making it easily recognizable at a glance.

**Title**: The title, located directly below the icon, succinctly communicates the main focus or service provided by the card.

**Description**: This brief text offers a clear explanation or summary of what the user can expect, enhancing understanding and engagement.

**Banner Card Container**: This container houses the title, description, and icon, organizing these elements in a designated space to enhance focus on key information within the card.

***

## Dos and Don'ts

| Dos                                                                                          | Don'ts                                                                                   |
| -------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
| **Use clear, legible icons** that immediately convey the card's purpose or action.           | **Don’t use low-quality or blurry images** for the `image_src`—it reduces visual appeal. |
| **Write concise, meaningful titles** to ensure quick understanding.                          | **Avoid long or vague titles** that don’t communicate the card’s content.                |
| **Keep descriptions short and relevant** to avoid overwhelming users.                        | **Don’t overload the description** with too much text—keep it scannable.                 |
| **Use consistent styling and spacing** if multiple cards are displayed together.             | **Avoid placing multiple cards without spacing**, which can cause visual clutter.        |
| Maintain a consistent design language across all cards to ensure a cohesive user experience. | **Don’t leave the `onclick` empty or use console logs in production.**                   |


# Interactive Banner

Interactive banners use dynamic elements like animations and clickable features to capture attention and encourage actions, enhancing the user experience with flexible content presentation.

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FMHZ1sWDzsBAZ8WAKWUBi%2FInteractive%20Banner%20-%20Overview.png?alt=media&amp;token=90e72c12-3490-4752-99f9-16ad85cd3c96" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Interactive banners are ideal for grabbing user attention and promoting key actions or content. They are commonly used to showcase announcements, campaigns, or featured content in a visually engaging and interactive manner.

### How it works

Interactive banners combine dynamic elements such as animations, videos, clickable features, carousel indicators, and multifunctional cards. These components work together to present information flexibly, encourage user interaction, and drive engagement, ensuring an enhanced and immersive user experience.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-home-banner autoplay="true" interval="3000">
    <div class="dda-home-banner-slide">Slide 1</div>
    <div class="dda-home-banner-slide">Slide 2</div>
    <div class="dda-home-banner-slide">Slide 3</div>
</dda-home-banner>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaHomeBanner autoplay="true" interval="3000">
    <div class="dda-home-banner-slide">Slide 1</div>
    <div class="dda-home-banner-slide">Slide 2</div>
    <div class="dda-home-banner-slide">Slide 3</div>
</DdaHomeBanner>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaHomeBanner autoplay="true" interval="3000">
    <div class="dda-home-banner-slide">Slide 1</div>
    <div class="dda-home-banner-slide">Slide 2</div>
    <div class="dda-home-banner-slide">Slide 3</div>
</DdaHomeBanner>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-home-banner autoplay="true" interval="3000">
    <div class="dda-home-banner-slide">Slide 1</div>
    <div class="dda-home-banner-slide">Slide 2</div>
    <div class="dda-home-banner-slide">Slide 3</div>
</dda-home-banner>
```

{% endtab %}
{% endtabs %}

### What’s Inside a \<Slide>

Each `<slide>` tag can contain **custom HTML content**, allowing entities to define:

* Background images (`<img>`)
* Headings and descriptions (`<h1>`, `<p>`)
* Layouts using flexbox (`d-flex`, `gap-*`)
* Custom buttons via `<dda-button>`

#### Flexible Design for Different Entities

DDA **only provides the container component (`<dda-home-banner>`)**, not fixed content.

This means:

* **Each entity is responsible** for designing its own banner content inside the `<slide>`.
* The structure, layout, text, and interactive elements can be fully customized to match individual branding or campaign needs.

### **Example:**

```html
<div class="dda-home-banner-slide">
    <img src="assets/img/home-banner.jpg" alt="banner" />
    <div class="dda-slide-contant-wrap">
        <div class="dda-slide-contant">
            <div class="dda-col-sm-6">
                <div class="d-flex flex-column gap-4">
                    <div class="d-flex flex-column gap-2">
                        <h1 class="h2 text-white">Book A Video Call Appointment</h1>
                        <p class="body">
                            Pioneering and accelerating the pace of digital transformation
                            in the city
                        </p>
                    </div>
                    <div class="d-flex gap-4">
                        <dda-button button_color="default-primary" start_icon="" end_icon="" custom_class=""
                            component_mode="" button_id="button" aria_label="button" onclick="alert('clicked')"
                            size="lg" gap="2" button_text="Book Now">
                        </dda-button>
                        <dda-button button_color="default-secondary" start_icon="" end_icon=""
                            custom_class="cta-transparent" component_mode="" button_id="button"
                            aria_label="button" onclick="alert('clicked')" size="lg" gap="2" button_text="Secondary button" >
                        </dda-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="dda-home-banner-slide">
    <video muted playsinline loop>
        <source src="https://videos.pexels.com/video-files/3195394/3195394-uhd_2560_1440_25fps.mp4" type="video/mp4">
    </video>
    <div class="dda-slide-contant-wrap">
        <div class="dda-slide-contant">
            <div class="dda-col-sm-6">
                <div class="d-flex flex-column gap-4">
                    <div class="d-flex flex-column gap-2">
                        <h1 class="h2 text-white">Book A Video Call Appointment</h1>
                        <p class="body">
                            Pioneering and accelerating the pace of digital transformation
                            in the city
                        </p>
                    </div>
                    <div class="d-flex gap-4">
                        <dda-button button_color="default-primary" start_icon="" end_icon="" custom_class=""
                            component_mode="" button_id="button" aria_label="button" onclick="alert('clicked')"
                            size="lg" gap="2" button_text="Book Now">
                        </dda-button>
                        <dda-button button_color="default-secondary" start_icon="" end_icon=""
                            custom_class="cta-transparent" component_mode="" button_id="button"
                            aria_label="button" onclick="alert('clicked')" size="lg" gap="2" button_text="Secondary button" >
                        </dda-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
            
```

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2F8WsRwFbBerIzMQA3YGRG%2FInteractive%20Banner%20%20-%20Anatomy.png?alt=media&amp;token=896e6151-aac1-4bf1-9a51-03cf9d4cdf11" alt=""><figcaption></figcaption></figure>

**Hero Image/Video:** A visually striking background element featuring a high-quality image or video, setting the tone and context of the banner content.

**Banner Content: S**ection containing the primary message or call-to-action text, such as "Our objective is to digitalize life in Dubai," designed to grab user attention.

**Search Field:** A prominent search bar allowing users to quickly locate services or information, enhancing functionality and usability.

**Gradient Overlay:** A subtle gradient applied over the hero image/video, improving text readability by creating contrast and a visually pleasing effect.

**Carousel Indicator:** Small dots or markers below the search field indicating the presence of additional slides or content that can be navigated through.

**Scroll Indicator:** A visual cue prompting users to scroll down for more content, encouraging exploration of the page.

***

## Dos and Don'ts

| Dos                                                                                                                                                                                             | Don'ts                                                                                                             |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| Maintain a consistent icon style (sharp, round, filled, or outlined) across all multifunctional cards.                                                                                          | Don’t use inconsistent icons, such as sharp, round, filled, or outlined.                                           |
| Ensure each card contains a minimum of one word of text.                                                                                                                                        | Be aware of the padding between the multifunctional cards.                                                         |
| Display a minimum of three multifunctional cards and up to five cards, with optional options for six or seven cards featuring smaller service cards.                                            | Limit the number of multifunctional cards to a maximum of seven; don't exceed this limit.                          |
| In case additional service card are needed, the last card should be labeled as "See All Services" which, when clicked, will redirect the user to a new page containing the related information. | Ensure that the transparency level of the black color is not set higher than 40% for the specified design element. |
| Ensure that the maximum text width does not exceed 232px, and it should stay within the 12px vertical padding on both sides.                                                                    | The maximum text width should never exceed 232px and the 12px vertical padding on both sides.                      |


# Menu

Menus streamline navigation by categorizing links, making it easy for users to find and access different sections quickly and efficiently.

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FDhTzB2e17vagEFvFE4dA%2Fimage.png?alt=media&amp;token=29cbacb3-153a-414a-8ecf-feaa8b42ea38" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

The menu component should be utilized across all pages of the website to ensure consistent navigation. It acts as a gateway to various sections of the site, enabling users to effortlessly find and access essential content from any page.

### How it works

The menu component is organized into essential areas: branding, navigation, and user tools. The branding zone displays the logo, establishing the site's identity. Navigation links offer direct access to major sections, with current location highlighted. User tools might include a search function, accessibility options, language selection, and account access. Designed for responsiveness, the menu adjusts seamlessly to various device screens, maintaining functionality and visual integrity.

## Code

Refer to [header](/components/header) component.

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FtyORfpCbvaejO36HVOJh%2FMenu%20-%20Anatomy.png?alt=media&amp;token=257565de-88b4-4275-aae7-3ab9a69b911f" alt=""><figcaption></figcaption></figure>

**Lead-element Icon**: Positioned at the very beginning of the menu, this mandatory icon serves as a visual anchor, typically symbolizing the menu’s function or representing the menu item.

**Menu Item**: Each menu item functions as an interactive link within the menu structure, designed to facilitate easy navigation between different sections of the application or website. Typically labeled with concise text that clearly describes its destination or function, a menu item may also include an icon that aligns with its purpose for quick visual recognition.

**Selected Menu Item**: Highlighted differently from other items, indicating that it is the current page or section the user is viewing. This helps in improving navigational clarity.

**Chevron Icon**: This icon next to 'Apps & Services' suggests that the item is expandable, revealing additional information or related options upon interaction.

***

## Dos and Don'ts

| Dos                                                                                  | Don'ts                                                                      |
| ------------------------------------------------------------------------------------ | --------------------------------------------------------------------------- |
| Reserve the top area for primary navigation links.                                   | Do not place non-essential links in prime navigation spots.                 |
| Use clear, simple language for menu labels.                                          | Avoid vague or ambiguous labels that can confuse users.                     |
| Ensure high contrast between text and background for readability.                    | Do not use low contrast for text that makes reading difficult.              |
| Maintain consistent styles and colors for icons.                                     | Avoid inconsistent iconography that can confuse users.                      |
| Design the menu to be responsive across all devices.                                 | Neglect mobile users or fail to adjust the menu for different screen sizes. |
| Follow accessibility standards like keyboard navigability and screen reader support. | Ignore accessibility, making the menu difficult for disabled users to use.  |
| Keep navigation patterns consistent across the site.                                 | Change navigation layouts or paths frequently, disorienting users.          |
| Use visual hierarchy to highlight important menu items.                              | Treat all menu items with the same visual importance.                       |


# Number Field

Number Input Field allows users to enter numeric values with precision, ideal for fields requiring quantities, amounts, or other numerical data.

## Overview&#x20;

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2F6MBQ3HS5yS9mateVLOTM%2FNumber%20Field%20-%20Overview.png?alt=media&amp;token=8ad46133-660f-43c1-97f3-4de96f44516d" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Number inputs are used in forms and other input scenarios where users need to enter numeric values, such as quantities, amounts, or measurements. They ensure consistent formatting, making it easier to validate and process the numeric data accurately.

### How it works

A number input component typically includes a label, a number-formatted input area, and optional elements like placeholder text, helper text, and a stepper for incrementing or decrementing the value. It may have different states to indicate its status, such as focused, filled, or error, ensuring that the numeric input is entered correctly and within the expected range.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-number-field
    label="Amount"
    value=""
    placeholder="Enter amount"
    helper_text="Helper or footer text"
    error_message=""
    validation_type="normal"
    size="medium"
    input_status="normal"
    selected_currency="USD"
    custom_class=""
    component_mode=""
    input_id="input"
    aria_label="input"
    onchange=""
    input_name="input"
    toggle_button_name="toggle-button"
    currency_button_name="currency-button"
    currencies='["USD","EUR","GBP","AED","PKR"]'>
</dda-number-field>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaNumberField
    label="Amount"
    value=""
    placeholder="Enter amount"
    helper_text="Helper or footer text"
    error_message=""
    validation_type="normal"
    size="medium"
    input_status="normal"
    selected_currency="USD"
    custom_class=""
    component_mode=""
    input_id="input"
    aria_label="input"
    onchange=""
    input_name="input"
    toggle_button_name="toggle-button"
    currency_button_name="currency-button"
    currencies='["USD","EUR","GBP","AED","PKR"]'>
</DdaNumberField>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaNumberField
    label="Amount"
    value=""
    placeholder="Enter amount"
    helper_text="Helper or footer text"
    error_message=""
    validation_type="normal"
    size="medium"
    input_status="normal"
    selected_currency="USD"
    custom_class=""
    component_mode=""
    input_id="input"
    aria_label="input"
    onchange=""
    input_name="input"
    toggle_button_name="toggle-button"
    currency_button_name="currency-button"
    currencies='["USD","EUR","GBP","AED","PKR"]'>
</DdaNumberField>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-number-field
    label="Amount"
    value=""
    placeholder="Enter amount"
    helper_text="Helper or footer text"
    error_message=""
    validation_type="normal"
    size="medium"
    input_status="normal"
    selected_currency="USD"
    custom_class=""
    component_mode=""
    input_id="input"
    aria_label="input"
    onchange=""
    input_name="input"
    toggle_button_name="toggle-button"
    currency_button_name="currency-button"
    currencies='["USD","EUR","GBP","AED","PKR"]'>
</dda-number-field>
```

{% endtab %}
{% endtabs %}

### Properties

For version 3.12.0+ you can use the new unified [input interactions](/developers/input-interactions) to set/get data from the components.

| Property               | Description                                                                                                                                           | Type     |
| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| `aria_label`           | An optional string for defining an accessible label for the input field, used by screen readers.                                                      | `string` |
| `component_mode`       | A string that can be used to define different modes of the component (e.g., `readonly`, `disabled`).                                                  | `string` |
| `currencies`           | A string containing a JSON array of currency options to display in the dropdown.                                                                      | `string` |
| `custom_class`         | An optional string for adding custom CSS classes to the component for styling purposes.                                                               | `string` |
| `error_message`        | A string that displays an error message below the input field if there's an issue with the entered data (e.g., validation failure).                   | `string` |
| `helper_text`          | A string that provides additional helper text below the input field, typically used to give guidance on acceptable input.                             | `string` |
| `input_id`             | A unique string identifier for the input element, used for labeling and accessibility.                                                                | `string` |
| `input_status`         | A string (in JSON format) that contains any status information related to the input (e.g., could be used for showing "loading" or "disabled" states). | `string` |
| `label`                | A string that provides the label text for the input field, typically displayed above the input box.                                                   | `string` |
| `placeholder`          | A string that defines the placeholder text shown inside the input field when it is empty.                                                             | `string` |
| `selected_currency`    | A string representing the currency currently selected from the dropdown. Default is 'USD'.                                                            | `string` |
| `size`                 | A string that controls the size of the input field (e.g., `small`, `medium`, `large`).                                                                | `string` |
| `validation_type`      | A string that represents the type of validation being applied to the input (e.g., `required`, `numeric`, etc.).                                       | `string` |
| `value`                | A string that holds the value of the input field.                                                                                                     | `string` |
| `input_name`           | Name attribute for the input field                                                                                                                    | `string` |
| `toggle_button_name`   | Name attribute for the currency dropdown                                                                                                              | `string` |
| `currency_button_name` | Name attribute for the currency switcher                                                                                                              | `string` |

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FxIDeM2yoyXzrSKq36qwL%2FNumber%20Field%20-%20Anatomy.png?alt=media&amp;token=7d708b32-c7f7-4d0a-9f82-bda67c2f5509" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Label**: Positioned above the input field, the label ("Amount") indicates the purpose of the field, guiding users to input a specific monetary value.

**Placeholder**: The placeholder text within the input field provides an example format or prompt.

**Currency Symbol**: Displayed before the placeholder text within the input field.

**Lead Icon**: Positioned to the left of the helper text, the lead icon provides a visual cue that can offer additional information or help related to the amount input.

**Caption**: Positioned below the input field, the caption provides additional instructions or context, such as "Helper or footer text," to assist users with the input.

**Stepper**: Positioned on the left within the input field, the stepper allows users to increase or decrease the amount by tapping up or down arrows, offering a quick way to adjust the input.

**Currency Dropdown**: Positioned to the right of the input field, the currency dropdown lets users select the desired currency, ensuring clarity in financial transactions.

## Dos and Don'ts

| Dos                                                                                            | Don'ts                                                                           |
| ---------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
| Use number inputs to collect numeric values in a standardized format.                          | Don't use number inputs for non-numeric inputs.                                  |
| Label the number input clearly to indicate its purpose.                                        | Avoid using ambiguous or unclear labels for number inputs.                       |
| Include placeholder text to show the expected numeric format.                                  | Don't rely solely on placeholder text for essential instructions.                |
| Provide helper text to explain any specific formatting or range requirements.                  | Don't overload the number input with too much information.                       |
| Ensure the number input is large enough to be easily tappable or clickable.                    | Avoid making the number input too small to interact with comfortably.            |
| Use the stepper for inputs that require incremental adjustments.                               | Don't use steppers if precise values are required without increments.            |
| Validate input and provide clear error messages when the numeric format or range is incorrect. | Don't provide generic error messages that don't help users understand the issue. |
| Keep consistent styling and spacing across all number inputs in the application.               | Don't use inconsistent styles that may confuse users.                            |


# Pagination

Pagination divides content into discrete pages, allowing users to navigate through large sets of information easily and maintain an organized viewing experience.

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FUtyzPoXJGLehqqylwPr8%2FPagination%202%20-%20Overview.png?alt=media&amp;token=17e3b8f7-2f1d-42cd-b6cd-c9b7ceeb8a3a" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Use the Pagination component in interfaces where content is divided across multiple pages and users need to navigate through it sequentially. It’s ideal for content feeds, search results, product listings, and any scenario where users browse content across pages.

### How it works

The Pagination component provides navigation options, typically displaying the current page, total pages, and navigation buttons like "Previous" and "Next." Users can click these buttons to move between pages. The component can be customized to show additional navigation controls, depending on the application’s requirements.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-pagination
    total_pages="8"
    current_page="1"
    type="simple-slider"
    custom_class=""
    component_mode=""
    simple_slider_prev_button=""
    simple_slider_next_button=""
    buttons_prev_button=""
    buttons_next_button=""
    text_prev_button=""
    text_next_button=""
    text_pages_prev_button=""
    text_pages_next_button=""
    button_text_prev_button=""
    button_text_next_button=""
    buttons_pages_prev_button=""
    buttons_pages_next_button=""
></dda-pagination>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaPagination
    total_pages="8"
    current_page="1"
    type="simple-slider"
    custom_class=""
    component_mode=""
    simple_slider_prev_button=""
    simple_slider_next_button=""
    buttons_prev_button=""
    buttons_next_button=""
    text_prev_button=""
    text_next_button=""
    text_pages_prev_button=""
    text_pages_next_button=""
    button_text_prev_button=""
    button_text_next_button=""
    buttons_pages_prev_button=""
    buttons_pages_next_button=""
></DdaPagination>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaPagination
    total_pages="8"
    current_page="1"
    type="simple-slider"
    custom_class=""
    component_mode=""
    simple_slider_prev_button=""
    simple_slider_next_button=""
    buttons_prev_button=""
    buttons_next_button=""
    text_prev_button=""
    text_next_button=""
    text_pages_prev_button=""
    text_pages_next_button=""
    button_text_prev_button=""
    button_text_next_button=""
    buttons_pages_prev_button=""
    buttons_pages_next_button=""
 ></DdaPagination>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-pagination
    total_pages="8"
    current_page="1"
    type="simple-slider"
    custom_class=""
    component_mode=""
    simple_slider_prev_button=""
    simple_slider_next_button=""
    buttons_prev_button=""
    buttons_next_button=""
    text_prev_button=""
    text_next_button=""
    text_pages_prev_button=""
    text_pages_next_button=""
    button_text_prev_button=""
    button_text_next_button=""
    buttons_pages_prev_button=""
    buttons_pages_next_button=""
></dda-pagination>
```

{% endtab %}
{% endtabs %}

### Properties

| Property                    | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Type                                                                                                   |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
| `component_mode`            | An optional property that can be used to specify a mode for the pagination component, which may affect its behavior or styling depending on the use case.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `string`                                                                                               |
| `current_page`              | The currently active page in the pagination. This defines the page that will be highlighted or considered as the "current" page.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `number`                                                                                               |
| `custom_class`              | Custom CSS class(es) that can be applied to the pagination component for additional styling or customization.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `string`                                                                                               |
| `total_pages`               | The total number of pages available for pagination. This determines how many pages are displayed in the pagination control.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `number`                                                                                               |
| `type`                      | <p>The pagination style to be used. Different values adjust the layout and behavior of the pagination control.<br></p><ul><li><code>'simple-slider'</code>: Displays a simple slider with previous and next buttons.</li><li><code>'buttons'</code>: Displays previous, next, and page buttons.</li><li><code>'text'</code>: Displays page numbers in a text format with previous and next buttons.</li><li><code>'text-pages'</code>: Displays page buttons with previous and next buttons in a text format.</li><li><code>'button-text'</code>: Displays previous and next buttons along with page buttons, in a button-text format.</li><li><code>'buttons-pages'</code>: Displays only the previous and next buttons.</li><li><code>'full'</code>: Displays all page buttons without previous/next buttons.</li></ul> | `"button-text" \| "buttons" \| "buttons-pages" \| "full" \| "simple-slider" \| "text" \| "text-pages"` |
| `simple_slider_prev_button` | Name attribute for the button with the `type` of  `simple_slider`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `string`                                                                                               |
| `simple_slider_next_button` | Name attribute for the button with the `type` of `simple_slider`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `string`                                                                                               |
| `buttons_prev_button`       | Name attribute for the button with the `type`of `buttons`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `string`                                                                                               |
| `buttons_next_button`       | Name attribute for the button with the `type` of `buttons`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `string`                                                                                               |
| `text_prev_button`          | Name attribute for the button with the `type` of `text`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `string`                                                                                               |
| `text_next_button`          | Name attribute for the button with the `type` of `text`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `string`                                                                                               |
| `text_pages_prev_button`    | Name attribute for the button with the `type` of `text_pages`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `string`                                                                                               |
| `text_pages_next_button`    | Name attribute for the button with the `type` of `text_pages`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `string`                                                                                               |
| `button_text_prev_button`   | Name attribute for the button with the `type` of `buttons_text`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `string`                                                                                               |
| `button_text_next_button`   | Name attribute for the button with the `type` of `buttons_text`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `string`                                                                                               |
| `buttons_pages_prev_button` | Name attribute for the button with the `type` of `button_pages`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `string`                                                                                               |
| `buttons_pages_next_button` | Name attribute for the button with the `type` of `button_pages`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `string`                                                                                               |
| paginateClick               | Event Listener to capture click on pagination with pagenumber: number as parameter                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | Event Listener                                                                                         |

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FicsV4TGID2WEWoL5VZ1G%2FPagination%202%20-%20Anatomy.png?alt=media&amp;token=fd1aece9-14c6-4272-9dfa-920a8f603085" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Label**: Displays the range of results currently being viewed and the total number of results available (e.g., "Showing 1 to 10 of 97 results"). This informs the user about the scope of displayed data.

**Previous Icon**: An arrow icon pointing left, used to navigate to the previous page of results. It is typically disabled on the first page.

**Pagination Base**: Includes all the clickable page numbers and possibly icons or ellipses indicating more pages. This area allows users to jump to specific pages directly.

**Selected Pagination Base**: Highlights the current page number within the pagination base, usually styled differently (e.g., a different color or bold) to indicate it is the active page.

**Next Icon**: An arrow icon pointing right, used to navigate to the next page of results. It becomes disabled when the user is on the last page.

**Quick Select Button**: A dropdown menu allowing the user to quickly select how many results to display per page (e.g., "10/page"). This provides control over the volume of data shown at one time.

**Text Field**: Accompanied by a "Go to Page" button, this field allows users to enter a page number and navigate directly to that page. It provides a faster way to jump to a specific page, especially useful in large datasets.

## Dos and Don'ts

| Dos                                                                                                  | Don'ts                                                                                                    |
| ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
| Use the Pagination component when you need to divide large amounts of content across multiple pages. | Avoid using pagination if content can be displayed on a single page without impacting performance or UX.  |
| Ensure clear labeling for each button to make navigation intuitive.                                  | Do not clutter the pagination controls with excessive styling; keep it simple and focused on navigation.  |
| Provide a clear visual indication of the current page to help users understand their position.       | Avoid using pagination if a continuous scroll would enhance user experience in a particular context.      |
| Test the Pagination component for keyboard accessibility to ensure it is fully navigable.            | Don't hide important information in pagination if users need easy access to all items within the dataset. |


# Phone Number Field

Phone Number Field allows users to enter and validate phone numbers in a standardized format, often with options for country code selection.

Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FPPXulWhp7wil2PauAm38%2FPhone%20Number%202%20-%20Overview.png?alt=media&amp;token=acdf9ccc-c2ce-4d60-aa01-bbfa1c209267" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Phone fields are used in forms and input scenarios where users need to enter their phone number. They help maintain a consistent format, making it easier to validate and utilize the phone number for communication purposes.

### How it works

A phone field component typically includes a label, a phone number-formatted input area, and optional elements like placeholder text and helper text to assist the user. It may also display different states, such as focused, filled, or error, to reflect its current status. The phone field ensures that the phone number is entered accurately and in the correct format.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-phonefield
    label="Phone Number"
    placeholder="00 000 0000"
    helper_text="Helper or footer text"
    error_message="This is an error message"
    max_length="10"
    validation_id=""
    validation_type="normal"
    disabled="false"
    custom_class=""
    component_mode=""
    input_id="input"
    button_id="button"
    aria_label="phone-field"
    button_aria_label="phone-button"
    onchange=""
    toggle_button_name="toggle-button"
    country_select_button_name="country-select-button"
    phone_input_name="phone-input"
></dda-phonefield>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaPhonefield
    label="Phone Number"
    placeholder="00 000 0000"
    helper_text="Helper or footer text"
    error_message="This is an error message"
    max_length="10"
    validation_id=""
    validation_type="normal"
    disabled="false"
    custom_class=""
    component_mode=""
    input_id="input"
    button_id="button"
    aria_label="phone-field"
    button_aria_label="phone-button"
    onchange=""
    toggle_button_name="toggle-button"
    country_select_button_name="country-select-button"
    phone_input_name="phone-input"
></DdaPhonefield>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaPhonefield
    label="Phone Number"
    placeholder="00 000 0000"
    helper_text="Helper or footer text"
    error_message="This is an error message"
    max_length="10"
    validation_id=""
    validation_type="normal"
    disabled="false"
    custom_class=""
    component_mode=""
    input_id="input"
    button_id="button"
    aria_label="phone-field"
    button_aria_label="phone-button"
    onchange=""
    toggle_button_name="toggle-button"
    country_select_button_name="country-select-button"
    phone_input_name="phone-input"
></DdaPhonefield>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-phonefield
    label="Phone Number"
    placeholder="00 000 0000"
    helper_text="Helper or footer text"
    error_message="This is an error message"
    max_length="10"
    validation_id=""
    validation_type="normal"
    disabled="false"
    custom_class=""
    component_mode=""
    input_id="input"
    button_id="button"
    aria_label="phone-field"
    button_aria_label="phone-button"
    onchange=""
    toggle_button_name="toggle-button"
    country_select_button_name="country-select-button"
    phone_input_name="phone-input"
></dda-phonefield>
```

{% endtab %}
{% endtabs %}

### Properties

<table><thead><tr><th>Property</th><th>Description</th><th>Type</th></tr></thead><tbody><tr><td><code>aria_label</code></td><td>The aria-label for accessibility, describing the input field's function to screen readers.</td><td><code>string</code></td></tr><tr><td><code>button_aria_label</code></td><td>The aria-label for the dropdown button, providing context for screen readers.</td><td><code>string</code></td></tr><tr><td><code>button_id</code></td><td>The ID for the dropdown button, useful for styling or testing purposes.</td><td><code>string</code></td></tr><tr><td><code>component_mode</code></td><td>Defines the mode of the component, which can be used to customize its behavior or appearance </td><td><code>string</code></td></tr><tr><td><code>custom_class</code></td><td>A custom CSS class that can be added to the component’s root element for additional styling.</td><td><code>string</code></td></tr><tr><td><code>disabled</code></td><td>Determines if the input field is disabled or not. When <code>true</code>, the field is uneditable and grayed out.</td><td><code>boolean</code></td></tr><tr><td><code>error_message</code></td><td>An error message that is shown when the input is invalid or does not meet the validation criteria.</td><td><code>string</code></td></tr><tr><td><code>helper_text</code></td><td>Optional helper text displayed below the input field, providing extra information to the user about what should be entered.</td><td><code>string</code></td></tr><tr><td><code>input_id</code></td><td>The ID of the input field, useful for labeling and referencing the field in a form or when styling.</td><td><code>string</code></td></tr><tr><td><code>label</code></td><td>The label text that will be displayed next to the input field to describe the expected value (e.g., "Phone Number").</td><td><code>string</code></td></tr><tr><td><code>placeholder</code></td><td>A placeholder text that appears in the input field when it's empty, guiding the user on what to enter (e.g., "Enter phone number").</td><td><code>string</code></td></tr><tr><td><code>size</code></td><td>Specifies the size of the input field, e.g., "small", "medium", or "large". It adjusts the size of the input box accordingly.</td><td><code>string</code></td></tr><tr><td><code>validation_type</code></td><td>A type of validation to apply to the input field. This could trigger specific styling or validation behavior (e.g., "required", "email", etc.).</td><td><code>string</code></td></tr><tr><td><code>country_code</code></td><td>The default country code to be displayed in the input field, such as <code>+1</code> for the US or <code>+44</code> for the UK.</td><td><code>string</code></td></tr><tr><td><code>country_flag</code></td><td>The URL of the flag image associated with the default country. This is displayed alongside the country code.</td><td><code>string</code></td></tr><tr><td><code>phone_number</code></td><td>The value of the phone number entered by the user.</td><td><code>string</code></td></tr><tr><td><code>is_focused</code></td><td>A boolean that tracks whether the input field is currently focused by the user.</td><td><code>boolean</code></td></tr><tr><td><code>dropdown_open</code></td><td>A boolean indicating whether the country code dropdown is open or closed.</td><td><code>boolean</code></td></tr><tr><td><code>countries</code></td><td>A list of countries with their respective country codes and flag image URLs. This is used to populate the country selector dropdown.</td><td><p></p><pre class="language-typescriptreact"><code class="lang-typescriptreact">{ code: string; flag: string }[]
</code></pre></td></tr><tr><td><code>toggle_button_name</code></td><td>Name attribute for the country dropdown button</td><td><code>string</code></td></tr><tr><td><code>country_select_button_name</code></td><td>Name attribute for the country selection buttons in the dropdown</td><td><code>string</code></td></tr><tr><td><code>phone_input_name</code></td><td>Name attribute for the input field</td><td><code>string</code></td></tr><tr><td><code>max_length</code></td><td>Maximum number of digits allowed in the phone input.</td><td><code>string</code></td></tr><tr><td><code>validation_id</code></td><td>An optional identifier used for validation tracking.</td><td><code>string</code></td></tr><tr><td><code>onchange</code></td><td>Callback function triggered when the input value changes.</td><td><code>string</code></td></tr></tbody></table>

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FoYZmxavUscvkQY0gyw9X%2FPhone%20Number%202%20-%20Anatomy.png?alt=media&amp;token=5e06c7ca-9dd7-4e4b-9d20-09622900842e" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Label**: Describes the data to be entered, such as "Phone Number."

**Flag Icon**: Shows the flag of the selected country, identifying the country code.

**Lead-Icon**: Placed at the start of the input field to symbolize phone number entry.

**Country Dropdown**: Allows selection of the country code, displaying flags and codes for user convenience.

**Input Fields**: Segments where users type their phone number, structured by separators for clarity.

**Separator**: Divides segments of the phone number for organized input.

**Helper or Footer Text**: Provides extra guidance or requirements about the input format.

**Caption**: Offers additional details or instructions related to the input.

## Dos and Don'ts

| Dos                                                                                        | Don'ts                                                                           |
| ------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------- |
| Use phone fields to collect users' phone numbers in a standardized format.                 | Don't use phone fields for non-phone number inputs.                              |
| Label the phone field clearly to indicate its purpose.                                     | Avoid using ambiguous or unclear labels for phone fields.                        |
| Include placeholder text to show the expected phone number format.                         | Don't rely solely on placeholder text for essential instructions.                |
| Provide helper text to explain any specific formatting requirements.                       | Don't overload the phone field with too much information.                        |
| Ensure the phone field is large enough to be easily tappable or clickable.                 | Avoid making the phone field too small to interact with comfortably.             |
| Validate input and provide clear error messages when the phone number format is incorrect. | Don't provide generic error messages that don't help users understand the issue. |
| Keep consistent styling and spacing across all phone fields in the application.            | Don't use inconsistent styles that may confuse users.                            |


# Progress Indicators

Progress Indicators visually display the completion status of a task or process, helping users understand how much has been completed and how much remains.


# Expectation Levels

Expectation Levels Progress Bar visually represents stages of achievement or quality standards, helping users track their progress toward meeting defined goals.

## Overview

The Expectation Levels Progress Bar visually represents a user's progression toward specific achievement levels or benchmarks. It provides feedback on current progress, motivating users and guiding them toward completing all steps or reaching all set goals.

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2F9XCnVJZShbr09NuGinjJ%2FExpectation%20Levels%20-%20Overview.png?alt=media&amp;token=3bc0f6bf-c7e9-4c2b-a7d0-0e5b3088b09e" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Use the Expectation Levels Progress Bar in applications where tracking progress toward specific milestones or goals is important, such as completing onboarding tasks, reaching skill levels, or meeting performance benchmarks. It’s ideal for interfaces that encourage users to reach incremental achievements.

### How it works

The Expectation Levels Progress Bar displays progress through segmented levels or stages, with each segment representing a specific milestone. As users advance, the bar fills up to show their proximity to the next level or the completion of all stages. This component enhances user engagement by offering a clear visual of goals and progress, motivating users to achieve each level.

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FwEtV3ceGFxgoe5MSVrih%2FExpectation%20Levels%20-%20Anatomy.png?alt=media&amp;token=b7d0ceb6-d1d3-4a32-9a11-5f6f4e68eff5" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Label**: Displays the status or expectation level of the progress. In this example, it is labeled as "Met Expectation," indicating the status being represented.

**Filled Bar**: Shows the portion of the bar that has been completed or that meets the specified expectations. The filled sections indicate achieved progress or met criteria.

**Unfilled Bar**: Represents the remaining portion of the bar that has not yet been reached or that does not meet the specified expectations. It shows what is left to achieve.

## Dos and Don'ts

| Dos                                                                                             | Don'ts                                                                                    |
| ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
| Use clear labels or tooltips to describe each level, helping users understand their progress.   | Don’t overcrowd the progress bar with excessive details; keep it simple and easy to read. |
| Ensure the progress bar has a smooth animation for progress changes to enhance visual feedback. | Don’t update progress abruptly or without visual cues, as this can confuse users.         |
| Use a distinct color or style to highlight completed levels and the current level.              | Don’t rely solely on color to indicate progress; add text labels for accessibility.       |


# Progress Bar

Progress bars are used to visually indicate the progression of a task or process.

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FAFOUaS0JxCJ4NY1E5lo4%2FProgress%20bar%20-%20Overview.png?alt=media&amp;token=fb6e3841-809e-4356-83d1-c986ab7f881f" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Progress bars are used in interfaces to indicate the completion status of a task or process, such as file uploads, form submissions, or loading sequences. They offer immediate visual feedback, helping users understand the current progress and how much remains to be completed.

### How it works

A progress bar component displays a visual indicator, typically a horizontal bar that fills as the task advances. It may include optional elements, like labels, to add context about the progress. The progress bar can be customized with different themes, label positions, and progress values to suit the application's needs.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-progressbar
    progress="20"
    tooltip="false"
    tooltip_position="top"
    show_percentage_text="false"
    custom_class=""
    component_mode=""
></dda-progressbar>
```

{% endtab %}

{% tab title="React" %}

```jsx
    <DdaProgressbar
            progress="20"
            tooltip="false"
            tooltip_position="top"
            show_percentage_text="false"
            custom_class=""
            component_mode=""
        ></DdaProgressbar>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
   <DdaProgressbar
            progress="20"
            tooltip="false"
            tooltip_position="top"
            show_percentage_text="false"
            custom_class=""
            component_mode=""
        ></DdaProgressbar>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-progressbar
    progress="20"
    tooltip="false"
    tooltip_position="top"
    show_percentage_text="false"
    custom_class=""
    component_mode=""
></dda-progressbar>
```

{% endtab %}
{% endtabs %}

### Properties

| Property               | Description                                                                                                                                                                              | Type                |
| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
| `component_mode`       | An optional prop that can be used to apply a specific mode or style to the progress bar. It allows for dynamic changes to the appearance or behavior of the component based on the mode. | `string`            |
| `custom_class`         | A string of one or more CSS classes to apply to the outer container of the progress bar. This allows for easy customization and styling of the component.                                | `string`            |
| `progress`             | This prop controls the progress percentage of the progress bar. It expects a number between 0 and 100, representing the current completion level of the progress bar.                    | `number`            |
| `show_percentage_text` | If set to `true`, the percentage text will be displayed within the progress bar, showing the current progress value as text.                                                             | `boolean`           |
| `tooltip`              | Determines whether to show a tooltip with the progress percentage on hover. If set to `true`, a tooltip will appear displaying the current progress percentage.                          | `boolean`           |
| `tooltip_position`     | Specifies the position of the tooltip relative to the progress bar. It can be either `'top'` (above the progress bar) or `'bottom'` (below the progress bar).                            | `"bottom" \| "top"` |

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FpwbCtvAdwM5SuhwFup2r%2FProgress%20bar%20-%20Anatomy.png?alt=media&amp;token=a3a0a023-936f-4f90-bb2a-9231cbdbeace" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Progress Fill**: Represents the portion of the task or service status that has been completed, filled proportionally to the progress made. It visually indicates the extent of completion in the process.

**Background Bar**: The unfilled part of the progress bar that provides a reference for the remaining progress. It contrasts with the progress fill to show the current status effectively.

**Percentage Label**: Displays the exact percentage of the progress, providing users with a clear numerical representation of completion.

## Dos and Don'ts

| Dos                                                                             | Don'ts                                                           |
| ------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
| Use progress bars to show the completion status of ongoing tasks.               | Don't use progress bars for static or non-progressive tasks.     |
| Ensure the progress bar is large enough to be easily noticeable.                | Don't make the progress bar too small or easy to overlook.       |
| Label the progress bar clearly to indicate what it is tracking.                 | Avoid using ambiguous or unclear labels for progress bars.       |
| Provide clear visual feedback as the progress bar fills.                        | Don't leave users guessing about the status of the task.         |
| Use consistent styling and spacing across all progress bars in the application. | Don't use inconsistent styles that may confuse users.            |
| Update the progress bar in real-time as the task progresses.                    | Don't use progress bars if you cannot provide real-time updates. |


# Progress Circle

Progress circle are used to visually represent the completion status of a task or process in a circular format.

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FbNq4fEqCLsmisM265Hl9%2FProgress%20Circles%20-%20Overview.png?alt=media&amp;token=47066443-edde-443c-bcea-541cd2b5838d" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Progress circles are used in interfaces to indicate the completion status of ongoing tasks or processes, such as loading sequences, file uploads, or progress toward goals. They offer a quick, visual representation of progress in a compact and visually appealing format.

### How it works

A progress circle component displays a circular indicator that gradually fills as the task progresses. It may include optional elements like labels to provide context. The progress circle can be customized to reflect different values, label visibility, and sizes to suit various design needs.

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FUyKnLxYlcwFgSn5X5XhM%2FProgress%20Circles%20-%20Anatomy.png?alt=media&amp;token=1b5a2ae9-1766-496c-8a5c-c00d9d38db22" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Progress Fill**: The filled portion of the circular bar that visually represents the percentage of the task completed. It fills proportionally to indicate progress.

**Background**: The unfilled section of the circular path, providing a contrast to the Progress Fill and representing the remaining portion of the task.

**Percentage Label**: Centered within the circle, this label displays the completion percentage in numerical format, giving users an exact measure of progress.

## Dos and Don'ts

| Dos                                                                                       | Don'ts                                                                           |
| ----------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
| Use progress circles to show the completion status of ongoing tasks in a circular format. | Don't use progress circles for tasks that do not involve progressive completion. |
| Ensure the progress circle is large enough to be easily noticeable.                       | Don't make the progress circle too small or difficult to see.                    |
| Label the progress circle clearly to indicate what it is tracking.                        | Avoid using ambiguous or unclear labels for progress circles.                    |
| Provide clear visual feedback as the progress circle fills.                               | Don't leave users guessing about the status of the task.                         |
| Use consistent styling and spacing across all progress circles in the application.        | Don't use inconsistent styles that may confuse users.                            |
| Update the progress circle in real-time as the task progresses.                           | Don't use progress circles if you cannot provide real-time updates.              |


# Progress Semi-Circle

Progress semi-circles are used to visually represent the completion status of a task or process in a semi-circular format.

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2F9GJgxifKlBWztQfaqtiT%2FProgress%20Semicircles%20-%20Overview.png?alt=media&amp;token=8113e140-1384-47e9-926a-2e0580adffda" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Progress semi-circles are used in interfaces to indicate the completion status of ongoing tasks or processes, such as loading sequences, file uploads, or progress toward goals. They offer a quick, visual representation of progress in a compact, visually distinct format that differs from traditional linear progress bars.

### How it works

A progress semi-circle component displays a semi-circular indicator that fills as the task progresses. It may include optional elements like labels for additional context. The progress semi-circle can be customized to show different values, label visibility, and sizes, providing flexibility to fit various design needs.

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FYtxpeXBZ0VQ1e1kz9VkW%2FProgress%20Semicircles%20-%20Anatomy.png?alt=media&amp;token=726b26dd-d92f-40d0-9255-97e6a2adf9f8" alt=""><figcaption></figcaption></figure>

### Anatomy Options

* **Progress Fill**: The arc or filled section that visually indicates the proportion of the task that has been completed. It grows as progress increases.
* **Label**: A short descriptor positioned next to or inside the progress indicator, giving context about the tracked metric.
* **Percentage Label**: Located within the center of the circle, this label displays the exact progress as a percentage.
* **Background**: The unfilled part of the circular path that contrasts with the Progress Fill, representing the remaining portion of the task.

## Dos and Don'ts

| Dos                                                                                                 | Don'ts                                                                                |
| --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
| Use progress semi-circles to show the completion status of ongoing tasks in a semi-circular format. | Don't use progress semi-circles for tasks that do not involve progressive completion. |
| Ensure the progress semi-circle is large enough to be easily noticeable.                            | Don't make the progress semi-circle too small or difficult to see.                    |
| Label the progress semi-circle clearly to indicate what it is tracking.                             | Avoid using ambiguous or unclear labels for progress semi-circles.                    |
| Provide clear visual feedback as the progress semi-circle fills.                                    | Don't leave users guessing about the status of the task.                              |
| Use consistent styling and spacing across all progress semi-circles in the application.             | Don't use inconsistent styles that may confuse users.                                 |
| Update the progress semi-circle in real-time as the task progresses.                                | Don't use progress semi-circles if you cannot provide real-time updates.              |


# Quick Select Field

Quick Select components are used to provide users with a fast way to choose from a list of predefined options.

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FlFTZmXWdjoKH5jvq5Xop%2FQuick%20Select%20-%20Overview.png?alt=media&amp;token=28be2e79-8a2b-4be3-be01-b6fb5bc86ebe" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Quick Select components are ideal for scenarios where users need to choose an option swiftly from a list, such as in navigation menus, settings, or any interface requiring quick access to options. This component can be styled as a button, icon, link, or a combination, depending on the context and design needs.

### How it works

A Quick Select component includes a visible trigger (such as a button, icon, or link) that opens a dropdown list of options when clicked. Users select an option from the list, and the component updates to reflect the chosen item. Optional elements like leading icons, labels, or titles can be added to provide further context or functionality, enhancing the user experience.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-dropdown
    label="Headline"
    placeholder="Please select..."
    main_aria_label="Please choose an option"
    selected=""
    disabled="false"
    error_message="This is a error message"
    helper_text="Helper or footer text"
    validation_id=""
    type="bg-white"
    size="default"
    icon_mode="false"
    custom_class=""
    component_mode=""
    button_id="dropdown"
    aria_label="dropdown"
    arrow_button_name="arrow-button"
    dropdown_button_name="dropdown-button"
    toggle_button_name="toggle_button"
    option_select_button_name="option_button"
    selectchanged=""
    options='[{"id":1,"text":"Option 1"},{"id":2,"text":"Option 2"},{"id":3,"text":"Option 3"},{"id":4,"text":"Option 4"},{"id":5,"text":"Option 5"}]'
></dda-dropdown>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaDropdown
    label="Headline"
    placeholder="Please select..."
    main_aria_label="Please choose an option"
    selected=""
    disabled="false"
    error_message="This is a error message"
    helper_text="Helper or footer text"
    validation_id=""
    type="bg-white"
    size="default"
    icon_mode="false"
    custom_class=""
    component_mode=""
    button_id="dropdown"
    aria_label="dropdown"
    arrow_button_name="arrow-button"
    dropdown_button_name="dropdown-button"
    toggle_button_name="toggle_button"
    option_select_button_name="option_button"
    selectchanged=""
    options='[{"id":1,"text":"Option 1"},{"id":2,"text":"Option 2"},{"id":3,"text":"Option 3"},{"id":4,"text":"Option 4"},{"id":5,"text":"Option 5"}]'
></DdaDropdown>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaDropdown
    label="Headline"
    placeholder="Please select..."
    main_aria_label="Please choose an option"
    selected=""
    disabled="false"
    error_message="This is a error message"
    helper_text="Helper or footer text"
    validation_id=""
    type="bg-white"
    size="default"
    icon_mode="false"
    custom_class=""
    component_mode=""
    button_id="dropdown"
    aria_label="dropdown"
    arrow_button_name="arrow-button"
    dropdown_button_name="dropdown-button"
    toggle_button_name="toggle_button"
    option_select_button_name="option_button"
    selectchanged=""
    options='[{"id":1,"text":"Option 1"},{"id":2,"text":"Option 2"},{"id":3,"text":"Option 3"},{"id":4,"text":"Option 4"},{"id":5,"text":"Option 5"}]'
></DdaDropdown>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-dropdown
    label="Headline"
    placeholder="Please select..."
    main_aria_label="Please choose an option"
    selected=""
    disabled="false"
    error_message="This is a error message"
    helper_text="Helper or footer text"
    validation_id=""
    type="bg-white"
    size="default"
    icon_mode="false"
    custom_class=""
    component_mode=""
    button_id="dropdown"
    aria_label="dropdown"
    arrow_button_name="arrow-button"
    dropdown_button_name="dropdown-button"
    toggle_button_name="toggle_button"
    option_select_button_name="option_button"
    selectchanged=""
    options='[{"id":1,"text":"Option 1"},{"id":2,"text":"Option 2"},{"id":3,"text":"Option 3"},{"id":4,"text":"Option 4"},{"id":5,"text":"Option 5"}]'
></dda-dropdown>
```

{% endtab %}
{% endtabs %}

### Properties

| Property               | Description                                                                                                                | Type                             |
| ---------------------- | -------------------------------------------------------------------------------------------------------------------------- | -------------------------------- |
| `label`                | The label displayed above the dropdown, indicating the purpose of the field.                                               | `string`                         |
| `selected`             | The currently selected option from the dropdown. If no option is selected, it can be an empty string.                      | `string`                         |
| `disabled`             | Disables the dropdown, preventing the user from interacting                                                                | `boolean`                        |
| `error`                | Displays an error message below the dropdown when provided. Used for validation or feedback.                               | `string`                         |
| `helper_text`          | Additional information or a hint that appears below the dropdown to assist the user.                                       | `string`                         |
| `validation_id`        | A unique ID for connecting the dropdown to validation logic or elements.                                                   | `string`                         |
| `type`                 | Defines the background style for the dropdown, either transparent or white.                                                | `"bg-transparent" \| "bg-white"` |
| `size`                 | Defines the size of the dropdown, allowing it to be either small or medium.                                                | `"medium" \| "small"`            |
| `icon_mode`            | When `true`, it activates an icon-based mode where the dropdown options are visually represented by icons instead of text. | `boolean`                        |
| `custom_class`         | An optional custom class to apply additional styling to the dropdown component.                                            | `string`                         |
| `component_mode`       | A custom mode for the component that allows for further customization or style variations.                                 | `string`                         |
| `button_id`            | The unique ID of the dropdown button, used for accessibility and form submission purposes.                                 | `string`                         |
| `aria_label`           | An optional aria-label for better accessibility, providing a label for screen readers.                                     | `string`                         |
| `arrow_button_name`    | Name attribute for the dropdown arrow icon                                                                                 | `string`                         |
| `dropdown_menu_button` | Name attribute for the dropdown selections                                                                                 | `string`                         |
| `options`              | A JSON string representing an array of options to display in the dropdown. The string is parsed into an array.             | `string`                         |

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FVE0Wwsx8bleU0OgDvtNg%2FQuick%20Select%20-%20Anatomy.png?alt=media&amp;token=fc8f9044-fbe7-40ba-86da-61b9abe00949" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Label**: Provides a title or description for the dropdown, helping users understand the purpose of the selection.

**Lead-Icon**: Positioned before the dropdown text, visually indicating the context or category of the options within the dropdown.

**Placeholder**: Displays default or prompt text within the dropdown, guiding users on what to select.

**Dropdown Icon**: Positioned at the right of the dropdown, indicating that there are additional options available.

## Dos and Don'ts

| Use Quick Select components for fast access to a list of options.                         | Don't use Quick Select components for complex forms or multi-step processes.           |
| ----------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
| Label the Quick Select component clearly to indicate its purpose.                         | Avoid using ambiguous or unclear labels for Quick Select components.                   |
| Ensure the trigger element is large enough to be easily tappable or clickable.            | Don't make the trigger element too small to interact with comfortably.                 |
| Provide clear visual feedback when an option is selected.                                 | Don't leave users guessing whether their selection was successful.                     |
| Use consistent styling and spacing across all Quick Select components in the application. | Don't use inconsistent styles that may confuse users.                                  |
| Validate input and provide clear error messages when necessary.                           | Don't provide generic error messages that don't help users understand the issue.       |
| Include appropriate aria-labels for accessibility.                                        | Don't neglect accessibility requirements such as focus states and keyboard navigation. |
| Ensure each Quick Select component has sufficient contrast against its background.        | Avoid using low contrast that can make the component difficult to see.                 |


# Radio Buttons

Radio buttons let users select one option from a group of exclusive choices, ensuring a clear and simple decision-making process in forms.


# Radio Input

Radio Input is used to allow users to select a single option from a set of mutually exclusive choices.

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2F4ay3C1HF3ZHcahJICOOo%2FRadio%20Button%20-%20Overview.png?alt=media&amp;token=e49825bb-6199-4652-8b1f-7533f1bbf432" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Radio inputs are used when a user needs to select a single option from a list. They are ideal for scenarios where only one choice is allowed, such as in forms, surveys, and settings where users must choose one option among several.

### How it works

Radio inputs are presented in groups, with each input representing a unique option. Users can select one input from the group, and choosing a new option will automatically deselect any previously selected option within that group. Each radio input includes a visible circle, a label, and may feature additional elements like subtitles or trailing icons for added context.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-radiobutton
    title_text="Radio Button Title"
    size="default"
    variants="normal"
    supporting="Supporting Text"
    error_message="Error text"
    validation_id="validationId"
    group_name="radiogroup"
    input_id="testId1"
    aria_label="radio-button"
    validation_type="normal"
    radio_status="normal"
    custom_class=""
    component_mode=""
></dda-radiobutton>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaRadiobutton
    title_text="Radio Button Title"
    size="default"
    variants="normal"
    supporting="Supporting Text"
    error_message="Error text"
    validation_id="validationId"
    group_name="radiogroup"
    input_id="testId1"
    aria_label="radio-button"
    validation_type="normal"
    radio_status="normal"
    custom_class=""
    component_mode=""
></DdaRadiobutton>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaRadiobutton
    title_text="Radio Button Title"
    size="default"
    variants="normal"
    supporting="Supporting Text"
    error_message="Error text"
    validation_id="validationId"
    group_name="radiogroup"
    input_id="testId1"
    aria_label="radio-button"
    validation_type="normal"
    radio_status="normal"
    custom_class=""
    component_mode=""
></DdaRadiobutton>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-radiobutton
    title_text="Radio Button Title"
    size="default"
    variants="normal"
    supporting="Supporting Text"
    error_message="Error text"
    validation_id="validationId"
    group_name="radiogroup"
    input_id="testId1"
    aria_label="radio-button"
    validation_type="normal"
    radio_status="normal"
    custom_class=""
    component_mode=""
></dda-radiobutton>
```

{% endtab %}
{% endtabs %}

### Properties

| Property         | Description                                                                                                                                                                                                   | Type      |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
| `title_text`     | The main label text that will appear next to the radio button. This is a required prop that provides a title for the radio button option.                                                                     | `string`  |
| `size`           | The size of the radio button. Possible values can be 'sm', 'md', or 'lg', where 'sm' is small, 'md' is medium, and 'lg' is large. This prop adjusts the size of the radio button.                             | `string`  |
| `variants`       | The variant of the radio button. Similar to size, it can be used to define different visual appearances, such as different shapes, borders, or colors.                                                        | `string`  |
| `supporting`     | Additional supporting text that can be displayed alongside the title. This prop is optional and is used for any extra information or description related to the radio button option.                          | `string`  |
| `error_message`  | Additional supporting text that can be displayed when an error occurs. This prop is optional and is used to provide users with helpful feedback or guidance when their input is invalid or incomplete.        | `string`  |
| `validation_id`  | Defines a unique identifier for the helper or error message element. This `id` can be referenced by form fields using `aria-describedby` or similar attributes to associate the supporting text with an input |           |
| `group_name`     | The name of the radio button group. This is used to group multiple radio buttons together, allowing only one selection within the group.                                                                      | `string`  |
| `input_id`       | The ID for the input element (radio button). This prop is used to associate the `<label>` with the corresponding `<input>` element for accessibility and form functionality.                                  | `string`  |
| `aria_label`     | The aria-label for the radio button input. This is used for accessibility purposes, allowing screen readers to describe the radio button when it does not have a visible label.                               | `string`  |
| validation\_type |                                                                                                                                                                                                               |           |
| `radio_status`   | The status of the radio button, such as "disabled" or other custom states. This prop can be used to apply different styles or behavior depending on the radio button's status.                                | `string`  |
| `checked`        | Indicates whether the radio button is selected or not. This prop controls the checked state of the radio button.                                                                                              | `boolean` |
| `component_mode` | A mode for the radio button component, which can be used to define specific functionality or appearance based on different modes (e.g., "edit", "view", etc.).                                                | `string`  |
| `custom_class`   | A custom CSS class that will be added to the radio button container. This allows for additional customization and styling beyond the default styles.                                                          | `string`  |

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2F6JwOC8T7ZzaVxxdmePC6%2FRadio%20Button%20-%20Anatomy.png?alt=media&amp;token=eead76fc-f75e-44b1-b892-0f6a5d566de6" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Radio Button Icon**: Represents the selectable option within the radio button group. When selected, it indicates the chosen option.

**Radio Button Label**: The main title or descriptor of the radio button option, providing a summary of what the option represents.

**Supporting Text**: Additional text that provides context or information related to the radio button option, helping users understand its purpose.

**Subtitle**: A more detailed description or supplementary information associated with the radio button option.

## Dos and Don'ts

| Dos                                                                        | Don'ts                                                                                    |
| -------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
| Use radio inputs when the user needs to select only one option from a set. | Don't use radio inputs for multiple selections; use checkboxes for that purpose.          |
| Label each radio input clearly to indicate the option it represents.       | Avoid using ambiguous or unclear labels for radio inputs.                                 |
| Group related radio inputs together visually and logically.                | Don't scatter related radio inputs throughout different parts of the UI.                  |
| Ensure radio inputs are large enough to be easily tappable or clickable.   | Avoid making radio inputs too small to interact with comfortably.                         |
| Use consistent spacing between radio inputs in the same group.             | Don't place radio inputs too close together or too far apart, which can hinder usability. |
| Provide a clear visual indication of the selected state.                   | Don't leave users guessing which option is currently selected.                            |
| Include appropriate aria-labels for accessibility.                         | Don't neglect accessibility requirements such as focus states and keyboard navigation.    |
| Ensure each radio input has sufficient contrast against its background.    | Avoid using low contrast that can make the radio inputs difficult to see.                 |


# Radio Buttons Groups

Radio Input is used to allow users to select a single option from a set of mutually exclusive choices.

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2F4ay3C1HF3ZHcahJICOOo%2FRadio%20Button%20-%20Overview.png?alt=media&amp;token=e49825bb-6199-4652-8b1f-7533f1bbf432" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Radio inputs are used when a user needs to select a single option from a list. They are ideal for scenarios where only one choice is allowed, such as in forms, surveys, and settings where users must choose one option among several.

### How it works

Radio inputs are presented in groups, with each input representing a unique option. Users can select one input from the group, and choosing a new option will automatically deselect any previously selected option within that group. Each radio input includes a visible circle, a label, and may feature additional elements like subtitles or trailing icons for added context.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

<pre class="language-jsx"><code class="lang-jsx"><strong>&#x3C;ul>
</strong><strong>    &#x3C;li>
</strong><strong>        &#x3C;dda-radiobutton
</strong>            title_text="Radio Button Title"
            checked="false"
            size="md"
            variants="normal"
            supporting="Supporting Text"
            group_name="radiogroup"
            input_id="testId"
            custom_class=""
            component_mode=""
            aria_label="radio-button"
            onclick="console.log('clicked')"
        >&#x3C;/dda-radiobutton>
    &#x3C;/li>
    &#x3C;li>
        &#x3C;dda-radiobutton
            title_text="Radio Button Title"
            checked="false"
            size="md"
            variants="normal"
            supporting="Supporting Text"
            group_name="radiogroup"
            input_id="testId"
            custom_class=""
            component_mode=""
            aria_label="radio-button"
            onclick="console.log('clicked')"
        >&#x3C;/dda-radiobutton>
    &#x3C;/li>
&#x3C;/ul>
</code></pre>

{% endtab %}

{% tab title="React" %}

```jsx
<ul>
    <li>
        <DdaRadiobutton
            title_text="Radio Button Title"
            checked="false"
            size="md"
            variants="normal"
            supporting="Supporting Text"
            group_name="radiogroup"
            input_id="testId"
            custom_class=""
            component_mode=""
            aria_label="radio-button"
            onclick="console.log('clicked')"
        ></DdaRadiobutton>
    </li>
    <li>
        <DdaRadiobutton
            title_text="Radio Button Title"
            checked="false"
            size="md"
            variants="normal"
            supporting="Supporting Text"
            group_name="radiogroup"
            input_id="testId"
            custom_class=""
            component_mode=""
            aria_label="radio-button"
            onclick="console.log('clicked')"
        ></DdaRadiobutton>
    </li>
</ul>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<ul>
    <li>
        <DdaRadiobutton
            title_text="Radio Button Title"
            checked="false"
            size="md"
            variants="normal"
            supporting="Supporting Text"
            group_name="radiogroup"
            input_id="testId"
            custom_class=""
            component_mode=""
            aria_label="radio-button"
            onclick="console.log('clicked')"
        ></DdaRadiobutton>
    </li>
    <li>
        <DdaRadiobutton
            title_text="Radio Button Title"
            checked="false"
            size="md"
            variants="normal"
            supporting="Supporting Text"
            group_name="radiogroup"
            input_id="testId"
            custom_class=""
            component_mode=""
            aria_label="radio-button"
            onclick="console.log('clicked')"
        ></DdaRadiobutton>
    </li>
</ul>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<ul>
    <li>
        <dda-radiobutton
            title_text="Radio Button Title"
            checked="false"
            size="md"
            variants="normal"
            supporting="Supporting Text"
            group_name="radiogroup"
            input_id="testId"
            custom_class=""
            component_mode=""
            aria_label="radio-button"
            onclick="console.log('clicked')"
        ></dda-radiobutton>
    </li>
    <li>
        <dda-radiobutton
            title_text="Radio Button Title"
            checked="false"
            size="md"
            variants="normal"
            supporting="Supporting Text"
            group_name="radiogroup"
            input_id="testId"
            custom_class=""
            component_mode=""
            aria_label="radio-button"
            onclick="console.log('clicked')"
        ></dda-radiobutton>
    </li>
</ul>
```

{% endtab %}
{% endtabs %}

### Properties

| Property         | Description                                                                                                                                                                          | Type      |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------- |
| `aria_label`     | The aria-label for the radio button input. This is used for accessibility purposes, allowing screen readers to describe the radio button when it does not have a visible label.      | `string`  |
| `checked`        | Indicates whether the radio button is selected or not. This prop controls the checked state of the radio button.                                                                     | `boolean` |
| `component_mode` | A mode for the radio button component, which can be used to define specific functionality or appearance based on different modes (e.g., "edit", "view", etc.).                       | `string`  |
| `custom_class`   | A custom CSS class that will be added to the radio button container. This allows for additional customization and styling beyond the default styles.                                 | `string`  |
| `group_name`     | The name of the radio button group. This is used to group multiple radio buttons together, allowing only one selection within the group.                                             | `string`  |
| `input_id`       | The ID for the input element (radio button). This prop is used to associate the `<label>` with the corresponding `<input>` element for accessibility and form functionality.         | `string`  |
| `radio_status`   | The status of the radio button, such as "disabled" or other custom states. This prop can be used to apply different styles or behavior depending on the radio button's status.       | `string`  |
| `size`           | The size of the radio button. Possible values can be 'sm', 'md', or 'lg', where 'sm' is small, 'md' is medium, and 'lg' is large. This prop adjusts the size of the radio button.    | `string`  |
| `supporting`     | Additional supporting text that can be displayed alongside the title. This prop is optional and is used for any extra information or description related to the radio button option. | `string`  |
| `title_text`     | The main label text that will appear next to the radio button. This is a required prop that provides a title for the radio button option.                                            | `string`  |
| `variants`       | The variant of the radio button. Similar to size, it can be used to define different visual appearances, such as different shapes, borders, or colors.                               | `string`  |

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2F6JwOC8T7ZzaVxxdmePC6%2FRadio%20Button%20-%20Anatomy.png?alt=media&amp;token=eead76fc-f75e-44b1-b892-0f6a5d566de6" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Radio Button Icon**: Represents the selectable option within the radio button group. When selected, it indicates the chosen option.

**Radio Button Label**: The main title or descriptor of the radio button option, providing a summary of what the option represents.

**Supporting Text**: Additional text that provides context or information related to the radio button option, helping users understand its purpose.

**Subtitle**: A more detailed description or supplementary information associated with the radio button option.

## Dos and Don'ts

| Dos                                                                        | Don'ts                                                                                    |
| -------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
| Use radio inputs when the user needs to select only one option from a set. | Don't use radio inputs for multiple selections; use checkboxes for that purpose.          |
| Label each radio input clearly to indicate the option it represents.       | Avoid using ambiguous or unclear labels for radio inputs.                                 |
| Group related radio inputs together visually and logically.                | Don't scatter related radio inputs throughout different parts of the UI.                  |
| Ensure radio inputs are large enough to be easily tappable or clickable.   | Avoid making radio inputs too small to interact with comfortably.                         |
| Use consistent spacing between radio inputs in the same group.             | Don't place radio inputs too close together or too far apart, which can hinder usability. |
| Provide a clear visual indication of the selected state.                   | Don't leave users guessing which option is currently selected.                            |
| Include appropriate aria-labels for accessibility.                         | Don't neglect accessibility requirements such as focus states and keyboard navigation.    |
| Ensure each radio input has sufficient contrast against its background.    | Avoid using low contrast that can make the radio inputs difficult to see.                 |


# Search Input Field

Search Input Field is used to allow users to enter search queries and filter through content.

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FWGuqU91hPUr0ngq0zXuL%2FSearch%20Field%20-%20Overview.png?alt=media&amp;token=6a551f0c-1198-4179-bda5-f155f081eb4e" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Search fields are used in applications where users need to search for information, such as on websites, in databases, or in content-heavy applications. They are ideal for scenarios requiring quick and efficient information retrieval.

### How it works

A search field component typically includes a label, an input area for entering search queries, and optional elements like a clear button and helper text for guidance. It may also feature different states, such as focused, filled, or error, to reflect its current status. Search fields enable users to quickly locate specific information by entering keywords or phrases, streamlining their search experience.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

<pre class="language-jsx"><code class="lang-jsx"><strong>&#x3C;dda-search-input    
</strong>    placeholder="Search"
    label="Search"
    size="default"
    helper_text="Helper or footer text"
    error_message=""
    validation_id=""
    show_button="false"
    has_error="false"
    custom_class=""
    component_mode=""
    button_id="button"
    input_id="Search"
    aria_label="search-input"
    button_aria_label="clear-search"
    onchange=""
    search_input_name="search-input"
    close_button_name="close-button"
    search_button_name="search-button"
    button_text="Search"
    input_status="normal"
>&#x3C;/dda-search-input>
</code></pre>

{% endtab %}

{% tab title="React" %}

```jsx
<DdaSearchInput
    placeholder="Search"
    label="Search"
    size="default"
    helper_text="Helper or footer text"
    error_message=""
    validation_id=""
    show_button="false"
    has_error="false"
    custom_class=""
    component_mode=""
    button_id="button"
    input_id="Search"
    aria_label="search-input"
    button_aria_label="clear-search"
    onchange=""
    search_input_name="search-input"
    close_button_name="close-button"
    search_button_name="search-button"
    button_text="Search"
    input_status="normal"
></DdaSearchInput>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaSearchInput
    placeholder="Search"
    label="Search"
    size="default"
    helper_text="Helper or footer text"
    error_message=""
    validation_id=""
    show_button="false"
    has_error="false"
    custom_class=""
    component_mode=""
    button_id="button"
    input_id="Search"
    aria_label="search-input"
    button_aria_label="clear-search"
    onchange=""
    search_input_name="search-input"
    close_button_name="close-button"
    search_button_name="search-button"
    button_text="Search"
    input_status="normal"
></DdaSearchInput>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-search-input
    placeholder="Search"
    label="Search"
    size="default"
    helper_text="Helper or footer text"
    error_message=""
    validation_id=""
    show_button="false"
    has_error="false"
    custom_class=""
    component_mode=""
    button_id="button"
    input_id="Search"
    aria_label="search-input"
    button_aria_label="clear-search"
    onchange=""
    search_input_name="search-input"
    close_button_name="close-button"
    search_button_name="search-button"
    button_text="Search"
    input_status="normal"
></dda-search-input>
```

{% endtab %}
{% endtabs %}

### Properties

For version 3.12.0+ you can use the new unified [input interactions](/developers/input-interactions) to set/get data from the components.

| Property             | Description                                                                                                                                                                                                   | Type       |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
| `placeholder`        | The placeholder text to be displayed inside the input field when it is empty. Default is "Search".                                                                                                            | `string`   |
| `label`              | The label text for the search input. This label is displayed above the input field.                                                                                                                           | `string`   |
| `size`               | Specifies the size of the input field. Default is 'sm' (small). Can be adjusted to other sizes like 'md' (medium) or 'lg' (large) depending on the desired appearance.                                        | `string`   |
| `helper_text`        | Text displayed below the input field to assist users, such as instructions or tips.                                                                                                                           | `string`   |
| `error_message`      | Custom error message displayed when the input field has an error. Appears below the input if `has_error` is `true`.                                                                                           | `string`   |
| `validation_id`      | Defines a unique identifier for the helper or error message element. This `id` can be referenced by form fields using `aria-describedby` or similar attributes to associate the supporting text with an input | `string`   |
| `show_button`        | A boolean flag to control the visibility of the "Search" button. If `true`, the button is shown; otherwise, it is hidden.                                                                                     | `boolean`  |
| `has_error`          | A boolean flag indicating whether the input field has an error. If `true`, it triggers error styling and the error message display.                                                                           | `boolean`  |
| `custom_class`       | A string of additional custom CSS classes that can be applied to the input container for further styling customization.                                                                                       | `string`   |
| `component_mode`     | An optional property for specifying a particular mode or variant of the component, which can be used to alter its appearance or behavior based on the context.                                                | `string`   |
| `button_id`          | The ID to be assigned to the button elements for accessibility and targeting purposes.                                                                                                                        | `string`   |
| `input_id`           | Specifies a unique identifier for the input element. This `id` can be used to associate labels or helper text with the input field and is useful for accessibility, scripting, and styling purposes.          | `string`   |
| `aria_label`         | The `aria-label` attribute for the search input element, used to enhance accessibility by providing a textual description.                                                                                    | `string`   |
| `button_aria_label`  | The `aria-label` attribute for the buttons in the component, which helps provide a clear description for screen readers.                                                                                      | `string`   |
| `onchange`           | JavaScript function to call when the input value changes.                                                                                                                                                     | `function` |
| `search_input_name`  | Name attribute for the search input field                                                                                                                                                                     | `string`   |
| `close_button_name`  | Name attribute for the close button                                                                                                                                                                           | `string`   |
| `search_button_name` | Name attribute for the search button                                                                                                                                                                          | `string`   |
| `button_text`        | Text displayed on the search button.                                                                                                                                                                          | `string`   |
| `input_status`       | Specifies the status of the input field, e.g., "valid" or "invalid". This can be used to apply custom styling based on the field’s state.                                                                     | `string`   |

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FVYvWC9gvsLQ64ESRjofa%2FSearch%20Field%20-%20Anatomy.png?alt=media&amp;token=239d6d7a-80db-461b-9093-dac92ff7b3d3" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Label**: Describes the function or purpose of the search field, here labeled as "Search."

**Lead-Icon**: An icon placed at the beginning of the input field, usually representing the action or purpose, like a magnifying glass for search.

**Placeholder**: Text that appears within the input field when it’s empty, providing a hint or example for what to type, such as "Search."

**Button**: A clickable element labeled "Search" that initiates the search action when pressed.

**Caption**: Additional helper or footer text below the field, providing more context or instructions to the user.

## Dos and Don'ts

| Dos                                                                              | Don'ts                                                                               |
| -------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
| Use search fields to allow users to quickly find specific information.           | Don't use search fields for inputs that are not related to search or query purposes. |
| Label the search field clearly to indicate its purpose.                          | Avoid using ambiguous or unclear labels for search fields.                           |
| Include a placeholder text to guide users on what to search for.                 | Don't rely solely on placeholder text for essential instructions.                    |
| Provide a clear button to allow users to quickly clear the search input.         | Don't omit the clear button if the search input field is long or complex.            |
| Ensure the search field is large enough to be easily tappable or clickable.      | Avoid making the search field too small to interact with comfortably.                |
| Use helper text to provide additional context or instructions, if necessary.     | Don't overload the search field with too much information.                           |
| Validate input and provide clear error messages when necessary.                  | Don't provide generic error messages that don't help users understand the issue.     |
| Keep consistent styling and spacing across all search fields in the application. | Don't use inconsistent styles that may confuse users.                                |


# Segmentation

Segmentation in user interfaces categorizes content and controls into distinct groups, enhancing navigation and usability through clear, manageable selections.


# Segmented Controls

Segmented Controls are used for areas of the UI that require simple configuration options in a compact manner

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2Fj51gh4LcKBjQAicyfEcy%2FSegmented%20Controls%20-%20Overview.png?alt=media&amp;token=23c5e0fa-0a0d-4582-87f9-7eaf8ce0f4c8" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Segmented controls are ideal when users need to choose between a few distinct options, such as in settings panels, toolbars, or other interfaces requiring quick configuration changes. They work well for toggling between related options where only one selection is allowed at a time.

### How it works

Segmented controls present a series of related options in a compact, unified interface. Users select one option, which updates the control’s state to reflect their choice. Each segment displays different states—such as selected or unselected—providing clear visual feedback on the current configuration.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-segmented-tabs
    radius_type="square"
    custom_class=""
    component_mode=""
    button_name="button"
    items='["All","Recent","Saved"]'
></dda-segmented-tabs>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaSegmentedTabs
    radius_type="square"
    custom_class=""
    component_mode=""
    button_name="button"
    items='["All","Recent","Saved"]'
></DdaSegmentedTabs>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaSegmentedTabs
    radius_type="square"
    custom_class=""
    component_mode=""
    button_name="button"
    items='["All","Recent","Saved"]'
></DdaSegmentedTabs>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-segmented-tabs
    radius_type="square"
    custom_class=""
    component_mode=""
    button_name="button"
    items='["All","Recent","Saved"]'
></dda-segmented-tabs>
```

{% endtab %}
{% endtabs %}

### Properties

| Property         | Description                                                                                                                                                                                                                                                                                                                | Type     |
| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| `component_mode` | Optional parameter that defines a specific mode or variant of the component. options are 'light' or 'dark'.                                                                                                                                                                                                                | `string` |
| `custom_class`   | Additional CSS class(es) to be applied to the segmented tabs container. Allows for custom styling and modifications.                                                                                                                                                                                                       | `string` |
| `items`          | <p></p><p>A JSON string that will be parsed into an array of strings. Each string represents a tab item. If an item starts with 'fo', it will be rendered as a Material Icons icon; otherwise, it will be rendered as text.</p><ul><li><strong>Example</strong>: <code>'\["Home", "fohouse", "Settings"]'</code></li></ul> | `string` |
| `radius_type`    | <p></p><p>Determines the border radius styling of the segmented tabs group. Applied as a CSS class to the container element.</p><ul><li><strong>Example</strong>: <code>'rounded'</code> or <code>'square'</code></li></ul>                                                                                                | `string` |
| `buttons_name`   | Name attribute for the segment buttons                                                                                                                                                                                                                                                                                     | `string` |

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2Ff9FzijnwiZpNgMPoM2Hc%2FSegmented%20Controls%20-%20Anatomy.png?alt=media&amp;token=d6913494-8925-4bee-83a7-bcb09831a46c" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Lead-Icon**: Positioned at the start of the segmented control to provide a visual cue related to the content.

**Segment Label**: Describes the segment, indicating different sections within the control (e.g., "All," "Recent," "Saved").

**Divider**: Separates the segments visually, creating clear boundaries between each selectable option.

**Trail-Icon**: Positioned at the end of the segmented control, providing an additional visual element for context or functionality.

## Dos and Don'ts

| Dos                                                                                           | Don'ts                                                                                 |
| --------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
| Use segmented controls to group related options that are mutually exclusive.                  | Don't use segmented controls for actions that can be performed simultaneously.         |
| Label each segment clearly to indicate its purpose.                                           | Avoid using vague or unclear labels for segments.                                      |
| Ensure each segment is large enough to be easily tapped or clicked.                           | Don't make segments too small to interact with comfortably.                            |
| Use segmented controls in contexts where quick and frequent configuration changes are needed. | Avoid using segmented controls for complex configurations that require detailed input. |
| Provide visual feedback to indicate the selected segment.                                     | Don't leave the user guessing which segment is currently selected.                     |
| Keep the number of segments manageable to avoid overwhelming the user.                        | Don't use too many segments, which can reduce usability and clarity.                   |


# Segmented Tabs

Segmented tabs are used in user interfaces to categorize and display content in an organized, compact manner, allowing for easy navigation between different sections.

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FqdtIP9XskE7m241oExOV%2FSegmented%20Tabs%202%20-%20Overview.png?alt=media&amp;token=ed494f33-2c07-4700-ad0b-f0ffde8f3445" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Segmented tabs are ideal for organizing content into discrete sections within a single view, such as categorizing product features, sorting user preferences, or segmenting data panels. They are particularly effective in interfaces where space is limited and users benefit from quick access to different but related types of information without navigating away from the current page.

### How it works

Segmented tabs create a streamlined, tabbed interface where each tab represents a distinct content category. Users can switch between these categories by clicking on the tabs, which are usually aligned horizontally at the top of the content area. The active tab is highlighted visually, distinguishing it from the others to clearly indicate the currently viewed content. This setup provides an intuitive navigation experience, allowing for efficient information discovery and interaction.

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2F5PLaD2kWgVvXD8MoV3Xf%2FSegmented%20Tabs%202%20-%20Anatomy.png?alt=media&amp;token=e4a03f56-2784-42a9-bc65-5487e4f5a492" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Lead-Icon**: Positioned at the start of the segmented control to provide a visual cue related to the content.

**Segment Label**: Describes the segment, indicating different sections within the control (e.g., "Weekly," "Monthly," "Yearly").

**Trail-Icon**: Positioned at the end of the segmented control, providing an additional visual element for context or functionality.

## Dos and Don'ts

| Dos                                                                                                                              | Don'ts                                                                                                 |
| -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
| Do label each tab clearly and concisely to ensure users understand the content they relate to.                                   | Don't use vague or ambiguous labels that can confuse users about the content of each tab.              |
| Do use a consistent layout and style for all tabs to maintain visual coherence and usability.                                    | Don't use inconsistent styling across tabs, which can disorient users and degrade the user experience. |
| Do provide visual feedback on the active tab, such as a different color or underline, to indicate which section is being viewed. | Don't make the active tab look too similar to inactive ones; ensure it stands out clearly.             |
| Do keep the number of tabs manageable; ideally, keep them all visible without scrolling.                                         | Don't overcrowd the tab area with too many tabs, which can overwhelm users and complicate navigation.  |
| Do ensure tabs are easily clickable, with adequate spacing and hit areas, especially for touch interfaces.                       | Don't make the tabs too small or too close together, which can cause mis-clicks and frustrate users.   |
| Keep the number of segments manageable to avoid overwhelming the user.                                                           | Don't neglect accessibility features, such as keyboard navigation and screen reader compatibility.     |


# Select Input Field

Select Input Field allows users to choose an option from a predefined list, making it easy to select a specific value while ensuring data consistency.

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FLleQI5vwiD4Ge76aJezX%2FSelect%20Field%20-%20Overview.png?alt=media&amp;token=ecc92023-13ee-45ca-8f08-35465e41c6fd" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Select fields are used in forms and other input scenarios where users need to choose from a predefined list of options. They are especially useful in situations with many options, as a dropdown list conserves space and simplifies the selection process.

### How it works

A select field component typically includes a label, a dropdown list of options, and optional elements like placeholder text and helper text to assist users. It can display different states, such as focused, filled, or error, to indicate its current status. The select field can be configured to allow single or multiple selections, depending on the specific requirement.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-select
    options='[{"id":1,"text":"Option 1"},{"id":2,"text":"Option 2"},{"id":3,"text":"Option 3"},{"id":4,"text":"Option 4"},{"id":5,"text":"Option 5"}]'
    label="Select an option"
    placeholder="Please select..."
    selected="0"
    disabled="false"
    helper_text="Helper or footer text"
    error_message=""
    validation_type="normal"
    validation_id="validationId"
    size="default"
    custom_class=""
    component_mode=""
    button_id="button"
    aria_label="select"
    toggle_button_name="toggle_button"
    option_select_button_name="option_button"
></dda-select>    
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaSelect
    options='[{"id":1,"text":"Option 1"},{"id":2,"text":"Option 2"},{"id":3,"text":"Option 3"},{"id":4,"text":"Option 4"},{"id":5,"text":"Option 5"}]'
    label="Select an option"
    placeholder="Please select..."
    selected="0"
    disabled="false"
    helper_text="Helper or footer text"
    error_message=""
    validation_type="normal"
    validation_id="validationId"
    size="default"
    custom_class=""
    component_mode=""
    button_id="button"
    aria_label="select"
    toggle_button_name="toggle_button"
    option_select_button_name="option_button"
></DdaSelect>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaSelect
    options='[{"id":1,"text":"Option 1"},{"id":2,"text":"Option 2"},{"id":3,"text":"Option 3"},{"id":4,"text":"Option 4"},{"id":5,"text":"Option 5"}]'
    label="Select an option"
    placeholder="Please select..."
    selected="0"
    disabled="false"
    helper_text="Helper or footer text"
    error_message=""
    validation_type="normal"
    validation_id="validationId"
    size="default"
    custom_class=""
    component_mode=""
    button_id="button"
    aria_label="select"
    toggle_button_name="toggle_button"
    option_select_button_name="option_button"
></DdaSelect>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-select
    options='[{"id":1,"text":"Option 1"},{"id":2,"text":"Option 2"},{"id":3,"text":"Option 3"},{"id":4,"text":"Option 4"},{"id":5,"text":"Option 5"}]'
    label="Select an option"
    placeholder="Please select..."
    selected="0"
    disabled="false"
    helper_text="Helper or footer text"
    error_message=""
    validation_type="normal"
    validation_id="validationId"
    size="default"
    custom_class=""
    component_mode=""
    button_id="button"
    aria_label="select"
    toggle_button_name="toggle_button"
    option_select_button_name="option_button"
></dda-select>
```

{% endtab %}
{% endtabs %}

### Properties

For version 3.12.0+ you can use the new unified [input interactions](/developers/input-interactions) to set/get data from the components.

| Property                    | Description                                                                                                                                                                                                       | Type      |
| --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
| `label`                     | The text that will be displayed as the label for the select input. It provides a description or instruction for the user about the input field.                                                                   | `string`  |
| `placeholder`               | Text shown inside the select when no option is selected (non-selectable)                                                                                                                                          | `string`  |
| `selected`                  | The currently selected option from the dropdown. This value is displayed on the button as the selected option.                                                                                                    | `string`  |
| `disabled`                  | If set to `true`, the select dropdown will be disabled, preventing user interaction.                                                                                                                              | `boolean` |
| `helper_text`               | Additional text that provides guidance or hints to the user, usually displayed below the select input field.                                                                                                      | `string`  |
| validation\_type            | A string used to specify the validation style for the input field, such as  `'normal'` ,   `'error'` , or any custom validation type.                                                                             | `string`  |
| `error_message`             | A message that will be displayed when the `error` prop is set, typically used to display validation errors.                                                                                                       | `string`  |
| `validation_id`             | The unique identifier for the select field. It is used for associating the label with the input and can also be used for targeting the field programmatically.                                                    | `string`  |
| `size`                      | Specifies the size of the input field (e.g., `small`, `medium`, `large`). This can be used to apply different sizing classes.                                                                                     | `string`  |
| `custom_class`              | A custom CSS class to be applied to the component for additional styling customization.                                                                                                                           | `string`  |
| `component_mode`            | A mode or state that can be used to modify the component’s behavior or appearance based on different configurations, such as ‘read-only’ or ‘edit’.                                                               | `string`  |
| `button_id`                 | The `id` attribute of the select button. It helps uniquely identify the button and is typically used for accessibility purposes or styling.                                                                       | `string`  |
| `aria_label`                | Provides an accessible label for screen readers. It helps improve accessibility by describing the button's purpose for users with disabilities.                                                                   | `string`  |
| `toggle_button_name`        | Name attribute which toggles the dropdown                                                                                                                                                                         | `string`  |
| `option_select_button_name` | Name attribute for the dropdown option selections                                                                                                                                                                 | `string`  |
| `options`                   | A JSON string representing an array of options to be displayed in the dropdown. Each option is displayed as a clickable item. Ensure the string is valid JSON formatted like `["Option1", "Option2", "Option3"]`. | `string`  |

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FySa4Sq4nf8OiwMgC6cQJ%2FSelect%20Field%20-%20Anatomy.png?alt=media&amp;token=ab2f8f08-7a7b-41ad-b4cb-f5e490b9d1b2" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Label**: Indicates the purpose of the dropdown, labeled as "Select" in this example.

**Placeholder**: Provides guidance on the action, displaying text like "Select Option" within the dropdown box before any option is selected.

**Lead-Icon**: Positioned at the beginning of the dropdown, offering a visual cue related to the dropdown’s function.

**Dropdown Icon**: A visual indicator (typically a down arrow) showing that additional options are available upon interaction.

**Caption**: Additional helper or footer text below the dropdown, offering more details or context for the user.

## Dos and Don'ts

| Dos                                                                              | Don'ts                                                                                                             |
| -------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| Use select fields to present users with a list of options to choose from.        | Don't use select fields for inputs that are better suited to other input types, like text fields or radio buttons. |
| Label the select field clearly to indicate its purpose.                          | Avoid using ambiguous or unclear labels for select fields.                                                         |
| Include placeholder text to guide users on what to select.                       | Don't rely solely on placeholder text for essential instructions.                                                  |
| Provide helper text to explain any specific instructions or requirements.        | Don't overload the select field with too much information.                                                         |
| Ensure the select field is large enough to be easily tappable or clickable.      | Avoid making the select field too small to interact with comfortably.                                              |
| Use multiple select option when users need to select more than one option.       | Don't force users to use a single select field when multiple selections are needed.                                |
| Validate input and provide clear error messages when the selection is incorrect. | Don't provide generic error messages that don't help users understand the issue.                                   |
| Keep consistent styling and spacing across all select fields in the application. | Don't use inconsistent styles that may confuse users.                                                              |


# Slider

Sliders are used to allow users to select a value from a range by dragging a handle along a track.

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2Fv5CNkwomeyTi3e4GcJ5B%2FSliders%20-%20Overview.png?alt=media&amp;token=2fcf6875-0b6f-46b9-93be-cff7ccf89839" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Sliders are used in interfaces where users need to select a value or range within a defined limit. They are ideal for adjustable settings like volume control, brightness, price ranges, or any interactive element requiring a range input.

### How it works

A slider component consists of a track and a draggable handle that users can move to select a specific value, which is visually indicated along the track. Sliders can be customized to display labels in various positions and to show different value ranges, providing flexibility in presentation and functionality.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-range-slider
    min="0"
    max="100"
    step="1"
    initial_min="20"
    initial_max="80"
    custom_class=""
    component_mode=""
    left_input_id="left_input"
    right_input_id="right_input"
    left_aria_label="minimum-value"
    right_aria_label="maximum-value"
    left_input_name="left_input"
    right_input_name="right_input"
></dda-range-slider>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaRangeSlider
    min="0"
    max="100"
    step="1"
    initial_min="20"
    initial_max="80"
    custom_class=""
    component_mode=""
    left_input_id="left_input"
    right_input_id="right_input"
    left_aria_label="minimum-value"
    right_aria_label="maximum-value"
    left_input_name="left_input"
    right_input_name="right_input"
></DdaRangeSlider>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaRangeSlider
    min="0"
    max="100"
    step="1"
    initial_min="20"
    initial_max="80"
    custom_class=""
    component_mode=""
    left_input_id="left_input"
    right_input_id="right_input"
    left_aria_label="minimum-value"
    right_aria_label="maximum-value"
    left_input_name="left_input"
    right_input_name="right_input"
></DdaRangeSlider>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-range-slider
    min="0"
    max="100"
    step="1"
    initial_min="20"
    initial_max="80"
    custom_class=""
    component_mode=""
    left_input_id="left_input"
    right_input_id="right_input"
    left_aria_label="minimum-value"
    right_aria_label="maximum-value"
    left_input_name="left_input"
    right_input_name="right_input"
></dda-range-slider>
```

{% endtab %}
{% endtabs %}

### Properties

| Property           | Description                                                                                                                                             | Type     |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| `component_mode`   | Defines the mode of the component (e.g., `dark`, `light`). Used to apply specific styles or behaviors based on the mode.                                | `string` |
| `custom_class`     | A custom CSS class that can be added to the component for additional styling or theming.                                                                | `string` |
| `min`              | The minimum value of the range slider. Defaults to 0.                                                                                                   | `number` |
| `max`              | The maximum value of the range slider. Defaults to 100.                                                                                                 | `number` |
| `step`             | The increment step between each value in the range slider. Defaults to 1.                                                                               | `number` |
| `initial_min`      | The initial minimum value when the component is first rendered. Defaults to 0.                                                                          | `number` |
| `initial_max`      | The initial maximum value when the component is first rendered. Defaults to 100.                                                                        | `number` |
| `size`             | Specifies the size of the range slider (e.g., `small`, `medium`, `large`). This prop can be used for custom styling                                     | `string` |
| `tooltip_position` | Specifies the position of the tooltip relative to the range slider (e.g., `top`, `bottom`, `left`, `right`). Used to position the tooltip on the slider | `string` |
| `left_input_id`    | The unique identifier for the left (min) input element. This ID is used for the label’s `htmlFor` attribute and can be useful for accessibility.        | `string` |
| `right_input_id`   | The unique identifier for the right (max) input element. This ID is used for the label’s `htmlFor` attribute and can be useful for accessibility.       | `string` |
| `left_aria_label`  | The ARIA label for the left (min) input element. Provides an accessible description for screen readers.                                                 | `string` |
| `right_aria_label` | The ARIA label for the right (max) input element. Provides an accessible description for screen readers.                                                | `string` |

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FWLW7HirH8e7w66igYynR%2FSliders%20-%20Anatomy.png?alt=media&amp;token=abd9436b-1821-4d50-9a82-f9078d99544f" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Handles**: These are interactive elements that users can drag along the slider's track to adjust the values.

**Track**: This is the line that represents the range of values available on the slider, guiding the movement of the handles.

**Tooltip**: This displays the selected value directly above the handle, providing real-time feedback as the handle is adjusted.

**Percentage Label**: Indicates the current selected value in percentage form, offering a clear visual reference for the slider's position on the scale.

## Dos and Don'ts

<table><thead><tr><th width="412">Dos</th><th>Don'ts</th></tr></thead><tbody><tr><td>Use sliders for selecting values within a range.</td><td>Don't use sliders for selecting discrete, non-sequential values.</td></tr><tr><td>Label the slider clearly to indicate its purpose.</td><td>Avoid using ambiguous or unclear labels for sliders.</td></tr><tr><td>Ensure the slider is large enough to be easily draggable.</td><td>Don't make the slider handle too small to interact with comfortably.</td></tr><tr><td>Provide visual feedback to indicate the selected value.</td><td>Don't leave users guessing about the current value.</td></tr><tr><td>Use consistent styling and spacing across all sliders in the application.</td><td>Don't use inconsistent styles that may confuse users.</td></tr><tr><td>Update the slider in real-time as the handle is dragged.</td><td>Don't use sliders if you cannot provide real-time updates.</td></tr></tbody></table>


# Steppers

Step indicators are used to show users their current position within a sequence of steps.


# Timeline

A Timeline is a navigation component that guides users through sequential steps in a process, displaying progress and providing clear direction across tasks.

## Overview&#x20;

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2F1Vy1BrJ8RCmNY3f5ifqR%2FTimeline-%20Overview.png?alt=media&amp;token=43711a18-527d-4922-95e9-d9372ddd1fa0" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Timeline components are essential in multi-step processes where clear navigation and progress visualization are crucial. They are ideal for guiding users through forms, checkout processes, and complex workflows, providing a visual representation of which steps have been completed, which are active, and which are yet to be done.

### How it works

A timeline component typically displays a sequence of steps, each represented by numbers, icons, or labels. The current step is distinctly highlighted, while completed steps and upcoming steps have different visual markers to clearly delineate progress. Timelines can be oriented either horizontally or vertically and may include additional text labels to offer more context for each step, ensuring users always know their location and what's required next in the process.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

<pre class="language-jsx"><code class="lang-jsx">&#x3C;dda-horizontal-stepper
    steps='[{"title":"Step 1","subtitle":"Subtitle 1","description":"Lorem Ipsum&#x26;nbsp;is simply dummy text of the printing and typesetting industry."},{"title":"Step 2","subtitle":"Subtitle 2","description":"Lorem Ipsum&#x26;nbsp;is simply dummy text of the printing and typesetting industry."},{"title":"Step 3","subtitle":"Subtitle 3","description":"Lorem Ipsum&#x26;nbsp;is simply dummy text of the printing and typesetting industry."}]'
<strong>    current_step="1"
</strong>    custom_class=''
    mode='light'
>&#x3C;/dda-horizontal-stepper>
</code></pre>

{% endtab %}

{% tab title="React" %}

```jsx
      <DdaHorizontalStepper
            steps='[{"title":"Step 1","subtitle":"Subtitle 1","description":"Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry."},{"title":"Step 2","subtitle":"Subtitle 2","description":"Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry."},{"title":"Step 3","subtitle":"Subtitle 3","description":"Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry."}]'
            current_step="1"
            custom_class='""'
            mode='"light"'
        ></DdaHorizontalStepper>

```

{% endtab %}

{% tab title="Vue" %}

```jsx


       <DdaHorizontalStepper
            steps='[{"title":"Step 1","subtitle":"Subtitle 1","description":"Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry."},{"title":"Step 2","subtitle":"Subtitle 2","description":"Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry."},{"title":"Step 3","subtitle":"Subtitle 3","description":"Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry."}]'
            current_step="1"
            custom_class='""'
            mode='"light"'
        ></DdaHorizontalStepper>
        
  
```

{% endtab %}

{% tab title="Angular" %}

```jsx

 <dda-horizontal-stepper
    steps='[{"title":"Step 1","subtitle":"Subtitle 1","description":"Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry."},{"title":"Step 2","subtitle":"Subtitle 2","description":"Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry."},{"title":"Step 3","subtitle":"Subtitle 3","description":"Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry."}]'
    current_step="1"
    custom_class='""'
    mode='"light"'
></dda-horizontal-stepper>
        

```

{% endtab %}
{% endtabs %}

### Properties

| Property         | Description                                                                                                                                                                 | Type                                                                                              |
| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
| `type`           | Defines the style of the tab. It can either be `text` (just the text of the tab) or `text-icon` (a combination of text and an icon next to the text). Defaults to `'text'`. | `string`                                                                                          |
| `hover_style`    | Specifies the hover style for the tabs. Options include different background or border styles that change when a tab is hovered over. Defaults to `'dda-tab-default'`.      | `'dda-tab-default'` \| `'dda-tab-filed'` \| `'dda-tab-underline'` \| `'dda-tab-underline-filled'` |
| `custom_class`   | Allows the user to apply custom CSS classes to the tabs container for additional styling. Defaults to an empty string (no custom class).                                    | `string`                                                                                          |
| `component_mode` | Optionally defines a mode for the component ('light' or 'dark'), which could be used for conditional styling or behavior. Defaults to `'light'`.                            | `string`                                                                                          |
| `button_ids`     | Specifies an array of button IDs used to identify and manage tab buttons. Useful for targeting specific buttons in scripting or accessibility features.                     | `string`                                                                                          |
| `button_values`  | To define the value of tab item                                                                                                                                             | `string`                                                                                          |
| `aria_label`     | Defines an accessible label for the tab buttons, improving accessibility by describing the purpose of the buttons for screen readers.                                       | `string`                                                                                          |
| `tab_texts`      | Defines an array of text labels for each tab. These labels are displayed on the tab buttons and help users navigate between different content sections.                     | `string`                                                                                          |
| `tab_type`       | Defines tab layout style (e.g., `"dda-horizontal-tab"`, `"dda-vertical-tab"`).                                                                                              | `string`                                                                                          |
| `button_name`    | Specifies the name attribute for the button element                                                                                                                         | `string`                                                                                          |
| `ontabclick`     | javascript function                                                                                                                                                         | `function`                                                                                        |

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FZRFsOKzcGfPvO8v57sEc%2FTimeline%20-%20Anatomy.png?alt=media&amp;token=4798cb0f-f613-420a-a5ed-77077e54dd5b" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Status Icon**: A visual indicator showing the current state of the step (e.g., checkmark for completed, number for pending).

**Status Text**: Displays the progress state such as "Completed", "Active", or "Pending".

**Step Title**: The main heading that defines the purpose or name of the step.

**Step Description**: Should be corrected to "Step Title"—the descriptive title for each step in the flow.

**Step Description**: A supporting text that offers more context or instructions for the step.

**Completed Line**: A solid line connecting completed steps, indicating progress.

**Dashed Line**: A dotted connector line used for upcoming or incomplete steps.

***

## Dos and Don'ts

| Dos                                                                                                  | Don'ts                                                                                           |
| ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
| Clearly label each step to ensure users understand what each part of the process entails.            | Use ambiguous or unclear labels that might confuse users about what is expected of them.         |
| Highlight the current step distinctly to help users know exactly where they are in the process.      | Make it difficult to distinguish between completed, current, and upcoming steps.                 |
| Use visual markers like icons or numbers to indicate progress and guide users through the steps.     | Clutter the stepper with excessive details that might overwhelm users.                           |
| Provide directional controls if the process requires users to navigate back and forth between steps. | Allow navigation to steps that depend on completion of previous steps without proper validation. |


# Vertical Stepper

Step indicators are used to show users their current position within a sequence of steps.

## Overview&#x20;

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FdtlZM3xkeijAX9VKFL7c%2FStep%20Indicator%202%20-%20Overview.png?alt=media&amp;token=948251da-d65a-4aa9-8942-2c19de0b35b1" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Step indicators are used in multi-step processes to guide users through each stage, making them ideal for forms, checkout processes, and workflows. They visually represent progress, helping users understand which steps are completed, which are current, and which are remaining.

### How it works

A step indicator component typically shows a series of steps represented by numbers, icons, or labels. The current step is highlighted, while completed and upcoming steps have distinct visual markers. The component can be configured to display steps horizontally or vertically, and may include optional text labels to provide additional context for each step.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-vertical-stepper
        steps='[{"icon":"sentiment_satisfied","title":"Step 1","subtitle":"Subtitle 1","description":"Description 1"},{"icon":"sentiment_satisfied","title":"Step 2","subtitle":"Subtitle 2","description":"Description 2"},{"icon":"sentiment_satisfied","title":"Step 3","subtitle":"Subtitle 3","description":"Description 3"}]'
        current_step="1"
        custom_class=""
        component_mode=""
></dda-vertical-stepper>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaVerticalStepper
        steps='[{"icon":"sentiment_satisfied","title":"Step 1","subtitle":"Subtitle 1","description":"Description 1"},{"icon":"sentiment_satisfied","title":"Step 2","subtitle":"Subtitle 2","description":"Description 2"},{"icon":"sentiment_satisfied","title":"Step 3","subtitle":"Subtitle 3","description":"Description 3"}]'
        current_step="1"
        custom_class=""
        component_mode=""
></DdaVerticalStepper>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaVerticalStepper
        steps='[{"icon":"sentiment_satisfied","title":"Step 1","subtitle":"Subtitle 1","description":"Description 1"},{"icon":"sentiment_satisfied","title":"Step 2","subtitle":"Subtitle 2","description":"Description 2"},{"icon":"sentiment_satisfied","title":"Step 3","subtitle":"Subtitle 3","description":"Description 3"}]'
        current_step="1"
        custom_class=""
        component_mode=""
></DdaVerticalStepper>  
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-vertical-stepper
        steps='[{"icon":"sentiment_satisfied","title":"Step 1","subtitle":"Subtitle 1","description":"Description 1"},{"icon":"sentiment_satisfied","title":"Step 2","subtitle":"Subtitle 2","description":"Description 2"},{"icon":"sentiment_satisfied","title":"Step 3","subtitle":"Subtitle 3","description":"Description 3"}]'
        current_step="1"
        custom_class=""
        component_mode=""
></dda-vertical-stepper>
```

{% endtab %}
{% endtabs %}

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2Fo00NHIM2c4Dof9ANnYZh%2FStep%20Indicator%202%20-%20Anatomy.png?alt=media&amp;token=f76ec513-b318-4185-9cb2-5cd4809a864d" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Lead-Icon**: Placed at the beginning of each step, the lead icon visually represents the type of action or status associated with that step, providing immediate visual context.

**Completed Line**: A solid line connecting completed steps, indicating the progress through the sequence.

**Step Title**: The title of each step displayed prominently to identify the stage in the process.

**Status Text**: Accompanies each step title, giving a brief update or description of the current status at that particular stage.

**Supporting Text**: Additional descriptive text that provides more detailed information about what the user needs to know or do at the current step.

**Dashed Line**: Represents the connection between the current step and upcoming steps, signifying progress yet to be made.

**Trail-Icon**: Placed at the end of the ongoing card, typically an arrow pointing to the right, indicating the direction of progress through the steps.

**Ongoing Card**: This element surrounds the current or active step, highlighting it from other steps and often containing key information or interactions needed to progress.

**Upcoming Step**: Labels the steps that have not yet been reached or completed, often styled more subtly than completed or current steps to indicate they are not yet active.

## Dos and Don'ts

| Dos                                                                                           | Don'ts                                                                                            |
| --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
| Ensure clarity in each step title to inform users about their current phase in the process.   | Overload steps with too much information, which can cause confusion and cognitive overload.       |
| Use concise status texts to aid understanding without overwhelming the user.                  | Use confusing icons or symbols that may not be universally recognizable or contextually clear.    |
| Maintain visual consistency with consistent icons, text styles, and colors across all steps.  | Create dead ends where a step leads to ambiguous paths or unclear transitions.                    |
| Highlight the current step clearly using design elements like borders or background color.    | Ignore responsiveness, failing to design the stepper to work on various screen sizes and devices. |
| Provide navigational feedback with clear icons or lines showing the sequence and progression. | Use ambiguous progress indicators like dashed lines without clear context.                        |


# Sticky Bar

A sticky bar is a fixed navigation element that provides continuous access to essential actions, links, or tools as users scroll through a page.

## Overview&#x20;

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FcmqiSyq0VTgOtnLOrwDo%2FStickybar%202%20-%20Overview.png?alt=media&amp;token=a6a0708b-87aa-42e1-b207-23c06f01a06c" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Sticky bars are used to provide persistent access to key actions, notifications, or navigation options as users scroll through a page. They are ideal for pages with extensive content or long scrollable areas, ensuring critical elements remain accessible without interrupting the user’s workflow.

### How it works

A sticky bar remains fixed at the top, bottom, or edge of the screen as users scroll through the content. It typically includes interactive elements like buttons, links, or icons that enable quick actions or navigation. Optional features such as collapsibility or auto-hide can be configured to enhance the user experience by maximizing screen space when the bar is not actively needed. The sticky bar can adapt to different screen sizes and layouts, maintaining usability across devices.

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FzDjOmvRUWj2DOEayiZAk%2FStickybar%20Last%20Updated%20-%20Overview.png?alt=media&amp;token=35404b5a-0165-4df4-ae04-95d3d9f83f71" alt=""><figcaption><p><strong>Including the website’s last updated date in the sticky bar is optional. You may refer to the example above if needed.</strong></p></figcaption></figure>

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-sticky-footer
    happiness-icon-href="#"
    happiness-icon-id="Happiness"
    happiness-icon-src="static/media/public_images/icn-happy.svg"
    happiness-icon-alt="Happiness"
    happiness-icon-tooltip="Happiness"
    happiness-icon-click="console.log('Happiness icon clicked')"
    
    accessibility-icon-href="#"
    accessibility-icon-id="uggestionsComplaints"
    accessibility-icon-src="static/media/public_images/icn-complaints.svg"
    accessibility-icon-alt="Suggestions and complaints"
    accessibility-icon-tooltip="Suggestions &amp; complaints"
    accessibility-icon-click="console.log('Suggestion AE icon clicked')"
    
    services-icon-href="#"
    services-icon-id="footerServices"
    services-icon-src="static/media/public_images/icn-grid-view.svg"
    services-icon-alt="Services"
    services-icon-tooltip="Services"
    services-icon-text="Services"
    services-icon-click="console.log('Services icon clicked')"
    
    hide-middle-section="false"
    middle-link='[{"LogoTooltip":"Middlelink","href":"#","src":"static/media/public_images/digital-logo.svg","srcDark":"static/media/public_images/digital-logo.svg","alt":"DDA"},{"LogoTooltip":"Middlelink","href":"#","src":"static/media/public_images/digital-logo.svg","srcDark":"static/media/public_images/digital-logo.svg","alt":"DDA"},{"LogoTooltip":"Middlelink","href":"#","src":"static/media/public_images/digital-logo.svg","srcDark":"static/media/public_images/digital-logo.svg","alt":"DDA"}]'
    
    right-link='[{"RightLinkTooltip":"Survey","href":"#","title":"Survey","itemId":"itemID","ariaLabel":"Survey","LinkText":"Survey","IconFamily":"material-icons","IconName":"poll"},{"RightLinkTooltip":"Locations","href":"#","title":"Locations","itemId":"itemID","ariaLabel":"Locations","LinkText":"Locations","IconFamily":"material-icons","IconName":"location_on"},{"RightLinkTooltip":"News Room","href":"#","title":"News Room","itemId":"itemID","ariaLabel":"News Room","LinkText":"News Room","IconFamily":"material-icons","IconName":"feed"},{"RightLinkTooltip":"Contact Us","href":"#","title":"Contact Us","itemId":"itemID","ariaLabel":"Contact Us","LinkText":"Contact Us","IconFamily":"material-icons","IconName":"mail"}]'
    
    dubaiae-icon-href="javascript:void(0)"
    dubaiae-icon-id="dubaiAEID"
    dubaiae-icon-src="static/media/public_images/DubaiAE.svg"
    dubaiae-icon-small-src="static/media/public_images/DdiabiAE-icon.svg"
    dubaiae-icon-alt="dubai.ae"
    dubaiae-icon-tooltip="dubai.ae"
    dubaiae-icon-on-click="console.log('Dubai AE icon clicked')"
    
    ai-icon-href="javascript:void(0)"
    ai-icon-id="aiIconID"
    ai-icon-src="static/media/public_images/DubaiAI.svg"
    ai-icon-alt="Digital AI"
    ai-icon-tooltip="Digital AI"
    ai-icon-on-click="console.log('AI icon clicked')"
    
    chat-icon-href="javascript:void(0)"
    chat-icon-id="chatID"
    chat-icon-src="static/media/public_images/icn-chat_bubble_outline.svg"
    chat-icon-alt="Online Chat"
    chat-icon-tooltip="Online Chat"
    chat-icon-on-click="console.log('Chat Icon clicked')"
    
    more-icon-family="material-icons"
    more-icon="more_horiz"
></dda-sticky-footer>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaStickyFooter
    happiness-icon-href="#"
    happiness-icon-id="Happiness"
    happiness-icon-src="static/media/public_images/icn-happy.svg"
    happiness-icon-alt="Happiness"
    happiness-icon-tooltip="Happiness"
    happiness-icon-click="console.log('Happiness icon clicked')"
    
    accessibility-icon-href="#"
    accessibility-icon-id="uggestionsComplaints"
    accessibility-icon-src="static/media/public_images/icn-complaints.svg"
    accessibility-icon-alt="Suggestions and complaints"
    accessibility-icon-tooltip="Suggestions &amp; complaints"
    accessibility-icon-click="console.log('Suggestion AE icon clicked')"
    
    services-icon-href="#"
    services-icon-id="footerServices"
    services-icon-src="static/media/public_images/icn-grid-view.svg"
    services-icon-alt="Services"
    services-icon-tooltip="Services"
    services-icon-text="Services"
    services-icon-click="console.log('Services icon clicked')"
    
    hide-middle-section="false"
    middle-link='[{"LogoTooltip":"Middlelink","href":"#","src":"static/media/public_images/digital-logo.svg","alt":"DDA"},{"LogoTooltip":"Middlelink","href":"#","src":"static/media/public_images/digital-logo.svg","alt":"DDA"},{"LogoTooltip":"Middlelink","href":"#","src":"static/media/public_images/digital-logo.svg","alt":"DDA"}]'
    
    right-link='[{"RightLinkTooltip":"Survey","href":"#","title":"Survey","itemId":"itemID","ariaLabel":"Survey","LinkText":"Survey","IconFamily":"material-icons","IconName":"poll"},{"RightLinkTooltip":"Locations","href":"#","title":"Locations","itemId":"itemID","ariaLabel":"Locations","LinkText":"Locations","IconFamily":"material-icons","IconName":"location_on"},{"RightLinkTooltip":"News Room","href":"#","title":"News Room","itemId":"itemID","ariaLabel":"News Room","LinkText":"News Room","IconFamily":"material-icons","IconName":"feed"},{"RightLinkTooltip":"Contact Us","href":"#","title":"Contact Us","itemId":"itemID","ariaLabel":"Contact Us","LinkText":"Contact Us","IconFamily":"material-icons","IconName":"mail"}]'
    
    dubaiae-icon-href="javascript:void(0)"
    dubaiae-icon-id="dubaiAEID"
    dubaiae-icon-src="static/media/public_images/DubaiAE.svg"
    dubaiae-icon-small-src="static/media/public_images/DdiabiAE-icon.svg"
    dubaiae-icon-alt="dubai.ae"
    dubaiae-icon-tooltip="dubai.ae"
    dubaiae-icon-on-click="console.log('Dubai AE icon clicked')"
    
    ai-icon-href="javascript:void(0)"
    ai-icon-id="aiIconID"
    ai-icon-src="static/media/public_images/DubaiAI.svg"
    ai-icon-alt="Digital AI"
    ai-icon-tooltip="Digital AI"
    ai-icon-on-click="console.log('AI icon clicked')"
    
    chat-icon-href="javascript:void(0)"
    chat-icon-id="chatID"
    chat-icon-src="static/media/public_images/icn-chat_bubble_outline.svg"
    chat-icon-alt="Online Chat"
    chat-icon-tooltip="Online Chat"
    chat-icon-on-click="console.log('Chat Icon clicked')"
    
    more-icon-family="material-icons"
    more-icon="more_horiz"
></DdaStickyFooter>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaStickyFooter
    happiness-icon-href="#"
    happiness-icon-id="Happiness"
    happiness-icon-src="static/media/public_images/icn-happy.svg"
    happiness-icon-alt="Happiness"
    happiness-icon-tooltip="Happiness"
    happiness-icon-click="console.log('Happiness icon clicked')"
    
    accessibility-icon-href="#"
    accessibility-icon-id="uggestionsComplaints"
    accessibility-icon-src="static/media/public_images/icn-complaints.svg"
    accessibility-icon-alt="Suggestions and complaints"
    accessibility-icon-tooltip="Suggestions &amp; complaints"
    accessibility-icon-click="console.log('Suggestion AE icon clicked')"
    
    services-icon-href="#"
    services-icon-id="footerServices"
    services-icon-src="static/media/public_images/icn-grid-view.svg"
    services-icon-alt="Services"
    services-icon-tooltip="Services"
    services-icon-text="Services"
    services-icon-click="console.log('Services icon clicked')"
    
    hide-middle-section="false"
    middle-link='[{"LogoTooltip":"Middlelink","href":"#","src":"static/media/public_images/digital-logo.svg","alt":"DDA"},{"LogoTooltip":"Middlelink","href":"#","src":"static/media/public_images/digital-logo.svg","alt":"DDA"},{"LogoTooltip":"Middlelink","href":"#","src":"static/media/public_images/digital-logo.svg","alt":"DDA"}]'
    
    right-link='[{"RightLinkTooltip":"Survey","href":"#","title":"Survey","itemId":"itemID","ariaLabel":"Survey","LinkText":"Survey","IconFamily":"material-icons","IconName":"poll"},{"RightLinkTooltip":"Locations","href":"#","title":"Locations","itemId":"itemID","ariaLabel":"Locations","LinkText":"Locations","IconFamily":"material-icons","IconName":"location_on"},{"RightLinkTooltip":"News Room","href":"#","title":"News Room","itemId":"itemID","ariaLabel":"News Room","LinkText":"News Room","IconFamily":"material-icons","IconName":"feed"},{"RightLinkTooltip":"Contact Us","href":"#","title":"Contact Us","itemId":"itemID","ariaLabel":"Contact Us","LinkText":"Contact Us","IconFamily":"material-icons","IconName":"mail"}]'
    
    dubaiae-icon-href="javascript:void(0)"
    dubaiae-icon-id="dubaiAEID"
    dubaiae-icon-src="static/media/public_images/DubaiAE.svg"
    dubaiae-icon-small-src="static/media/public_images/DdiabiAE-icon.svg"
    dubaiae-icon-alt="dubai.ae"
    dubaiae-icon-tooltip="dubai.ae"
    dubaiae-icon-on-click="console.log('Dubai AE icon clicked')"
    
    ai-icon-href="javascript:void(0)"
    ai-icon-id="aiIconID"
    ai-icon-src="static/media/public_images/DubaiAI.svg"
    ai-icon-alt="Digital AI"
    ai-icon-tooltip="Digital AI"
    ai-icon-on-click="console.log('AI icon clicked')"
    
    chat-icon-href="javascript:void(0)"
    chat-icon-id="chatID"
    chat-icon-src="static/media/public_images/icn-chat_bubble_outline.svg"
    chat-icon-alt="Online Chat"
    chat-icon-tooltip="Online Chat"
    chat-icon-on-click="console.log('Chat Icon clicked')"
    
    more-icon-family="material-icons"
    more-icon="more_horiz"
></DdaStickyFooter>
```

{% endtab %}

{% tab title="Angular" %}

<pre class="language-jsx"><code class="lang-jsx">&#x3C;dda-sticky-footer
    happiness-icon-href="#"
    happiness-icon-id="Happiness"
    happiness-icon-src="static/media/public_images/icn-happy.svg"
    happiness-icon-alt="Happiness"
    happiness-icon-tooltip="Happiness"
    happiness-icon-click="console.log('Happiness icon clicked')"
    
    accessibility-icon-href="#"
    accessibility-icon-id="uggestionsComplaints"
    accessibility-icon-src="static/media/public_images/icn-complaints.svg"
    accessibility-icon-alt="Suggestions and complaints"
    accessibility-icon-tooltip="Suggestions &#x26;amp; complaints"
    accessibility-icon-click="console.log('Suggestion AE icon clicked')"
    
    services-icon-href="#"
<strong>    services-icon-id="footerServices"
</strong>    services-icon-src="static/media/public_images/icn-grid-view.svg"
    services-icon-alt="Services"
    services-icon-tooltip="Services"
    services-icon-text="Services"
    services-icon-click="console.log('Services icon clicked')"
    
    hide-middle-section="false"
    middle-link='[{"LogoTooltip":"Middlelink","href":"#","src":"static/media/public_images/digital-logo.svg","alt":"DDA"},{"LogoTooltip":"Middlelink","href":"#","src":"static/media/public_images/digital-logo.svg","alt":"DDA"},{"LogoTooltip":"Middlelink","href":"#","src":"static/media/public_images/digital-logo.svg","alt":"DDA"}]'
    
    right-link='[{"RightLinkTooltip":"Survey","href":"#","title":"Survey","itemId":"itemID","ariaLabel":"Survey","LinkText":"Survey","IconFamily":"material-icons","IconName":"poll"},{"RightLinkTooltip":"Locations","href":"#","title":"Locations","itemId":"itemID","ariaLabel":"Locations","LinkText":"Locations","IconFamily":"material-icons","IconName":"location_on"},{"RightLinkTooltip":"News Room","href":"#","title":"News Room","itemId":"itemID","ariaLabel":"News Room","LinkText":"News Room","IconFamily":"material-icons","IconName":"feed"},{"RightLinkTooltip":"Contact Us","href":"#","title":"Contact Us","itemId":"itemID","ariaLabel":"Contact Us","LinkText":"Contact Us","IconFamily":"material-icons","IconName":"mail"}]'
    
    dubaiae-icon-href="javascript:void(0)"
    dubaiae-icon-id="dubaiAEID"
    dubaiae-icon-src="static/media/public_images/DubaiAE.svg"
    dubaiae-icon-small-src="static/media/public_images/DdiabiAE-icon.svg"
    dubaiae-icon-alt="dubai.ae"
    dubaiae-icon-tooltip="dubai.ae"
    dubaiae-icon-on-click="console.log('Dubai AE icon clicked')"
    
    ai-icon-href="javascript:void(0)"
    ai-icon-id="aiIconID"
    ai-icon-src="static/media/public_images/DubaiAI.svg"
    ai-icon-alt="Digital AI"
    ai-icon-tooltip="Digital AI"
    ai-icon-on-click="console.log('AI icon clicked')"
    
    chat-icon-href="javascript:void(0)"
    chat-icon-id="chatID"
    chat-icon-src="static/media/public_images/icn-chat_bubble_outline.svg"
    chat-icon-alt="Online Chat"
    chat-icon-tooltip="Online Chat"
    chat-icon-on-click="console.log('Chat Icon clicked')"
    
    more-icon-family="material-icons"
    more-icon="more_horiz"
>&#x3C;/dda-sticky-footer>
</code></pre>

{% endtab %}
{% endtabs %}

### Properties

| Property                   | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | Type     |
| -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| `happinessIconHref`        | URL destination for the happiness icon link                                                                                                                                                                                                                                                                                                                                                                                                                                         | `string` |
| `happinessIconId`          | A unique HTML `id` assigned to the **Happiness** icon element. Used for DOM targeting, accessibility labels, or event tracking.                                                                                                                                                                                                                                                                                                                                                     | `string` |
| `happinessIconSrc`         | Source URL for the happiness icon image                                                                                                                                                                                                                                                                                                                                                                                                                                             | `string` |
| `happinessIconAlt`         | Alternative text for the happiness icon for                                                                                                                                                                                                                                                                                                                                                                                                                                         | `string` |
| `happinessIconTooltip`     | Tooltip text that appears when hovering over the happiness icon                                                                                                                                                                                                                                                                                                                                                                                                                     | `string` |
| `happinessIconClick`       | JavaScript code to execute when the Happiness icon is clicked. Useful for triggering actions, analytics, or logs.                                                                                                                                                                                                                                                                                                                                                                   | `string` |
| `accessibilityIconHref`    | URL destination for the accessibility icon link                                                                                                                                                                                                                                                                                                                                                                                                                                     | `string` |
| `accessibilityIconId`      | A unique HTML `id` assigned to the **Happiness** icon element. Used for DOM targeting, accessibility labels, or event tracking.                                                                                                                                                                                                                                                                                                                                                     | `string` |
| `accessibilityIconSrc`     | Source URL for the accessibility icon image                                                                                                                                                                                                                                                                                                                                                                                                                                         | `string` |
| `accessibilityIconAlt`     | Alternative text for the accessibility icon for accessibility                                                                                                                                                                                                                                                                                                                                                                                                                       | `string` |
| `accessibilityIconTooltip` | Tooltip text that appears when hovering over the accessibility icon                                                                                                                                                                                                                                                                                                                                                                                                                 | `string` |
| `accessibilityIconClick`   | JavaScript code to execute when the Happiness icon is clicked. Useful for triggering actions, analytics, or logs.                                                                                                                                                                                                                                                                                                                                                                   | `string` |
| `servicesIconHref`         | URL destination for the services icon link                                                                                                                                                                                                                                                                                                                                                                                                                                          | `string` |
| `servicesIconId`           | A unique HTML `id` assigned to the **Happiness** icon element. Used for DOM targeting, accessibility labels, or event tracking.                                                                                                                                                                                                                                                                                                                                                     | `string` |
| `servicesIconSrc`          | Source URL for the services icon image                                                                                                                                                                                                                                                                                                                                                                                                                                              | `string` |
| `servicesIconAlt`          | Alternative text for the services icon for accessibility                                                                                                                                                                                                                                                                                                                                                                                                                            | `string` |
| `servicesIconTooltip`      | Tooltip text that appears when hovering over the services icon                                                                                                                                                                                                                                                                                                                                                                                                                      | `string` |
| `servicesIconText`         | Optional text label displayed below the services icon                                                                                                                                                                                                                                                                                                                                                                                                                               | `string` |
| `servicesIconClick`        | JavaScript code to execute when the Happiness icon is clicked. Useful for triggering actions, analytics, or logs.                                                                                                                                                                                                                                                                                                                                                                   | `string` |
| `hideMiddleSection`        | To disable or enable the middle section inside the footer                                                                                                                                                                                                                                                                                                                                                                                                                           | `string` |
| `middleLink`               | An array of link objects displayed in the middle section of the component. Each object contains properties such as `LogoTooltip` for the tooltip text, `href` for the link destination, `src` for the logo image source, and `alt` for alternative text. This attribute is used to dynamically render a set of clickable logo links.                                                                                                                                                | `string` |
| `rightLink`                | An array of link objects displayed in the right section of the component. Each object includes properties such as `RightLinkTooltip` for tooltip text, `href` for the link URL, `alt` for accessibility text, `LinkText` for the visible label, and icon-related properties like `IconFamily` and `IconName` to define the icon appearance. `title` This is a title attrubute.  `RightLinkTooltip`  This attribute is used to render a set of action links with icons and tooltips. | `string` |
| `dubaiaeIconHref`          | URL or link the DubaiAE icon should redirect to when clicked.                                                                                                                                                                                                                                                                                                                                                                                                                       | `string` |
| `dubaiae-icon-id`          | Unique ID for the DubaiAE icon (useful for DOM access or tracking).                                                                                                                                                                                                                                                                                                                                                                                                                 | `string` |
| `dubaiae-icon-src`         | Source path for the main DubaiAE icon image.                                                                                                                                                                                                                                                                                                                                                                                                                                        | `string` |
| `dubaiae-icon-small-src`   | Source path for the small version of the DubaiAE icon (for responsive usage).                                                                                                                                                                                                                                                                                                                                                                                                       | `string` |
| `dubaiae-icon-alt`         | Alternate text for the DubaiAE icon (for accessibility and SEO).                                                                                                                                                                                                                                                                                                                                                                                                                    | `string` |
| `dubaiae-icon-tooltip`     |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |          |
| `dubaiae-icon-on-click`    | JavaScript code to execute when the Happiness icon is clicked. Useful for triggering actions, analytics, or logs.                                                                                                                                                                                                                                                                                                                                                                   | `string` |
| `aiIconHref`               | URL destination for the AI icon link                                                                                                                                                                                                                                                                                                                                                                                                                                                | `string` |
| `ai-icon-id`               | A unique HTML `id` assigned to the **Happiness** icon element. Used for DOM targeting, accessibility labels, or event tracking.                                                                                                                                                                                                                                                                                                                                                     | `string` |
| `aiIconSrc`                | Source URL for the AI icon image                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `string` |
| `aiIconAlt`                | Alternative text for the AI icon for accessibility                                                                                                                                                                                                                                                                                                                                                                                                                                  | `string` |
| `aiIconTooltip`            | Tooltip text that appears when hovering over the AI icon                                                                                                                                                                                                                                                                                                                                                                                                                            | `string` |
| `ai-icon-on-click`         | JavaScript code to execute when the Happiness icon is clicked. Useful for triggering actions, analytics, or logs.                                                                                                                                                                                                                                                                                                                                                                   | `string` |
| `chatIconHref`             | URL destination for the chat icon link                                                                                                                                                                                                                                                                                                                                                                                                                                              | `string` |
| `chat-icon-id`             | A unique HTML `id` assigned to the **Happiness** icon element. Used for DOM targeting, accessibility labels, or event tracking.                                                                                                                                                                                                                                                                                                                                                     | `string` |
| `chatIconSrc`              | Source URL for the chat icon image                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `string` |
| `chatIconAlt`              | Alternative text for the chat icon for accessibility                                                                                                                                                                                                                                                                                                                                                                                                                                | `string` |
| `chatIconTooltip`          | Tooltip text that appears when hovering over the chat icon                                                                                                                                                                                                                                                                                                                                                                                                                          | `string` |
| `chat-icon-on-click`       | JavaScript code to execute when the Happiness icon is clicked. Useful for triggering actions, analytics, or logs.                                                                                                                                                                                                                                                                                                                                                                   | `string` |
| `more-icon-family`         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |          |
| `more-icon`                | Able to change the more icon button                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `string` |

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2F0VD2iwLcULrw0JHZEi1j%2FStickybar%202%20-%20Anatomy.png?alt=media&amp;token=7ac256fd-49e7-4b1f-b56c-72b93c2297bf" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Divider Lines:** Thin vertical lines used to visually separate sections and group related elements, enhancing clarity and organization.

**Services Icon and Label:** A grid icon paired with a "Services" label, providing a direct link to a centralized service hub.

**Shotcuts:** A sequence of links provides easy access, redirecting users to pages based on the content and the selected link.

**Navigation Links:**&#x20;

1. **Locations:** A pin icon with the "Locations" label for accessing physical locations or map-related services.
2. **Newsroom:** A document icon with the "Newsroom" label, linking to news or updates.
3. **Contact Us:** A mail icon paired with "Contact Us," offering a way to connect with support or service teams.
4. **Chat Icon:** A speech bubble icon for initiating live chat or accessing FAQs.

**External Links and Tools:**

1. **Dubai.ae:** A text link for accessing the main government portal.
2. **DubaAI Icon:** A circular icon with "AI," likely linking to artificial intelligence-based services or tools.
3. **04 - Voice of customer:**  A unified platform for Dubai entities to connect with customers and gather their feedback (suggestions, complaints, comments).
4. **Happiness Meter:** Representing user satisfaction or feedback, providing quick access to a feedback feature.

## Responsive Behavior

The stickybar component turns to mobile view @ the 1024 breakpoint

## Dos and Don'ts

| Dos                                                                               | Don'ts                                                             |
| --------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
| Use step indicators to guide users through multi-step processes.                  | Don't use step indicators for single-step processes.               |
| Label each step clearly to indicate its purpose.                                  | Avoid using ambiguous or unclear labels for steps.                 |
| Ensure step indicators are large enough to be easily noticeable.                  | Don't make step indicators too small or difficult to see.          |
| Provide visual feedback to indicate the current, completed, and upcoming steps.   | Don't leave users guessing which step they are on.                 |
| Use consistent styling and spacing across all step indicators in the application. | Don't use inconsistent styles that may confuse users.              |
| Update the step indicator in real-time as the user progresses through the steps.  | Don't use step indicators if you cannot provide real-time updates. |


# Tabs

Tabs organize content into separate sections within the same interface, allowing users to switch between views without navigating away from the page.

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FoYACVGSyA9zX0FMZ8brS%2FTab%20-%20Overview.png?alt=media&amp;token=fe161d10-f2ca-4455-892e-0e3c8a170207" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Use Tabs to organize related content that is too complex to display all at once. They are ideal for settings panels, dashboards, product information pages, and any interface where users need to toggle between multiple sections within a single view.

### How it works

Tabs are arranged in a row, with each tab representing a different content section. When a tab is selected, it becomes visually highlighted, and the associated content is displayed below. Only one tab's content is visible at a time, which helps keep the interface clean and manageable.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-tabs
    type="text"
    hover_style="dda-tab-default"
    custom_class=""
    component_mode=""
    button_ids='["tab-btn-1","tab-btn-2","tab-btn-3"]'
    button_values='["val-1","val-2","val-3"]'
    aria_label="tabs"
    tab_texts='["Tab 1","Tab 2","Tab 3"]'
    tab_type="dda-horizontal-tab"
    ontabclick="index => alert(`Tab ${index + 1} clicked!`)"
    button_name="button"
></dda-tabs>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaTabs
    type="text"
    hover_style="dda-tab-default"
    custom_class=""
    component_mode=""
    button_ids='["tab-btn-1","tab-btn-2","tab-btn-3"]'
    button_values='["val-1","val-2","val-3"]'
    aria_label="tabs"
    tab_texts='["Tab 1","Tab 2","Tab 3"]'
    tab_type="dda-horizontal-tab"
    ontabclick="index => alert(`Tab ${index + 1} clicked!`)"
    button_name="button"
></DdaTabs>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaTabs
    type="text"
    hover_style="dda-tab-default"
    custom_class=""
    component_mode=""
    button_ids='["tab-btn-1","tab-btn-2","tab-btn-3"]'
    button_values='["val-1","val-2","val-3"]'
    aria_label="tabs"
    tab_texts='["Tab 1","Tab 2","Tab 3"]'
    tab_type="dda-horizontal-tab"
    ontabclick="index => alert(`Tab ${index + 1} clicked!`)"
    button_name="button"
></DdaTabs>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-tabs
    type="text"
    hover_style="dda-tab-default"
    custom_class=""
    component_mode=""
    button_ids='["tab-btn-1","tab-btn-2","tab-btn-3"]'
    button_values='["val-1","val-2","val-3"]'
    aria_label="tabs"
    tab_texts='["Tab 1","Tab 2","Tab 3"]'
    tab_type="dda-horizontal-tab"
    ontabclick="index => alert(`Tab ${index + 1} clicked!`)"
    button_name="button"
></dda-tabs>
```

{% endtab %}
{% endtabs %}

## Properties

| Property         | Description                                                                                                                                                                 | Type                                                                                              |
| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
| `type`           | Defines the style of the tab. It can either be `text` (just the text of the tab) or `text-icon` (a combination of text and an icon next to the text). Defaults to `'text'`. | `string`                                                                                          |
| `hover_style`    | Specifies the hover style for the tabs. Options include different background or border styles that change when a tab is hovered over. Defaults to `'dda-tab-default'`.      | `'dda-tab-default'` \| `'dda-tab-filed'` \| `'dda-tab-underline'` \| `'dda-tab-underline-filled'` |
| `custom_class`   | Allows the user to apply custom CSS classes to the tabs container for additional styling. Defaults to an empty string (no custom class).                                    | `string`                                                                                          |
| `component_mode` | Optionally defines a mode for the component ('light' or 'dark'), which could be used for conditional styling or behavior. Defaults to `'light'`.                            | `string`                                                                                          |
| `button_ids`     | Specifies an array of button IDs used to identify and manage tab buttons. Useful for targeting specific buttons in scripting or accessibility features.                     | `string`                                                                                          |
| `button_values`  | To define the value of tab item                                                                                                                                             | `string`                                                                                          |
| `aria_label`     | Defines an accessible label for the tab buttons, improving accessibility by describing the purpose of the buttons for screen readers.                                       | `string`                                                                                          |
| `tab_texts`      | Defines an array of text labels for each tab. These labels are displayed on the tab buttons and help users navigate between different content sections.                     | `string`                                                                                          |
| `tab_type`       | Defines tab layout style (e.g., `"dda-horizontal-tab"`, `"dda-vertical-tab"`).                                                                                              | `string`                                                                                          |
| `button_name`    | Specifies the name attribute for the button element                                                                                                                         | `string`                                                                                          |
| `ontabclick`     | javascript function                                                                                                                                                         | `function`                                                                                        |

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FW35AWZ5KaXbzycFIncY5%2FTab%20-%20Anatomy.png?alt=media&amp;token=d2770163-9796-49f3-8a20-be4955416cf8" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Active Tab**: The currently selected tab, visually distinct to indicate that it is in focus or currently being viewed.

**Inactive Tab**: Tabs that are not selected, styled to show that they are not active, often with a more muted appearance.

**Badge**: A small label, often numerical, indicating additional information related to the tab, such as notifications or counts.

**Lead-Icon**: An icon placed before the tab text to visually represent the content or functionality associated with the tab.

**Label**: The text descriptor of the tab, providing a clear indication of the tab's purpose or content.

## Dos and Don'ts

| Dos                                                                                  | Don'ts                                                                                                 |
| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------ |
| Use clear, concise labels for each tab to improve user understanding.                | Don’t overload the interface with too many tabs; keep it manageable, ideally with 4-6 tabs or fewer.   |
| Ensure a distinct visual indicator for the active tab, such as a color or underline. | Don’t rely solely on color to indicate the active tab; consider adding an underline for accessibility. |
| Keep tabs within the same content category or closely related topics.                | Don’t use tabs to display drastically different content types that may confuse users.                  |
| Place tabs at the top of the content section so they’re easily accessible.           | Don’t place tabs where users must scroll to see them; ensure they are visible without extra effort.    |


# Text Area Field

Text Area is a multi-line text input component used to capture long-form user input.

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FmQ5IAJ5x7mROhrbakTLA%2FText%20Area%20-%20Overview.png?alt=media&amp;token=576f712c-d327-4806-a6e7-8ccac5e19a7a" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Text area fields are used in forms and input scenarios where users need to provide larger amounts of text, such as comments, descriptions, or messages. They are ideal for situations requiring more space than a standard text field, enabling users to input detailed information.

### How it works

A text area field component typically includes a label, a multi-line input area, and optional elements like helper or placeholder text for user guidance. It can display different states, such as focused, filled, or error, indicating its current status. Text area fields are essential interactive elements in forms and interfaces where extensive user input is needed.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-textarea
    label="Description"
    placeholder="Enter description"
    max_characters="200"
    value=""
    input_id="input"
    textarea_name="textarea-name"
    aria_label="textarea"
    helper_text="This is a helper text"
    error_message=""
    show_info_icon="true"
    validation_type=""
    validation_id=""
    input_status=""
    enable_rich_editor="false"
    custom_class=""
    component_mode=""
    onchange=""
></dda-textarea>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaTextarea
    label="Description"
    placeholder="Enter description"
    max_characters="200"
    value=""
    input_id="input"
    textarea_name="textarea-name"
    aria_label="textarea"
    helper_text="This is a helper text"
    error_message=""
    show_info_icon="true"
    validation_type=""
    validation_id=""
    input_status=""
    enable_rich_editor="false"
    custom_class=""
    component_mode=""
    onchange=""
></DdaTextarea>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaTextarea
    label="Description"
    placeholder="Enter description"
    max_characters="200"
    value=""
    input_id="input"
    textarea_name="textarea-name"
    aria_label="textarea"
    helper_text="This is a helper text"
    error_message=""
    show_info_icon="true"
    validation_type=""
    validation_id=""
    input_status=""
    enable_rich_editor="false"
    custom_class=""
    component_mode=""
    onchange=""
></DdaTextarea>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-textarea
    label="Description"
    placeholder="Enter description"
    max_characters="200"
    value=""
    input_id="input"
    textarea_name="textarea-name"
    aria_label="textarea"
    helper_text="This is a helper text"
    error_message=""
    show_info_icon="true"
    validation_type=""
    validation_id=""
    input_status=""
    enable_rich_editor="false"
    custom_class=""
    component_mode=""
    onchange=""
></dda-textarea>
```

{% endtab %}
{% endtabs %}

### Properties

For version 3.12.0+ you can use the new unified [input interactions](/developers/input-interactions) to set/get data from the components.

| Property             | Description                                                                                                                                                                                                             | Type      |
| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
| `label`              | A string that sets the label text for the textarea or rich text editor. This is displayed above the input field to provide context or instructions.                                                                     | `string`  |
| `placeholder`        | A string that sets the placeholder text inside the textarea or rich text editor when it is empty.                                                                                                                       | `string`  |
| `max_characters`     | A number specifying the maximum allowed characters in the input field. This is used to restrict the user’s input and is displayed in the helper or error message.                                                       | `number`  |
| `value`              | The initial value of the textarea or rich text editor. It will bind to the content inside the input and can be used to set its initial state.                                                                           | `string`  |
| `input_id`           | A unique string identifier for the input field. This is used to link the label with the input and for accessibility purposes.                                                                                           | `string`  |
| `aria_label`         | An optional string that provides an accessible label for the input field, improving accessibility for screen readers. It helps users with visual impairments understand the purpose of the input field.                 | `string`  |
| `helper_text`        | A string providing additional guidance or information about the input field. It can be displayed below the input to assist the user.                                                                                    | `string`  |
| `error_message`      | A string containing an error message to be displayed when the input validation fails. This will appear below the input field when an error occurs.                                                                      | `string`  |
| show\_info\_icon     | Able to diable and enable info icon                                                                                                                                                                                     | `boolean` |
| `validation_type`    | An optional string that defines the type of validation applied to the input. It could affect the styling or behavior based on different validation scenarios.                                                           | `string`  |
| `component_mode`     | An optional string that can be used to apply a specific mode or variation of the component, such as a 'light' or 'dark' state, for customization.                                                                       | `string`  |
| `custom_class`       | A string that allows you to pass custom CSS classes to further customize the styling of the input container.                                                                                                            | `string`  |
| `enable_rich_editor` | A boolean value that determines whether to enable a rich text editor (using the Quill library). If `true`, the Quill editor is rendered; if `false`, a standard textarea is displayed.                                  | `boolean` |
| `input_status`       | A string that allows customization of the input’s visual appearance depending on its status (e.g., active, disabled, etc.). This is used for styling purposes.                                                          | `string`  |
| `validation_id`      | Defines the `id` of the element that displays validation or helper messages. This links the textarea to the message for improved accessibility using `aria-describedby`. Leave empty if no validation message is shown. | `string`  |

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FE6s6VT8Mkgyeu8bG6OTt%2FText%20Area%20-%20Anatomy.png?alt=media&amp;token=0f8fbd58-a2ce-4bcc-b129-cf30417a279c" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Label**: A title or descriptor for the input field, guiding users on what information to enter.

**Lead-Icon**: An optional icon that provides additional context or represents the type of input required.

**Placeholder**: Sample text displayed within the input field that hints at the expected input format or content.

**Caption**: Helper or footer text that offers further instructions or clarifications for the input.

**Trail-Text**: A counter or indicator often used to show the number of characters entered or remaining, providing feedback on input limits.

## Dos and Don'ts

| Dos                                                                                 | Don'ts                                                                                          |
| ----------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
| Use text area fields for inputs that require multiple lines of text.                | Don't use text area fields for short or single-line inputs; use standard text fields for those. |
| Provide a clear and concise label that describes the expected input.                | Avoid using ambiguous or unclear labels for text area fields.                                   |
| Include placeholder text to give users an example of the expected input format.     | Don't rely solely on placeholder text for essential instructions.                               |
| Ensure text area fields are large enough to be easily tappable or clickable.        | Avoid making text area fields too small to interact with comfortably.                           |
| Use helper text to provide additional context or instructions.                      | Don't overload the text area field with too much information.                                   |
| Validate input and provide clear error messages when necessary.                     | Don't provide generic error messages that don't help users understand the issue.                |
| Keep consistent styling and spacing across all text area fields in the application. | Don't use inconsistent styles that may confuse users.                                           |


# Text Field

Text Field allows users to input text into a UI. It is commonly used in forms and dialogs.

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2Fvo6XCHKuCezzMldija8c%2FText%20Field%20-%20Overview.png?alt=media&amp;token=f454201d-df09-4500-bb78-5655af6913bd" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Text fields are used in forms and input scenarios where users need to provide information such as names, addresses, passwords, or search queries. They are versatile and can be applied in various contexts, including modal windows, standalone forms, and inline editing.

### How it works

A text field component typically includes a label, an input area, and optional helper or placeholder text to guide the user. It can display different states—such as focused, filled, or error—to indicate its current status. Text fields are a core interactive element, designed to capture user input accurately and efficiently.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-input
    label="Text Input"
    placeholder="Enter text"
    type="text"
    input_id="input"
    value=""
    input_role=""
    input_name="input"
    aria_label="input"
    helper_text="Helper or footer text"
    error_message="Error text"
    validation_type="normal"
    validation_id="validationId"
    input_status="normal"
    size="default"
    custom_class=""
    component_mode=""
    inputchanged=""
    required="false"
></dda-input>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaInput
    label="Text Input"
    placeholder="Enter text"
    type="text"
    input_id="input"
    value=""
    input_role=""
    input_name="input"
    aria_label="input"
    helper_text="Helper or footer text"
    error_message="Error text"
    validation_type="normal"
    validation_id="validationId"
    input_status="normal"
    size="default"
    custom_class=""
    component_mode=""
    inputchanged=""
    required="false"
></DdaInput>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaInput
    label="Text Input"
    placeholder="Enter text"
    type="text"
    input_id="input"
    value=""
    input_role=""
    input_name="input"
    aria_label="input"
    helper_text="Helper or footer text"
    error_message="Error text"
    validation_type="normal"
    validation_id="validationId"
    input_status="normal"
    size="default"
    custom_class=""
    component_mode=""
    inputchanged=""
    required="false"
></DdaInput>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-input
    label="Text Input"
    placeholder="Enter text"
    type="text"
    input_id="input"
    value=""
    input_role=""
    input_name="input"
    aria_label="input"
    helper_text="Helper or footer text"
    error_message="Error text"
    validation_type="normal"
    validation_id="validationId"
    input_status="normal"
    size="default"
    custom_class=""
    component_mode=""
    inputchanged=""
    required="false"
></dda-input>
```

{% endtab %}
{% endtabs %}

### Properties

For version 3.12.0+ you can use the new unified [input interactions](/developers/input-interactions) to set/get data from the components.

| Property          | Description                                                                                                                                                                                           | Type     |
| ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| `label`           | The label text displayed for the input field. It helps users understand the purpose of the input.                                                                                                     | `string` |
| `placeholder`     | The placeholder text that appears in the input field when it is empty. This provides a hint for what type of input is expected.                                                                       | `string` |
| `type`            | Specifies the type of input, such as `'text'`, `'password'`, `'email'`,  `'number'`  , `'time'` ,  `'date'` , `'Witherror'` , `'disabled'` . It determines the input field's behavior and appearance. | `string` |
| `input_id`        | The unique identifier for the input field. It is used for associating the label with the input and can also be used for targeting the field programmatically.                                         | `string` |
| `value`           | The current value of the input field. It represents what the user has entered or is displayed in the field.                                                                                           | `string` |
| `aria_label`      | The ARIA label for accessibility. It provides a textual description of the input field for screen readers to improve accessibility for users with disabilities.                                       | `string` |
| `helper_text`     | Additional text that can be shown below the input field, often used to provide helpful information or guidance to the user.                                                                           | `string` |
| `error_message`   | The message displayed when the input has a validation error, informing the user what went wrong.                                                                                                      | `string` |
| `validation_type` | Defines the type of validation applied to the input field (e.g., 'required', 'email', 'minLength', etc.). It is used to determine the visual style or validation behavior.                            | `string` |
| `size`            | Specifies the size of the input field, typically values like `'small'`, `'medium'`, or `'large'`. This adjusts the width or height of the input to fit the design.                                    | `string` |
| `input_status`    | Indicates the status of the input field, such as `'valid'`, `'invalid'`, `'disabled'`, etc., which affects the field's styling or interaction.                                                        | `string` |
| `component_mode`  | Defines the mode in which the component should behave (e.g., `'edit'`, `'view'`). This can be used for switching between different states or appearances.                                             | `string` |
| `custom_class`    | A custom CSS class that can be applied to the input container for further customization of the component's styling.                                                                                   | `string` |

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FRrVTWRjZD3UhEIfJU5PU%2FText%20Field%20-%20Anatomy.png?alt=media&amp;token=c0c73121-f4f0-4d15-9d58-a1c0c9943a41" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Label**: The descriptive text indicating the purpose of the input field.

**Placeholder**: Temporary text within the input field that gives a hint about the expected input format or content.

**Lead-Icon**: An optional icon before the input field that provides additional context or helps identify the type of input.

**Caption**: Additional helper or instructional text below the input field to guide the user.

**Trail-Text**: Text at the end of the input field that often shows a character count, limit, or related information.

## Dos and Don'ts

<table><thead><tr><th width="372">Dos</th><th>Don'ts</th></tr></thead><tbody><tr><td>Use clear and concise labels that describe the expected input.</td><td>Don't use ambiguous or unclear labels.</td></tr><tr><td>Provide placeholder text to give users an example of the expected input format.</td><td>Don't rely solely on placeholder text for essential instructions.</td></tr><tr><td>Ensure text fields are large enough to be easily tappable or clickable.</td><td>Avoid making text fields too small to interact with comfortably.</td></tr><tr><td>Use helper text to provide additional context or instructions.</td><td>Don't overload the text field with too much information.</td></tr><tr><td>Ensure text fields have a visible focus state to aid keyboard navigation.</td><td>Don't ignore accessibility requirements, such as contrast and focus indicators.</td></tr><tr><td>Validate input and provide clear error messages when necessary.</td><td>Don't provide generic error messages that don't help users understand the issue.</td></tr><tr><td>Keep consistent styling and spacing across all text fields in the application.</td><td>Don't use inconsistent styles that may confuse users.</td></tr></tbody></table>

## Options

#### Types

**Label:** Indicates whether the text field should have a visible label. Labels help users understand what information is expected.

**Value:** The actual text input by the user or the default value displayed in the text field.

**Placeholder:** Text displayed inside the text field when it is empty, providing a hint to the user about the expected input.

**HelperText:** Additional text that provides more information or instructions about the text field.

#### States

**Unfilled:** Default state when the text field is empty and not focused.

**Focused-Filled:** State when the text field is filled and focused.

**Filled:** State when the text field is filled but not focused.

**Error:** State indicating that there is an error with the input.

**Disabled:** State indicating that the text field is not interactive.

**Focused-Unfilled:** State when the text field is empty but focused.

#### Sizes

**Default:** Standard size for most use cases.

**Small:** Smaller variant for compact spaces or less prominent input fields.

#### Background

**No:** Default state with no background.

**Yes:** Background enabled for additional emphasis or aesthetic purposes.


# Toggle Switch

Toggle Switch is used to turn a setting on or off. It provides a clear visual indication of the current state.

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FiUFy95wYxzM0L88KU156%2FToggles%202%20-%20Overview.png?alt=media&amp;token=b004e368-c83e-42ad-8591-18c0b01b5d71" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Toggle switches are used when users need to make a binary choice, such as turning a feature on or off. They are ideal for settings where changes take immediate effect without requiring additional actions, like a submit button. Common use cases include enabling or disabling notifications, switching between dark and light modes, or toggling application modes.

### How it works

A toggle switch is visualized as a sliding switch that moves between two states, usually labeled "on" and "off." The switch’s position clearly indicates the current state. Toggle switches may also include optional elements like subtitles or icons to add context or functionality, enhancing user understanding of the toggle’s purpose.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-toggle
    checked="false"
    label_on="On"
    label_off="Off"
    size="md"
    group_name="togglegroup1"
    input_id="testId"
    custom_class=""
    component_mode=""
    aria_label="toggle"
    onchange="console.log('changed')"
></dda-toggle>
```

{% endtab %}

{% tab title="React" %}

```jsx
    <DdaToggle
            checked="false"
            label_on="On"
            label_off="Off"
            size="md"
            group_name="togglegroup1"
            input_id="testId"
            custom_class=""
            component_mode=""
            aria_label="toggle"
            onchange="console.log('changed')"
        ></DdaToggle>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
   <DdaToggle
            checked="false"
            label_on="On"
            label_off="Off"
            size="md"
            group_name="togglegroup1"
            input_id="testId"
            custom_class=""
            component_mode=""
            aria_label="toggle"
            onchange="console.log('changed')"
        ></DdaToggle>
```

{% endtab %}

{% tab title="Angular" %}

````jsx
<dda-toggle
    checked="false"
    label_on="On"
    label_off="Off"
    size="md"
    group_name="togglegroup1"
    input_id="testId"
    custom_class=""
    component_mode=""
    aria_label="toggle"
    onchange="console.log('changed')"
></dda-toggle>```
````

{% endtab %}
{% endtabs %}

### Properties

| Property         | Description                                                                                                                          | Type      |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------ | --------- |
| `aria_label`     | Defines an accessible label for screen readers, providing additional context for users with assistive technologies.                  | `string`  |
| `checked`        | Determines whether the toggle switch is initially checked (on) or not (off).                                                         | `boolean` |
| `component_mode` | A mode or variant setting that might be used to apply different styles or behaviors based on predefined themes or configurations.    | `string`  |
| `custom_class`   | Allows adding custom CSS classes to modify the appearance of the toggle. Defaults to an empty string.                                | `string`  |
| `group_name`     | Specifies the name attribute for the input, which is useful when grouping multiple toggle buttons together (e.g., in a radio group). | `string`  |
| `input_id`       | Sets the `id` attribute for the input element, allowing it to be uniquely identified in the DOM.                                     | `string`  |
| `size`           | Defines the size of the toggle switch. Possible values could be `'sm'`, `'md'`, or `'lg'`.                                           | `string`  |

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FWfFnbHB4qf4LRS0w26Mb%2FToggles%202%20-%20Anatomy.png?alt=media&amp;token=1f040cb4-a9cd-49fb-ae0a-4ea85ce3b2c5" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Toggle Switch**: The main component that allows users to switch between two states.

**Knob**: The circular element that moves to indicate the toggle state.

**Toggle Label**: The primary label that describes the purpose of the toggle.

**Subtitle**: Additional information or description to clarify the function of the toggle.

## Dos and Don'ts

| Dos                                                                         | Don'ts                                                                                       |
| --------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
| Use toggle switches for settings that can be turned on or off.              | Don't use toggle switches for actions that require multiple steps or confirmation.           |
| Label each toggle switch clearly to indicate its function.                  | Avoid using ambiguous or unclear labels for toggle switches.                                 |
| Ensure toggle switches are large enough to be easily tappable or clickable. | Don't make toggle switches too small to interact with comfortably.                           |
| Provide a clear visual indication of the toggle switch's state.             | Don't leave users guessing whether a feature is enabled or disabled.                         |
| Group related toggle switches together visually and logically.              | Don't scatter related toggle switches throughout different parts of the UI.                  |
| Use consistent spacing between toggle switches in the same group.           | Don't place toggle switches too close together or too far apart, which can hinder usability. |
| Include appropriate aria-labels for accessibility.                          | Don't neglect accessibility requirements such as focus states and keyboard navigation.       |
| Ensure each toggle switch has sufficient contrast against its background.   | Avoid using low contrast that can make the toggle switches difficult to see.                 |


# Tooltip

Tooltips are used to provide additional information when users hover over, focus on, or tap an element.

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FAKaqZ54JBB4SlTHTCjIl%2FTooltip%20-%20Overview.png?alt=media&amp;token=78f39221-2861-4b65-81c0-104f939fcdd7" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Tooltips are used to provide contextual information or explanations about an element when users interact with it. They are ideal for offering hints, definitions, or additional details that may not be immediately visible, enhancing the user experience by providing on-demand assistance without adding clutter to the interface.

### How it works

A tooltip component appears as a small box with text when a user hovers over, focuses on, or taps an element. It typically displays a brief description or hint related to the element. Tooltips can be positioned in various directions relative to the element and may include headers for structured information when needed.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-tooltip
    title_text="Tooltip"
    description="This is a tooltip description."
    position="top"
    custom_class=""
    component_mode=""
    >
    <button>Hover me</button>
</dda-tooltip>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaTooltip
    title_text="Tooltip"
    description="This is a tooltip description."
    position="top"
    custom_class=""
    component_mode=""
    >
    <button>Hover me</button>
</DdaTooltip>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaTooltip
    title_text="Tooltip"
    description="This is a tooltip description."
    position="top"
    custom_class=""
    component_mode=""
    >
    <button>Hover me</button>
</DdaTooltip>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-tooltip
    title_text="Tooltip"
    description="This is a tooltip description."
    position="top"
    custom_class=""
    component_mode=""
    >
    <button>Hover me</button>
</dda-tooltip>
```

{% endtab %}
{% endtabs %}

### Properties

| Property         | Description                                                                                                                                                                                                                                                                                                                                                                                 | Type                                     |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- |
| `component_mode` | Can be used to apply specific styles or behavior to the tooltip based on different UI modes. Example: Light mode, dark mode, or any other custom mode that affects appearance.                                                                                                                                                                                                              | `string`                                 |
| `custom_class`   | Allows adding a custom CSS class to the tooltip container for additional styling.                                                                                                                                                                                                                                                                                                           | `string`                                 |
| `description`    | A brief explanatory text shown inside the tooltip along with the title.                                                                                                                                                                                                                                                                                                                     | `string`                                 |
| `position`       | <p></p><p>Determines where the tooltip appears relative to the element it is attached to.</p><ul><li><code>'top'</code>: Tooltip appears above the element.</li><li><code>'bottom'</code>: Tooltip appears below the element.</li><li><code>'left'</code>: Tooltip appears to the left of the element.</li><li><code>'right'</code>: Tooltip appears to the right of the element.</li></ul> | `"bottom" \| "left" \| "right" \| "top"` |
| `title_text`     | The title of the tooltip that appears when the user hovers over the component. It is displayed in bold.                                                                                                                                                                                                                                                                                     | `string`                                 |

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FPaUVDPWEe9SEVQitvOJA%2FTooltip%20-%20Anatomy.png?alt=media&amp;token=84864d48-3e64-47e4-b9e9-0ce9cf1ef264" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Label**: The text or content inside the tooltip that provides information or guidance to the user.

**Container**: The box that surrounds the label, giving it a distinct background to stand out from the rest of the interface.

**Pointer**: A small triangular element that visually links the tooltip container to the element it describes or provides context for.

## Dos and Don'ts

| Dos                                                              | Don'ts                                                                              |
| ---------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
| Use tooltips to provide additional information or context.       | Don't use tooltips for essential information that must always be visible.           |
| Keep tooltip text concise and to the point.                      | Avoid long paragraphs or overly detailed information in tooltips.                   |
| Ensure tooltips are easily visible and readable.                 | Don't place tooltips in positions where they might be obscured or difficult to see. |
| Use consistent styling for all tooltips in the application.      | Don't use inconsistent styles that may confuse users.                               |
| Provide clear visual indicators for elements that have tooltips. | Don't leave users guessing whether an element has a tooltip or not.                 |
| Ensure tooltips are accessible via keyboard navigation.          | Don't make tooltips accessible only via mouse interactions.                         |


# 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

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<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>
```

{% endtab %}

{% tab title="React" %}

```jsx
 <DdaFooter
    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"
  />
```

{% endtab %}

{% tab title="Vue" %}

```jsx
     <DdaFooter
    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"
></DdaFooter>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<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>
```

{% endtab %}
{% endtabs %}

### Properties

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

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2F7FzYYxKBY3lmjM0AfmTP%2FHeader%20-%20Anatomy.png?alt=media&amp;token=a6831339-bae2-41d8-a87d-8f96ac2e2ce4" alt=""><figcaption></figcaption></figure>

**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.                                |


# Service Payment Footer

The service footer streamlines transactions with payment details, security prompts, and actions, ensuring trust and usability.

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2F3qg6bm4bL1ngehLr8EWu%2F2.png?alt=media&amp;token=e3d80479-0898-429b-85f1-d191fb145718" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

The service payment footer should be included on all payment-related pages to provide users with essential transaction details, security confirmations, and necessary actions. It ensures a smooth and trustworthy payment experience by displaying relevant information such as accepted payment methods, terms of service, and security notices.

### How it works

The service payment footer is designed to enhance security, clarity, and ease of use during transactions. It includes **informational links** to terms of service, privacy policies, and support resources, ensuring transparency. **Interactive elements** such as tooltips provide additional security explanations, while icons indicate accepted payment methods and authentication options. **Action controls** guide users through the final steps, allowing them to confirm details, proceed with payments, or navigate securely. This structured approach reinforces trust and ensures a seamless transaction experience.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<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>
```

{% endtab %}

{% tab title="React" %}

```jsx
 <DdaFooter
    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"
  />
```

{% endtab %}

{% tab title="Vue" %}

```jsx
     <DdaFooter
    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"
></DdaFooter>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<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>
```

{% endtab %}
{% endtabs %}

### Properties

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

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FjhDGfxjQGWxqPKWBm5nI%2F2.2.png?alt=media&amp;token=b2e000d2-3326-4239-821a-0a882b6d8929" alt=""><figcaption></figcaption></figure>

**Information Icon:** A small icon providing additional details or security notices related to the transaction.

**Consent Text:** Displays a message informing users that proceeding confirms their agreement to share the provided information.

**Card Type Icon:** Represents the selected payment method (e.g., Mastercard) for quick recognition.

**Masked Card Number:** Shows only the last four digits of the card number for security while maintaining user identification.

**Dropdown Arrow:** Allows users to expand or change their payment method if multiple options are available.

**CCV Input Field:** A designated input box for entering the card’s security code (CCV) to verify the transaction.

**Tertiary Button:** A low-emphasis button, typically for optional or less critical actions.

**Secondary Button:** A medium-emphasis button, offering an alternative action that is not the primary focus.

**Primary Button:** A high-emphasis, visually distinct button guiding users to complete the payment or proceed to the next step.

## Responsive Behavior

The header component turns to mobile view @ the 1024 breakpoint

***

## Dos and Don'ts

| Dos                                                                                     | Don'ts                                                                                         |
| --------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
| Use clear and concise consent text to inform users about sharing their payment details. | Don’t use vague or misleading consent text that may confuse users.                             |
| Display card type icons to help users quickly identify their selected payment method.   | Don’t use low-resolution or unclear card icons that make identification difficult.             |
| Mask card numbers, showing only the last four digits for security.                      | Don’t display the full card number or sensitive information in the footer.                     |
| Include tooltips to provide additional security explanations or contextual information. | Don’t overload the footer with unnecessary text, making it cluttered.                          |
| Use a structured button hierarchy with clear primary, secondary, and tertiary actions.  | Don’t use identical styling for all buttons, as it can confuse users about the primary action. |
| Ensure the CCV input field is clearly labeled and positioned for ease of use.           | Don’t place the CCV field in an unclear location that disrupts the flow of the transaction.    |
| Maintain proper spacing and alignment for a clean, user-friendly layout.                | Don’t overcrowd the footer with too many elements, reducing readability and usability.         |


# Website Footer

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

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FfNzVnC71ZKmadtjhCUtq%2F1.png?alt=media&amp;token=5896de71-754b-4e9e-8e06-965504e156f8" alt=""><figcaption></figcaption></figure>

## 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
<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>
```

{% endtab %}

{% tab title="React" %}

```jsx
 <DdaFooter
    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"
  />
```

{% endtab %}

{% tab title="Vue" %}

```jsx
     <DdaFooter
    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"
></DdaFooter>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<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>
```

{% endtab %}
{% endtabs %}

### Properties

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

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FioxJhFGR5hZmcsQtlF17%2FWebsite%20Footer%20-%20Anatomy.png?alt=media&amp;token=ae7c4680-d1b8-4249-9adb-9a6bb2f853f8" alt=""><figcaption></figcaption></figure>

**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.                         |