Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Accordions are used to organize content into collapsible sections, allowing users to expand and collapse sections as needed.
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.
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.
To ensure prop types and descriptions are viewable on hover:
Make sure you are using TypeScript for prop declarations in Stencil components.
Enable TypeScript IntelliSense by verifying that TypeScript > Hover is turned on in VS Code settings..
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.
@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)
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.
<html lang="ar" dir="rtl">
<body>
<dda-button></dda-button>
</body>
</html> <div dir="rtl">
<DdaButton />
</div><template>
<div dir="rtl">
<DdaButton />
</div>
</template><div dir="rtl">
<dda-button></dda-button>
</div>Buttons are fundamental interactive elements used in user interfaces to trigger actions, submit forms, and navigate through different parts of an application
Radio buttons let users select one option from a group of exclusive choices, ensuring a clear and simple decision-making process in forms.
Checkbox components are versatile interactive elements used in user interfaces to enable users to make single or multiple selections.
Segmentation in user interfaces categorizes content and controls into distinct groups, enhancing navigation and usability through clear, manageable selections.
Step indicators are used to show users their current position within a sequence of steps.
This is a step-by-step guide to use the DDA components in Angular.
First, install the package @dubai-design-system/components-angular
npm i @dubai-design-system/components-angularFor Versions 3.11.0+, add CSS reference as below:
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
Import and add the following to your app.module.ts file
You should now be able to use DDA components inside your app.component.html file:
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.
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.
<html data-theme="dark">
<body>
<dda-button></dda-button>
</body>
</html> <div data-theme="dark">
<DdaButton />
</div><template>
<div data-theme="dark">
<DdaButton />
</div>
</template><div data-theme="dark">
<dda-button></dda-button>
</div>Progress Indicators visually display the completion status of a task or process, helping users understand how much has been completed and how much remains.
"styles": [
"node_modules/@dubai-design-system/components-js/dist/dda/dda.css"
]<style>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</style>body{
font-family: "your_font_family"
}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
In your main.js file, import your component library plugin and use it:
npm i @dubai-design-system/components-vueimport '@dubai-design-system/components-js/dist/dda/dda.css';<style>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</style>For Versions older the 3.11.0
First, import the package script and 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
You should now be able to use DDA components:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@dubai-design-system/components-js@latest/dist/dda/dda.css" />
<script type="module">
import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/@dubai-design-system/components-js@latest/loader/index.js';
defineCustomElements();
</script><script type="module">
import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/@dubai-design-system/components-js@latest/loader/index.js';
defineCustomElements();
</script><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">import { ComponentLibraryModule } from '@dubai-design-system/components-angular';
@NgModule({
imports: [ComponentLibraryModule],
})
export class AppModule {}<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><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><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>
/*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;
Our component library supports SPAs and routers, to use your router instead of regular href based redirection you can use combination of below properties.
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.
This is a step-by-step guide to use the DDA components in React.
First, install the package @dubai-design-system/componts-react
npm i @dubai-design-system/components-reactFor Versions 3.11.0+, add CSS reference as below:
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
You should now be able to use DDA components:
Progress circle are used to visually represent the completion status of a task or process in a circular format.
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.
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.
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.
Expectation Levels Progress Bar visually represents stages of achievement or quality standards, helping users track their progress toward meeting defined goals.
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.
// Sample Use in dda-header
<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"
......
/>
<script>
const ddaHeader = document.querySelector("dda-header");
ddaHeader.addEventListener("navigatorClick", (event) => {
alert("Event Listener Triggered");
console.log(event.detail)
});
</script>
import '@dubai-design-system/components-js/dist/dda/dda.css';<style>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</style>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;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.
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.
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
Defines the appearance of breadcrumb items.
'text': Displays only text.
'icon-text': Displays both an icon and text.
'icon'
"icon" | "icon-text" | "text"
separator
Determines the icon used as the separator between breadcrumb items.
"chevron_right" | "pen_size_2"
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.
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.
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.
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.
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.
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.
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.
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.
Refer to header component.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Always follow and use the latest published version when installing the package.
2.2
16 Jul 2025
New Components
New Variants Components
Developers Updates
2.1
4 Jun 2025
New Components
New Variants Components
2.0.0
2 May 2025
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:
Cards: Event Card, Group Card, Pricing Card, Team Member Card, Team Section Card, Video Card.
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.
Updated packages have been published — you can download them from the Downloads section.
Cards: Event Card, Group Card, Pricing Card, Team Member Card, Team Section Card, Video Card.
RTL Support, Alert, Button, Icon Button, Link Button, Checkbox, Checkbox Groups, Radio Inputs, Search Input Field, Sticky Bar, Tabs, Text Field.
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:
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.
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.
We’re excited to introduce a range of enhancements across components and foundational elements. Below are the detailed updates, including improvements to integration properties.
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.
Updated spacing tokens in Figma.
Social Media: Updated the Twitter icon.
Sticky Bar: The large breakpoint is fixed in the figma file.
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.
Cards: Basic card component is now available.
Banner Slider: Introduced for use on the homepage.
Sub Menu: Opens last dropdown from main navigation.
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.
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.
New usability guidelines have been introduced under the "Foundations" section, focusing on enhancing digital city experiences.
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.
We've provided detailed guidelines on how to effectively set up typography and colors within Figma.
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.
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.
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.
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.
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.
The design system is accessible to all entities as a downloadable file, which can be requested via email at [email protected]. GitBook provides comprehensive documentation detailing the usage, anatomy, and dos and don'ts of each component.
<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><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> <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><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>Typography
Design Updates
Developers Updates
1.1.0
28 Mar 2025
Usability Guidelines
Breakpoints Update
Typography and Colors Figma Guidelines
Component Enhancements
New Variants Components
New Components
1.0.1
21 Feb 2025
Added descriptions to component props for developers
1.0.0
15 Nov 2024
Design System (Phase 3)
navigation/custom router
To add custom router you can use the useNavigator as "true" and use the event listener for navigatorClick Click here for More details
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.
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.
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.
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
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.
Example: '["Home", "fohouse", "Settings"]'
string
radius_type
Determines the border radius styling of the segmented tabs group. Applied as a CSS class to the container element.
Example: 'rounded' or 'square'
string
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.
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.
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
Entities should choose images that align with their purpose or mission, reinforcing the brand’s relevance and message.
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.
Focus on images of Dubai’s infrastructure, like Sheikh Zayed Road, metro stations, or buses, to convey efficient transport options and promote public transportation.
Use images of health facilities, medical staff, and community wellness, such as hospitals, clinics, or preventative health services, to emphasize Dubai’s healthcare standards.
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.
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.
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."
Avoid using images as the only means to convey essential information; add text-based explanations as support to assist visually impaired users.
Ensure images scale appropriately across devices without losing quality. They should not become pixelated or distorted when zoomed or resized.
For images with text, maintain sufficient contrast between text and background, meeting minimum accessibility standards, such as a 4.5:1 contrast ratio.
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.
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.
Banner cards use interactive and clickable features to engage users, enhancing the presentation of content effectively.
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.
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.
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.
Step indicators are used to show users their current position within a sequence of steps.
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.
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.
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.
A Timeline is a navigation component that guides users through sequential steps in a process, displaying progress and providing clear direction across tasks.
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.
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.
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.
Credit card visualizations are used to display key information about a credit card in a visually appealing format.
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.
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.
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.
Progress bars are used to visually indicate the progression of a task or process.
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.
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.
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.
Tooltips are used to provide additional information when users hover over, focus on, or tap an element.
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.
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.
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.
<dda-segmented-tabs
radius_type="square"
custom_class=""
component_mode=""
button_name="button"
items='["All","Recent","Saved"]'
></dda-segmented-tabs><DdaSegmentedTabs
radius_type="square"
custom_class=""
component_mode=""
button_name="button"
items='["All","Recent","Saved"]'
></DdaSegmentedTabs><DdaSegmentedTabs
radius_type="square"
custom_class=""
component_mode=""
button_name="button"
items='["All","Recent","Saved"]'
></DdaSegmentedTabs><dda-segmented-tabs
radius_type="square"
custom_class=""
component_mode=""
button_name="button"
items='["All","Recent","Saved"]'
></dda-segmented-tabs><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><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><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><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><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><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><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><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><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><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><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><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>Product Image:
Image Description: A photo of a red running shoe with white soles.
Good Alt Text: "Red running shoe with white soles."
Why: Descriptive enough to inform the user about the product, including key details.
Bad Alt Text: "Shoe" or "Image of a product."
Why: Too vague; does not provide enough detail for users to understand what the product is.
Button Icon:
Image Description: A magnifying glass icon that opens a search field.
Good Alt Text: "Search"
Why: It conveys the function of the icon (initiating a search) rather than describing the image itself.
Bad Alt Text: "Magnifying glass icon"
Why: This does not describe the action or purpose, making it harder for users to know what it does.
Decorative Image:
Image Description: A decorative flourish or pattern used to separate sections of a webpage.
Good Alt Text: alt="" (empty alt attribute)
Why: Since the image is decorative, it does not add meaningful content, so screen readers should skip it.
Bad Alt Text: "Decorative line to separate sections."
Why: This is unnecessary information, adding clutter for screen reader users.
buttons_name
Name attribute for the segment buttons
string
custom_class
Additional CSS class(es) for custom styling
string
component_mode
Mode or state of the component (if any)
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
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
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
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.
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.
custom_class
Allows users to apply additional custom CSS classes to the component.
string
design
Specifies the design theme of the card, used for adding specific styling classes.
string
name
Displays the cardholder's name.
Example: "John Doe"
string
balance
Represents the current balance displayed on the credit card.
Example: "AED 50,000" or "$200.00"
string
card_number
The full card number, but only the last four digits are displayed for security.
Example: "1234567812345678" (will display as **** 5678)
string
card_type
A URL or path to the card type icon/image (e.g., Visa, MasterCard, etc.).
Example: "/assets/icons/visa.png"
string
component_mode
Represents different modes/styles of the component, possibly controlled dynamically.
string
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.
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"
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
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.
title_text
The title of the tooltip that appears when the user hovers over the component. It is displayed in bold.
string
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
Determines where the tooltip appears relative to the element it is attached to.
'top': Tooltip appears above the element.
'bottom': Tooltip appears below the element.
'left': Tooltip appears to the left of the element.
'right': Tooltip appears to the right of the element.
"bottom" | "left" | "right" | "top"
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.
<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><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><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><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><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><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><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> <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><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> <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> <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><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><dda-progressbar
progress="20"
tooltip="false"
tooltip_position="top"
show_percentage_text="false"
custom_class=""
component_mode=""
></dda-progressbar> <DdaProgressbar
progress="20"
tooltip="false"
tooltip_position="top"
show_percentage_text="false"
custom_class=""
component_mode=""
></DdaProgressbar> <DdaProgressbar
progress="20"
tooltip="false"
tooltip_position="top"
show_percentage_text="false"
custom_class=""
component_mode=""
></DdaProgressbar><dda-progressbar
progress="20"
tooltip="false"
tooltip_position="top"
show_percentage_text="false"
custom_class=""
component_mode=""
></dda-progressbar><dda-tooltip
title_text="Tooltip"
description="This is a tooltip description."
position="top"
custom_class=""
component_mode=""
>
<button>Hover me</button>
</dda-tooltip><DdaTooltip
title_text="Tooltip"
description="This is a tooltip description."
position="top"
custom_class=""
component_mode=""
>
<button>Hover me</button>
</DdaTooltip><DdaTooltip
title_text="Tooltip"
description="This is a tooltip description."
position="top"
custom_class=""
component_mode=""
>
<button>Hover me</button>
</DdaTooltip><dda-tooltip
title_text="Tooltip"
description="This is a tooltip description."
position="top"
custom_class=""
component_mode=""
>
<button>Hover me</button>
</dda-tooltip>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.
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.
design
Determines the visual style of the accordion.
'bg-border' (default): Displays the accordion with a background and border.
'no-border': Displays the accordion without a background or border.
"bg-border" | "no-border"
accordion_icon_class
CSS classes used for the accordion icon (e.g., Material Icons classes).
string
accordion_icon_text
The icon name or text to be displayed inside the icon element.
string
accordion_id
Unique identifier for the accordion, useful for targeting or toggling.
string
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.
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.
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.
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.
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
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.
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.
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.
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.
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.
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.
This method returns the selected/entered value. The method returns the selected/entered value.
Method()
This is an event emitted every time there is a change in current value of the component. In the event.detail you will find the selected/entered value.
Event Listener
This is an event emitted every time the component loses focus. In the event.detail you will find the selected/entered value.
Event Listener
This is the default event that is fired once the value of the element is changed. You will receive the event as a value.
Event Listener
This is the default event that is fired once any key is pressed on the element in focus. You will receive the event as a value.
This method sets the selected/entered value.
Method()
This is an event emitted every time there is a change in current value of the component. In the event.detail you will find the selected/entered value.
Event Listener
This is an event emitted every time the component loses focus. In the event.detail you will find the selected/entered value.
Event Listener
app.component.ts
app.component.html
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.
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.
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
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.
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.
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.
Attach file fields are used to allow users to upload files from their device.
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.
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.
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.
Alert banners are used to convey important information or warnings to users.
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.
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.
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.
Event cards provide a compact, visually engaging way to display key details about upcoming events, enabling quick discovery, interaction, and navigation.
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.
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.
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.
Checkboxes allow users to select multiple options from a set of predefined options.
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.
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.
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.
Interactive banners use dynamic elements like animations and clickable features to capture attention and encourage actions, enhancing the user experience with flexible content presentation.
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.
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.
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-*)
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.
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: Section 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.
Chips are small, interactive components used to display information, filter content, or trigger actions.
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.
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.
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.
<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><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><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><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><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><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><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><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><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><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><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><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>import { useState } from "react";
// Import the component
import { DdaTextarea } from "@dubai-design-system/components-react";
function App() {
const [text, setText] = useState("");
return (
<>
<DdaTextarea
onInput={(event) => {
console.log(event.currentTarget.getValue());
setText(event.currentTarget.getValue());
}}
/>
<p>{text}</p>
</>
)
}
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;
}
}<dda-textarea (input)="handleInput($event)"></dda-textarea>
<p>{{ text }}</p><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>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;
<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> <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> <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><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>```<dda-horizontal-stepper
steps='[{"title":"Step 1","subtitle":"Subtitle 1","description":"Lorem Ipsum is simply dummy text of the printing and typesetting industry."},{"title":"Step 2","subtitle":"Subtitle 2","description":"Lorem Ipsum is simply dummy text of the printing and typesetting industry."},{"title":"Step 3","subtitle":"Subtitle 3","description":"Lorem Ipsum is simply dummy text of the printing and typesetting industry."}]'
current_step="1"
custom_class=''
mode='light'
></dda-horizontal-stepper> <DdaHorizontalStepper
steps='[{"title":"Step 1","subtitle":"Subtitle 1","description":"Lorem Ipsum is simply dummy text of the printing and typesetting industry."},{"title":"Step 2","subtitle":"Subtitle 2","description":"Lorem Ipsum is simply dummy text of the printing and typesetting industry."},{"title":"Step 3","subtitle":"Subtitle 3","description":"Lorem Ipsum is simply dummy text of the printing and typesetting industry."}]'
current_step="1"
custom_class='""'
mode='"light"'
></DdaHorizontalStepper>
<DdaHorizontalStepper
steps='[{"title":"Step 1","subtitle":"Subtitle 1","description":"Lorem Ipsum is simply dummy text of the printing and typesetting industry."},{"title":"Step 2","subtitle":"Subtitle 2","description":"Lorem Ipsum is simply dummy text of the printing and typesetting industry."},{"title":"Step 3","subtitle":"Subtitle 3","description":"Lorem Ipsum is simply dummy text of the printing and typesetting industry."}]'
current_step="1"
custom_class='""'
mode='"light"'
></DdaHorizontalStepper>
<dda-horizontal-stepper
steps='[{"title":"Step 1","subtitle":"Subtitle 1","description":"Lorem Ipsum is simply dummy text of the printing and typesetting industry."},{"title":"Step 2","subtitle":"Subtitle 2","description":"Lorem Ipsum is simply dummy text of the printing and typesetting industry."},{"title":"Step 3","subtitle":"Subtitle 3","description":"Lorem Ipsum is simply dummy text of the printing and typesetting industry."}]'
current_step="1"
custom_class='""'
mode='"light"'
></dda-horizontal-stepper>
header_text
The text displayed in the accordion header. Defaults to 'Accordion Header'.
string
sub_title
Optional subtitle displayed under the header.
string
body_description
The text content inside the accordion body. Defaults to 'This is the accordion body content.'.
string
link_button_text
Text for a button shown in the accordion (usually within the body).
string
custom_class
Allows the user to pass additional CSS classes to customize the accordion's appearance. Defaults to an empty string.
string
component_mode
Provides an optional mode for additional customization (e.g., dark mode or variant styles).
string
component_mode
Defines a special mode (dark, light).
string
default_open
If set to "true", the accordion is expanded/open by default.
boolean
accordion_header_end_icon
Icon name to be displayed at the end of the accordion header (e.g., "info").
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
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.
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
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.
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
Don't use inconsistent styles that may confuse users.
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
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.
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
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.
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
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.
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
A JSON-formatted array of chip objects. Each chip typically displays event-related metadata such as time, date, or location.
Example: [{ "chip_text": "11:49" }, { "chip_text": "29.20.2023" }]
string
data-avatar-list
A JSON-formatted array of avatar objects, typically used to show associated team members or speakers.
string
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
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_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
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.
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
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.
Custom buttons via <dda-button>
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.
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
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
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.
<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><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><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><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><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><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><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><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><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><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><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><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><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><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><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><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><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><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><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><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><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>
<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><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><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><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"
rounded="circle"
custom_class=""
component_mode=""
onclick="console.log('clicked')"
>
</dda-chip>getValueonChangedonBlurredinputkeydownsetValueonChangedonBlurredAvatars 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.
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.
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"
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.
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.
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.
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.
text_button_type
Specifies the button type. Common values: "button", "submit", "reset".
string
button_color
Defines the button color variant. Example values: 'default-primary' , 'default-secondary' , 'default-tertiary' , 'default-link' , 'error-primary' , 'error-secondary' , 'error-tertiary' , 'error-link' ,
'onsurface-primary' , 'onsurface-secondary' , 'onsurface-tertiary' , 'onsurface-link' ,
'secondary'
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
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.
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.
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.
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.
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
body_text
Detailed description or content about the offering.
string
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.
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.
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.
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.
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
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.
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.
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.
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.
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
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.
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.
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.
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.
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
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.
Use sliders for selecting values within a range.
Don't use sliders for selecting discrete, non-sequential values.
Label the slider clearly to indicate its purpose.
Avoid using ambiguous or unclear labels for sliders.
Ensure the slider is large enough to be easily draggable.
Don't make the slider handle too small to interact with comfortably.
Provide visual feedback to indicate the selected value.
Don't leave users guessing about the current value.
Use consistent styling and spacing across all sliders in the application.
Don't use inconsistent styles that may confuse users.
Update the slider in real-time as the handle is dragged.
Don't use sliders if you cannot provide real-time updates.
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.
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.
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
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.
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.
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") .
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.
button_type
Specifies the button type. Common values: "button", "submit", "reset".
string
button_color
Defines the button color variant. Example values: 'default-primary' , 'default-secondary' , 'default-tertiary' , 'default-link' , 'error-primary' , 'error-secondary' , 'error-tertiary' , 'error-link' ,
'onsurface-primary' , 'onsurface-secondary' , 'onsurface-tertiary' , 'onsurface-link' ,
'secondary'
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
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
Text Area is a multi-line text input component used to capture long-form user input.
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.
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.
For version 3.12.0+ you can use the new unified to set/get data from the components.
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.
Text button is used to initiate actions on a page or form.
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.
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.
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.
<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><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><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><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><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><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><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><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><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><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><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><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><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><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><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><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><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> <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> <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><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><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><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><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><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><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><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><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><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><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><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><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><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>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
dropdown_enabled
boolean for disable / enable for the options dropdown.
boolean
'success''warning''surface''surface-variant''disabled'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
Value of the button
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
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
A JSON-formatted array of chips, each displaying quick property details such as features, amenities, or tags.
Example:
[{ "chip_text": "3 Bedrooms" }, { "chip_text": "1 Bathroom" }]
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
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
Keep consistent styling and spacing across all credit card fields in the application.
Don't use inconsistent styles that may confuse users.
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
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
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.
'success''warning''surface''surface-variant''disabled'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
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
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
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
header_text
The text displayed in the accordion header. Defaults to 'Accordion Header'.
string
sub_title
Optional subtitle displayed under the header.
string
body_description
The text content inside the accordion body. Defaults to 'This is the accordion body content.'.
string
link_button_text
Text for a button shown in the accordion (usually within the body).
string
custom_class
Allows the user to pass additional CSS classes to customize the accordion's appearance. Defaults to an empty string.
string
component_mode
Provides an optional mode for additional customization (e.g., dark mode or variant styles).
string
component_mode
Defines a special mode (dark, light).
string
default_open
If set to "true", the accordion is expanded/open by default.
boolean
accordion_header_end_icon
Icon name to be displayed at the end of the accordion header (e.g., "info").
string
design
Determines the visual style of the accordion.
'bg-border' (default): Displays the accordion with a background and border.
'no-border': Displays the accordion without a background or border.
"bg-border" | "no-border"
accordion_icon_class
CSS classes used for the accordion icon (e.g., Material Icons classes).
string
accordion_icon_text
The icon name or text to be displayed inside the icon element.
string
accordion_id
Unique identifier for the accordion, useful for targeting or toggling.
string
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.
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
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
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.
left_button_name
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
Don't use inconsistent styles that may confuse users.
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
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.
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
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.
button_type
Specifies the button type. Common values: "button", "submit", "reset".
string
button_color
Defines the button color variant. Example values: 'default-primary' , 'default-secondary' , 'default-tertiary' , 'default-link' , 'error-primary' , 'error-secondary' , 'error-tertiary' , 'error-link' ,
'onsurface-primary' , 'onsurface-secondary' , 'onsurface-tertiary' , 'onsurface-link' ,
'secondary' , 'success' , 'warning' , 'surface' , 'surface-variant' , 'disabled'
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
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.
<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><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><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><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>
<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>
<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><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><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><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><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><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><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><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><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><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><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><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><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>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.
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.
aria_label
The aria-label for accessibility, describing the input field's function to screen readers.
string
button_aria_label
The aria-label for the dropdown button, providing context for screen readers.
string
button_id
The ID for the dropdown button, useful for styling or testing purposes.
string
component_mode
Defines the mode of the component, which can be used to customize its behavior or appearance
string
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.
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.
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.
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.
For version 3.12.0+ you can use the new unified input interactions to set/get data from the components.
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
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.
Use clear and concise labels that describe the expected input.
Don't use ambiguous or unclear labels.
Provide placeholder text to give users an example of the expected input format.
Don't rely solely on placeholder text for essential instructions.
Ensure text fields are large enough to be easily tappable or clickable.
Avoid making text fields too small to interact with comfortably.
Use helper text to provide additional context or instructions.
Don't overload the text field with too much information.
Ensure text fields have a visible focus state to aid keyboard navigation.
Don't ignore accessibility requirements, such as contrast and focus indicators.
Validate input and provide clear error messages when necessary.
Don't provide generic error messages that don't help users understand the issue.
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.
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.
Default: Standard size for most use cases.
Small: Smaller variant for compact spaces or less prominent input fields.
No: Default state with no background.
Yes: Background enabled for additional emphasis or aesthetic purposes.
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.
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.
For version 3.12.0+ you can use the new unified input interactions to set/get data from the components.
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
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.
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.
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.
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.
For version 3.12.0+ you can use the new unified input interactions to set/get data from the components.
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
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.
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.
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.
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.
For version 3.12.0+ you can use the new unified input interactions to set/get data from the components.
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
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.
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,
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.
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.
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.
We have chosen to utlize the Material Design 3 Color system. You may read more here.
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.
1. Go to the Playground page by choosing Pages from the left panel.
2. Open the DDS Color Palette Generator plugin.
3. Choose a Primary & Secondary Color using the color picker (Secondary is optional).
4. Click Generate to create the color palette.
1. Open the Local Variables panel by clicking the Local Variables button from the right panel.
2. Select the Color_Palette collection from the Local Variables panel.
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.
If you have a Secondary Color: ( Secondary Tokens → Fill Secondary0 to Secondary100 using colors from the generated palette.)
4. Keep all other token groups (Secondary, Neutral, Error, Warning, Info, and Success) as they are.
You have successfully synced the token system! Now, your UI Kit is ready to use for your entity.
Key colors are the core colors selected from the tonal palette that serve as the foundational hues for an interface.
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.
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.
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.
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”.
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.
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.
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.
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.
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:
Colors that are at least 40 steps apart in tonal value achieve a contrast ratio of at least 3:1
Colors that are at least 50 steps apart in tonal value achieve a contrast ratio of at least 4.5:1
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.
40-step difference: Use this for elements needing a 3:1 contrast ratio, such as large text and secondary UI elements.
50-step difference: Use this for essential text and interactive elements that need a 4.5:1 contrast ratio.
70-step difference: Reserve this for small or critical text that requires a 7:1 contrast ratio.
50-step difference: Ensure readability for general alerts and feedback.
70-step difference: Use for high-priority messages that need higher visibility.
50-step difference: Necessary for readable text with a 4.5:1 contrast ratio.
40-step difference: Suitable for subtle separations, such as backgrounds and dividers, with a 3:1 contrast ratio.
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.
Quick Select components are used to provide users with a fast way to choose from a list of predefined options.
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.
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.
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.
<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><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><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><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><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><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><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><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><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><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><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><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><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><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><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><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><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> <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><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><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><dda-image-card
image_src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvhlzYedWoCSkLB2HFQ87P5gPjCmJqmTt8vw&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><DdaImageCard
image_src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvhlzYedWoCSkLB2HFQ87P5gPjCmJqmTt8vw&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><DdaImageCard
image_src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvhlzYedWoCSkLB2HFQ87P5gPjCmJqmTt8vw&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><dda-image-card
image_src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvhlzYedWoCSkLB2HFQ87P5gPjCmJqmTt8vw&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><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><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><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><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>
Primary
Primary Variant
On-Primary
On-Primary Variant
Primary
On-Primary
Primary Variant
On-Primary Variant
Secondary
Secondary Variant
On-Secondary
On-Secondary Variant
Secondary
On-Secondary
Secondary Variant
On-Secondary Variant
Info Variants
Error Variants
Warning Variants
Success Variants
Surface
Surface Variant
On Surface
On Surface Variant
Surface
Surface Variant
On Surface
On Surface Variant
Disabled
On-Disabled
Disabled
On-Disabled
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
Keep consistent styling and spacing across all text fields in the application.
Don't use inconsistent styles that may confuse users.
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
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.
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
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.
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
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.
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).
type
The pagination style to be used. Different values adjust the layout and behavior of the pagination control.
'simple-slider': Displays a simple slider with previous and next buttons.
'buttons': Displays previous, next, and page buttons.
'text': Displays page numbers in a text format with previous and next buttons.
'text-pages': Displays page buttons with previous and next buttons in a text format.
'button-text': Displays previous and next buttons along with page buttons, in a button-text format.
'buttons-pages': Displays only the previous and next buttons.
'full': Displays all page buttons without previous/next buttons.
"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 typeof 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
custom_class
A custom CSS class that can be added to the component’s root element for additional styling.
string
disabled
Determines if the input field is disabled or not. When true, the field is uneditable and grayed out.
boolean
error_message
An error message that is shown when the input is invalid or does not meet the validation criteria.
string
helper_text
Optional helper text displayed below the input field, providing extra information to the user about what should be entered.
string
input_id
The ID of the input field, useful for labeling and referencing the field in a form or when styling.
string
label
The label text that will be displayed next to the input field to describe the expected value (e.g., "Phone Number").
string
placeholder
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").
string
size
Specifies the size of the input field, e.g., "small", "medium", or "large". It adjusts the size of the input box accordingly.
string
validation_type
A type of validation to apply to the input field. This could trigger specific styling or validation behavior (e.g., "required", "email", etc.).
string
country_code
The default country code to be displayed in the input field, such as +1 for the US or +44 for the UK.
string
country_flag
The URL of the flag image associated with the default country. This is displayed alongside the country code.
string
phone_number
The value of the phone number entered by the user.
string
is_focused
A boolean that tracks whether the input field is currently focused by the user.
boolean
dropdown_open
A boolean indicating whether the country code dropdown is open or closed.
boolean
countries
A list of countries with their respective country codes and flag image URLs. This is used to populate the country selector dropdown.
toggle_button_name
Name attribute for the country dropdown button
string
country_select_button_name
Name attribute for the country selection buttons in the dropdown
string
phone_input_name
Name attribute for the input field
string
max_length
Maximum number of digits allowed in the phone input.
string
validation_id
An optional identifier used for validation tracking.
string
onchange
Callback function triggered when the input value changes.
string
Keep consistent styling and spacing across all phone fields in the application.
Don't use inconsistent styles that may confuse users.
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
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.
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
Avoid using low contrast that can make the component difficult to see.
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
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.
{ code: string; flag: string }[]<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><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><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><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><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><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><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><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>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.
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.
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
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.
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.
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).
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.
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 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.
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.
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.
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 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.
<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><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><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><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>Small (sm)
640px
0px to 640px
Medium (md)
768px
641px to 768px
Large (lg)
1024px
769px to 1024px
Extra Large (xl)
1280px
1025px to 1280px
2 Extra Large (2xl)
1536px
1281px to 1536px
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
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.
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.
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.
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.
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.
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.
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.
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.
Note: Figma does not currently support automatic library updates to external teams.
For access to the Figma file, please contact us at
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 within your team.
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 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.
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):
[entity code]
Arabic (AR):
[entity code]
For example, for MBRHE, the URLs would be:
English (EN):
Arabic (AR):
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.
Happiness Meter Web Widget Integration and Development : A document that outlines and explains the required development activities for departments to integrate with the Happiness Meter on the web.
Happiness Meter .Net Sample Web : Example implementation of the happiness widget on the web using .Net language.
Happiness Meter Java Sample Web : Example implementation of the happiness widget on the web using Java language.
Happiness Meter Mobile App Integration and Development : A document that describes and explains the necessary development activities for departments to integrate with the Happiness Meter on mobile apps.
Happiness Meter iOS Sample App : Example iOS application of happiness widget on Mobile in iOS language.
Happiness Meter Android Sample App : Sample Android application of happiness widget on mobile in Android language.
New Service Centers Request Form : A form to be filled out with the service center details where the Happiness Meter will be implemented.
Happiness Meter iOS Tablet Sample App : Example iOS application of the happiness widget on tablets using iOS language.
Happiness Meter Android Tablet Sample App : Sample Android application of happiness widget on Tablets in Android language.
Happiness Meter Inquiry Service Specification Guide: A document describing the “Happiness Index Vote Inquiry” Web Service specification, designed to enable departments to inquire about the votes.
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).
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
.visually-hidden
Hides element visually but keeps it accessible
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
To present a unified we recommend using the Dubai font for both the Arabic and English languages.
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.
Large Desktop Typescale
1. Download and Install a New Font or Select from System Fonts.
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.
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 recommendation.
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 .
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.
WCAG Checker:
Figma Plugin:
To ensure a cohesive, readable, and accessible typographic experience, the following foundational choices were made:
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:
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.
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).
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.
-0.5%
Light, Regular, Medium & Bold
H2
45px (2.8125rem)
44
0%
Light, Regular, Medium & Bold
H3
37px (2.3125rem)
36
0%
Light, Regular, Medium & Bold
H4
32px (2rem)
32
0%
Light, Regular, Medium & Bold
H5
26px (1.625rem)
28
0%
Light, Regular, Medium & Bold
H6
22px (1.375rem)
28
0%
Light, Regular, Medium & Bold
Body
18px (1.125rem)
28
0%
Light, Regular, Medium & Bold
Caption
16px (1rem)
24
+1%
Light, Regular, Medium & Bold
Small
14px (0.875rem)
20
+2%
Light, Regular, Medium & Bold
Desktop Typescale
Display
68 px (3.556rem)
80
-1%
Light, Regular, Medium & Bold
H1
48 px (3rem)
56
Tablet Typescale
Display
60 px (3.75rem)
68
1%
Light, Regular, Medium & Bold
H1
44 px (2.75rem)
52
Mobile Typescale
Display
44 px (2.75rem)
52
-1%
Light, Regular, Medium & Bold
H1
36 px (2.25rem)
44
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
Large Desktop
≥ 1440px
18px
1rem = 18px
Display
76px (4.75rem)
64
-0.5%
Light, Regular, Medium & Bold
H1
54px (3.375rem)
.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
Scale
Minor Third (~1.2×)
Provides balanced font size increments—more refined than linear scales, less abrupt than the Golden Ratio.
Grid
4px Baseline
Ensures consistent vertical rhythm and pixel-perfect alignment.
Large Screens
Larger Headings
Reinforces visual hierarchy and improves scannability on spacious layouts.
Letter Spacing
Tight for large, loose for small
Enhances readability and maintains visual balance at different text sizes.
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
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 Web Content Accessibility Guidelines.
56
.h2
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.
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.
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
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:
Locations: A pin icon with the "Locations" label for accessing physical locations or map-related services.
Newsroom: A document icon with the "Newsroom" label, linking to news or updates.
Contact Us: A mail icon paired with "Contact Us," offering a way to connect with support or service teams.
Chat Icon: A speech bubble icon for initiating live chat or accessing FAQs.
External Links and Tools:
Dubai.ae: A text link for accessing the main government portal.
DubaAI Icon: A circular icon with "AI," likely linking to artificial intelligence-based services or tools.
04 - Voice of customer: A unified platform for Dubai entities to connect with customers and gather their feedback (suggestions, complaints, comments).
Happiness Meter: Representing user satisfaction or feedback, providing quick access to a feedback feature.
The stickybar component turns to mobile view @ the 1024 breakpoint
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.
: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
}
<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 & 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><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 & 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><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 & 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><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 & 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"
></dda-sticky-footer>-0.5%
Light, Regular, Medium & Bold
H2
40 px (2.5rem)
48
-0.5%
Light, Regular, Medium & Bold
H3
32 px (2.056rem)
40
0%
Light, Regular, Medium & Bold
H4
28 px (1.722rem)
32
0%
Light, Regular, Medium & Bold
H5
24 px (1.444 rem)
32
0%
Light, Regular, Medium & Bold
H6
20 px (1.222 rem)
28
0%
Light, Regular, Medium & Bold
Body
16 px (1 rem)
24
0%
Light, Regular, Medium & Bold
Caption
14 px (0.833 rem)
20
+1%
Light, Regular, Medium & Bold
Small
12 px (0.687 rem)
16
+2%
Light, Regular, Medium & Bold
-0.5%
Light, Regular, Medium & Bold
H2
36 px (2.25rem)
44
-0.5%
Light, Regular, Medium & Bold
H3
30 px (1.875rem)
40
0%
Light, Regular, Medium & Bold
H4
26 px (1.625rem)
36
0%
Light, Regular, Medium & Bold
H5
22 px (1.375 rem)
32
0%
Light, Regular, Medium & Bold
H6
18 px (1.125 rem)
28
0%
Light, Regular, Medium & Bold
Body
16 px (1 rem)
24
0%
Light, Regular, Medium & Bold
Caption
14 px (0.875 rem)
20
+1%
Light, Regular, Medium & Bold
Small
12 px (0.75 rem)
16
+2%
Light, Regular, Medium & Bold
-0.5%
Light, Regular, Medium & Bold
H2
30 px (1.875rem)
40
0%
Light, Regular, Medium & Bold
H3
26 px (1.625rem)
36
0%
Light, Regular, Medium & Bold
H4
22 px (1.375rem)
32
0%
Light, Regular, Medium & Bold
H5
18 px (1.125rem)
28
0%
Light, Regular, Medium & Bold
H6
16 px (1rem)
24
0%
Light, Regular, Medium & Bold
Body
14 px (0.875rem)
20
0%
Light, Regular, Medium & Bold
Caption
14 px (0.875rem)
20
+1%
Light, Regular, Medium & Bold
Small
12 px (0.75rem)
16
+2%
Light, Regular, Medium & Bold
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
Headers play a crucial role in structuring content, providing clear navigation and enhancing readability by organizing information into distinct, easily digestible sections for users.
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.
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.
To make the header area transparent, apply the following class to the body tag of the landing page:
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)
Simple Menu Item
A top-level navigation link.
Properties:
headerMenuLabel
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.
Logo Attributes
For description and example about handling routers in Single Page Applications (SPA) refer to page
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.
The header component turns to mobile view @ the 1024 breakpoint
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.
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
hide-other-menu
Boolean (true/false) to show or hide the "Other" menu.
string
side-other-menu-title
Title label for the secondary or "Other" menu.
string
other-menu-items
JSON array for "Other" menu items and links.
string
quick-links
JSON array for top-level navigation with default dropdown and megamenu dropdown Format: [ { "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" } ] } ] } ]
string
header_default_submenu
Enables or disables the default submenu under the card header. Use "true" or "false" as a string.
boolean
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
Set to "false" to hide Icons in Mega Menus for Quick Links Sub Menus. Default to "true"
onInputChanged
onevent property for search box
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
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"
login-text
Text displayed on the login button.
string
quickLinks
JSON string representing an array of quick link items, used in the mega menu for fast navigation.
string
readSpeakerLink
URL for the ReadSpeaker integration, allowing users to listen to page content.
string
accessibility_button_name
Name attribute for the accessibility button
string
to trigger login dropdown instead of using href link.
boolean
string array for items in the dropdown used in conjunction with useLoginPopup
["popupItemLabel":"Profile"","url": "/profile"]
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
hamburger_menu_button_name
Name attribute for the hamburger menu button
string
close_menu_button_name
Name attribute for the sidebar close button
string
side-main-menu-title
Title for the primary sidebar menu
string
sideMenuItems
JSON string representing an array of side menu items, including links and potential submenus.
string
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
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
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
smtextsize
Triggered when the user decreases the text size.
baseTextSize
Triggered when the user selects the default text size.
lgTextSize
Triggered when the user increases the text size.
normalContrast
Triggered when the user selects the normal contrast setting.
blindContrast
Triggered when the user selects the contrast setting for color blindness.
redContrast
Triggered when the user selects the contrast setting for red weakness.
greenContrast
Triggered when the user selects the contrast setting for green weakness.
language_text
Sets the language text for the language button
string
language_button_name
Name attribute for the language button
string
languageSwitch
Triggered when the user selects the language switch option.
loginLink
URL for the login page, allowing users to navigate to the authentication screen.
string
readSpeakerLink
URL for the ReadSpeaker integration, allowing users to listen to page content.
string
close_sidebar_button_name
Label for closing the sidebar.
string
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.
<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"
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><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"
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/><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"
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/> <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"
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><body class="transparent"></body> [
{
"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"
}
]
}
]
}
]
use-login-popup="true"
login-popup-links='[
{"popupItemLabel":"Profile","url":"/Profile"},
{"popupItemLabel":"Logout","url":"/Logout"}
]'EventEmitterEventEmitterEventEmitterEventEmitterEventEmitterEventEmitterEventEmitterEventEmitter<void>showQuickLinksIconbooleanuseLoginPopuploginPopupLinks