# Components - [Accordions](https://designsystem.dubai.ae/components/accordions.md): Accordions are used to organize content into collapsible sections, allowing users to expand and collapse sections as needed. - [Accordion](https://designsystem.dubai.ae/components/accordions/accordion.md): Accordions are used to organize content into collapsible sections, allowing users to expand and collapse sections as needed. - [Accordion Groups](https://designsystem.dubai.ae/components/accordions/accordion-groups.md): 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. - [Alert](https://designsystem.dubai.ae/components/alert.md): Alert banners are used to convey important information or warnings to users. - [Attach File](https://designsystem.dubai.ae/components/attach-file.md): Attach file fields are used to allow users to upload files from their device. - [Avatar](https://designsystem.dubai.ae/components/avatar.md): Avatar visually represents a user through a profile image or initials, helping to identify individuals within the interface. - [Breadcrumbs](https://designsystem.dubai.ae/components/breadcrumbs.md): Breadcrumbs provide a navigation aid that shows users their current location within a site's hierarchy, allowing them to trace their path back to previous pages easily. - [Buttons](https://designsystem.dubai.ae/components/buttons.md): Buttons are fundamental interactive elements used in user interfaces to trigger actions, submit forms, and navigate through different parts of an application - [Button](https://designsystem.dubai.ae/components/buttons/button.md): Text button is used to initiate actions on a page or form. - [Icon Button](https://designsystem.dubai.ae/components/buttons/icon-button.md): Icon Button is used to perform an action with an icon, without requiring a text label. It is often used for actions like editing, deleting, or navigating. - [Link Button](https://designsystem.dubai.ae/components/buttons/link-button.md): A Link Button is styled as a button but acts like a hyperlink, guiding users to other pages or resources. It’s commonly used for navigational actions such as "Learn More" or "Download". - [Social Media Buttons](https://designsystem.dubai.ae/components/buttons/social-media-buttons.md): Social Media Login Buttons enable quick login or signup using social media accounts, offering a convenient authentication option. - [Split Button](https://designsystem.dubai.ae/components/buttons/split-button.md): A Split Button combines a dropdown menu for related options in one compact UI component, allowing quick execution of default tasks and easy access to additional actions. - [Checkbox](https://designsystem.dubai.ae/components/checkbox.md): Checkbox components are versatile interactive elements used in user interfaces to enable users to make single or multiple selections. - [Checkbox](https://designsystem.dubai.ae/components/checkbox/checkbox.md): Checkboxes allow users to select multiple options from a set of predefined options. - [Checkbox Groups](https://designsystem.dubai.ae/components/checkbox/checkbox-groups.md): Checkbox groups enable users to select multiple options from a predefined list, offering flexibility in choice and customization of preferences. - [Cards](https://designsystem.dubai.ae/components/cards.md) - [Banner Cards](https://designsystem.dubai.ae/components/cards/banner-cards.md): Banner cards use interactive and clickable features to engage users, enhancing the presentation of content effectively. - [Event Card](https://designsystem.dubai.ae/components/cards/event-card.md): Event cards provide a compact, visually engaging way to display key details about upcoming events, enabling quick discovery, interaction, and navigation. - [Group Card](https://designsystem.dubai.ae/components/cards/group-card.md): 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. - [Pricing Card](https://designsystem.dubai.ae/components/cards/pricing-card.md): The Pricing Card is a flexible UI component designed to present pricing-based content or listings — such as real estate, SaaS plans, or subscription offerings — in a visually engaging and informative - [Team Member Card](https://designsystem.dubai.ae/components/cards/team-member-card.md): Team Member Cards provide a quick, visually organized snapshot of an individual’s identity, role, and status within a team, helping users easily recognize and understand team composition at a glance. - [Team Section Card](https://designsystem.dubai.ae/components/cards/team-section-card.md): Team Section Cards provide a clean, visual introduction to individual team members by highlighting their image, name, and role, helping users quickly recognize key personnel and understand organizatio - [Video Card](https://designsystem.dubai.ae/components/cards/video-card.md): Video cards deliver key video content with supporting details and actions in a compact, engaging layout. - [Custom Cards](https://designsystem.dubai.ae/components/cards/custom-cards.md): 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, - [Chips](https://designsystem.dubai.ae/components/chips.md): Chips are small, interactive components used to display information, filter content, or trigger actions. - [Credit Card](https://designsystem.dubai.ae/components/credit-card.md): Credit card visualizations are used to display key information about a credit card in a visually appealing format. - [Credit Card Input Field](https://designsystem.dubai.ae/components/credit-card-input-field.md): Credit Card Input Field enables users to input and verify their card information. - [Header](https://designsystem.dubai.ae/components/header.md): Headers play a crucial role in structuring content, providing clear navigation and enhancing readability by organizing information into distinct, easily digestible sections for users. - [Home Carousel](https://designsystem.dubai.ae/components/home-carousel.md): Banner cards use interactive and clickable features to engage users, enhancing the presentation of content effectively. - [Interactive Banner](https://designsystem.dubai.ae/components/interactive-banner.md): Interactive banners use dynamic elements like animations and clickable features to capture attention and encourage actions, enhancing the user experience with flexible content presentation. - [Menu](https://designsystem.dubai.ae/components/menu.md): Menus streamline navigation by categorizing links, making it easy for users to find and access different sections quickly and efficiently. - [Number Field](https://designsystem.dubai.ae/components/number-field.md): Number Input Field allows users to enter numeric values with precision, ideal for fields requiring quantities, amounts, or other numerical data. - [Pagination](https://designsystem.dubai.ae/components/pagination.md): Pagination divides content into discrete pages, allowing users to navigate through large sets of information easily and maintain an organized viewing experience. - [Phone Number Field](https://designsystem.dubai.ae/components/phone-number-field.md): Phone Number Field allows users to enter and validate phone numbers in a standardized format, often with options for country code selection. - [Progress Indicators](https://designsystem.dubai.ae/components/progress-indicators.md): Progress Indicators visually display the completion status of a task or process, helping users understand how much has been completed and how much remains. - [Expectation Levels](https://designsystem.dubai.ae/components/progress-indicators/expectation-levels.md): Expectation Levels Progress Bar visually represents stages of achievement or quality standards, helping users track their progress toward meeting defined goals. - [Progress Bar](https://designsystem.dubai.ae/components/progress-indicators/progress-bar.md): Progress bars are used to visually indicate the progression of a task or process. - [Progress Circle](https://designsystem.dubai.ae/components/progress-indicators/progress-circle.md): Progress circle are used to visually represent the completion status of a task or process in a circular format. - [Progress Semi-Circle](https://designsystem.dubai.ae/components/progress-indicators/progress-semi-circle.md): Progress semi-circles are used to visually represent the completion status of a task or process in a semi-circular format. - [Quick Select Field](https://designsystem.dubai.ae/components/quick-select-field.md): Quick Select components are used to provide users with a fast way to choose from a list of predefined options. - [Radio Buttons](https://designsystem.dubai.ae/components/radio-buttons.md): Radio buttons let users select one option from a group of exclusive choices, ensuring a clear and simple decision-making process in forms. - [Radio Input](https://designsystem.dubai.ae/components/radio-buttons/radio-input.md): Radio Input is used to allow users to select a single option from a set of mutually exclusive choices. - [Radio Buttons Groups](https://designsystem.dubai.ae/components/radio-buttons/radio-buttons-groups.md): Radio Input is used to allow users to select a single option from a set of mutually exclusive choices. - [Search Input Field](https://designsystem.dubai.ae/components/search-input-field.md): Search Input Field is used to allow users to enter search queries and filter through content. - [Segmentation](https://designsystem.dubai.ae/components/segmentation.md): Segmentation in user interfaces categorizes content and controls into distinct groups, enhancing navigation and usability through clear, manageable selections. - [Segmented Controls](https://designsystem.dubai.ae/components/segmentation/segmented-controls.md): Segmented Controls are used for areas of the UI that require simple configuration options in a compact manner - [Segmented Tabs](https://designsystem.dubai.ae/components/segmentation/segmented-tabs.md): Segmented tabs are used in user interfaces to categorize and display content in an organized, compact manner, allowing for easy navigation between different sections. - [Select Input Field](https://designsystem.dubai.ae/components/select-input-field.md): Select Input Field allows users to choose an option from a predefined list, making it easy to select a specific value while ensuring data consistency. - [Slider](https://designsystem.dubai.ae/components/slider.md): Sliders are used to allow users to select a value from a range by dragging a handle along a track. - [Steppers](https://designsystem.dubai.ae/components/steppers.md): Step indicators are used to show users their current position within a sequence of steps. - [Timeline](https://designsystem.dubai.ae/components/steppers/timeline.md): A Timeline is a navigation component that guides users through sequential steps in a process, displaying progress and providing clear direction across tasks. - [Vertical Stepper](https://designsystem.dubai.ae/components/steppers/vertical-stepper.md): Step indicators are used to show users their current position within a sequence of steps. - [Sticky Bar](https://designsystem.dubai.ae/components/sticky-bar.md): A sticky bar is a fixed navigation element that provides continuous access to essential actions, links, or tools as users scroll through a page. - [Tabs](https://designsystem.dubai.ae/components/tabs.md): Tabs organize content into separate sections within the same interface, allowing users to switch between views without navigating away from the page. - [Text Area Field](https://designsystem.dubai.ae/components/text-area-field.md): Text Area is a multi-line text input component used to capture long-form user input. - [Text Field](https://designsystem.dubai.ae/components/text-field.md): Text Field allows users to input text into a UI. It is commonly used in forms and dialogs. - [Toggle Switch](https://designsystem.dubai.ae/components/toggle-switch.md): Toggle Switch is used to turn a setting on or off. It provides a clear visual indication of the current state. - [Tooltip](https://designsystem.dubai.ae/components/tooltip.md): Tooltips are used to provide additional information when users hover over, focus on, or tap an element. - [Footers](https://designsystem.dubai.ae/components/footers.md): Footers provide essential navigation, reinforce branding, and enhance usability by structuring the webpage’s conclusion with key links and information. - [Service Payment Footer](https://designsystem.dubai.ae/components/footers/service-payment-footer.md): The service footer streamlines transactions with payment details, security prompts, and actions, ensuring trust and usability. - [Website Footer](https://designsystem.dubai.ae/components/footers/website-footer.md): Website footer provides essential navigation, reinforce branding, and enhance usability by structuring the webpage’s conclusion with key links and information. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://designsystem.dubai.ae/components.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.