--- title: Overview of The New Component-Driven Responsive Design description: Component Driven Responsive design the concept of CSS by adding some media features based on user preference, and media queries. image: https://www.xenonstack.com/hubfs/xenonstack-responsive-design-component-driven.png --- - [![xenonstack-logo](https://www.xenonstack.com/hubfs/xenonstack-logo-new-relase.svg)](https://www.xenonstack.com/) - - Foundry Foundry Unified reasoning foundation enabling seamless orchestration, analytics, infrastructure, and trust across intelligent ecosystems [![pointers-icon](https://www.xenonstack.com/hubfs/xs-revamp-header-dropdown/our-purpose-line-icon.svg) Akira AI - Reasoning and Agent Orchestration Turn models into collaborative, policy-governed agents that learn and act together](https://www.xenonstack.com/agentic-platforms/akira-ai/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-revamp-header-dropdown/autonomous-operations-icon.svg) ElixirData - Agentic Analytics Intelligence Explainable, decision-centric analytics for measurable business outcomes](https://www.xenonstack.com/agentic-platforms/elixirdata/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-revamp-header-dropdown/digital-immune-system-icon.svg) NexaStack - Agentic Infrastructure Automation Secure, compliant, and high-performance AI deployment across cloud, edge, and on-prem](https://www.xenonstack.com/agentic-platforms/nexastack-unified-inference/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/ai-driven-industries-hr-and-recruitment.svg) MetaSecure - Trust, Compliance, and Defense Continuous assurance with AI-BOMs, risk scoring, and agentic security](https://www.xenonstack.com/agentic-platforms/metasecure/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-revamp-header-dropdown/decision-intelligence-header-icon.svg) Neural AI – Agentic Intelligence & Autonomous Innovation AI agents for intelligent automation and adaptive innovation](https://www.xenonstack.com/agentic-platforms/neural-ai/) ### Reasoning Stack Powers intelligent systems with unified orchestration, adaptive analytics, scalable infrastructure, and built-in trust [See in action ![cta-arrow](https://www.elixirclaw.ai/hubfs/dropdown-assets/cta-arrow.svg)](https://www.xenonstack.com/agentic-ai/analytics-platform/) ![platfom-image](https://9471087.fs1.hubspotusercontent-na1.net/hubfs/9471087/Imported%20images/build-your-next-intelligent-workflows-banner-image.svg) - AI Agents AI Agents Pre-built autonomous agents designed for domain-specific intelligence, seamless integrations, and governed enterprise deployment By Domain [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/adaptive-ai-enterprise-operational-analytics.svg) Agentic Operations AgentSRE and AgentOps for automated reliability and IT operations](https://www.xenonstack.com/ai-agents/agentic-operations/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/industries-fintech.svg) Agentic Finance FinOps Agent and Budget Enforcer for optimized financial governance](https://www.xenonstack.com/ai-agents/agentic-finance/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/case-study-icon.svg) Agentic Risk and Compliance Audit Agent and Risk Assurance to automate compliance monitoring](https://www.xenonstack.com/ai-agents/agentic-risk-compliance/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/discover-digital-experience-platform.svg) Agentic Analytics Analyst Agent and Decision Advisor for AI-driven insights and strategy](https://www.xenonstack.com/ai-agents/agentic-analytics/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-revamp-header-dropdown/developer-experience-icon.svg) Agentic Supply Chain AI-powered advisor for smart sourcing, vendor insights, and strategic procurement](https://www.xenonstack.com/ai-agents/agentic-procurement/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/discover-serverless-application-development.svg) Agentic Security AI-driven defense delivering proactive threat detection and autonomous security orchestration](https://www.xenonstack.com/ai-agents/agentic-security/) By Integration [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/decision-intelligence-metaverse.svg) Snowflake AI Agents Pre-built connectors for real-time data intelligence on Snowflake](https://www.xenonstack.com/ai-agents/snowflake-ai-agents/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/optimize-cloud-migration.svg) Databricks AI Agents AI agents for automated data workflows and insights on Databricks](https://www.xenonstack.com/ai-agents/databricks-ai-agents/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/optimize-application-modernization.svg) ServiceNow AI Agents AI workflows to streamline service, incident, and operations automation](https://www.xenonstack.com/ai-agents/servicenow-ai-agents/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/cloud-native-devsecops.svg) Jira/Project Management Agents AI agents for backlog grooming, sprint planning, and real-time project visibility](https://www.xenonstack.com/ai-agents/jira-agents-actions/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/discover-digital-experience-platform.svg) SAP AI Agents AI copilots for finance, supply chain, and HR decisions across your SAP landscape](https://www.xenonstack.com/ai-agents/sap-agents-actions/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/ai-driven-industries-hr-and-recruitment.svg) Oracle AI Agents AI agents for financials, risk, and operations intelligence across Oracle applications](https://www.xenonstack.com/ai-agents/oracle-agents-actions/) - Solutions Solutions Governed AI solutions driving measurable business outcomes across operations, finance, security, and analytics [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/cloud-native-devops.svg) ReliabilityOps — Cloud Reliability Automation Automate reliability checks and optimize uptime with continuous reasoning](https://www.xenonstack.com/ai-agents/cloudops-reimagined/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/cloud-native-kubernetes.svg) IncidentOps — AI-Driven Site Reliability Resolve incidents faster with AI-led triage, contextual RCA, and adaptive recovery](https://www.xenonstack.com/ai-agents/sre-reimagined/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/discover-custom-software-development.svg) PlatformOps — Unified Platform Automation Unify infrastructure and AI systems with reasoning-driven automation and compliance](https://www.xenonstack.com/ai-agents/platformops-reimagined/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/decision-intelligence-customer-analytics.svg) DefenseOps — Autonomous Threat Defense Detect, analyze, and neutralize threats autonomously with adaptive defense intelligence](https://www.xenonstack.com/ai-agents/responsible-ai-aviator/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/optimize-business-intelligence.svg) TrustOps — Responsible AI and Continuous Governance Ensure transparency, fairness, and compliance in every AI system and decision](https://www.xenonstack.com/ai-agents/secops-reimagined/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/ai-driven-industries-manufacturing.svg) RiskOps — Predictive Risk Intelligence Predict, score, and mitigate risks proactively with real-time assurance intelligence](https://www.xenonstack.com/ai-agents/risk-management-aviator/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/adaptive-ai-explainable-ai.svg) FactoryOps — AI-Driven Industrial Automation Predict equipment failures and optimize production with adaptive intelligence](https://www.xenonstack.com/ai-agents/industrial-automation-reimagined/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/adaptive-ai-enterprise-operational-analytics.svg) AssetOps — Automated Asset Reliability Enable predictive maintenance and optimize lifecycle performance continuously](https://www.xenonstack.com/ai-agents/asset-operations-and-maintenance-reimagined/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/ai-driven-industries-infrastructure%20.svg) QualityOps — Continuous Testing Intelligence Accelerate testing cycles with autonomous validation and reasoning feedback](https://www.xenonstack.com/ai-agents/qaops-reimagined/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/industries-insurance.svg) SourcingOps — Intelligent Procurement Automate sourcing, vendor analysis, and spend insights for agile procurement](https://www.xenonstack.com/ai-agents/procurement-reimagined/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/decision-intelligence-augmented-data-management.svg) DataOps — Autonomous Data Pipeline Governance Ensure reliability, detect anomalies, and self-heal data pipelines automatically](https://www.xenonstack.com/ai-agents/dataops-reimagined/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/decision-intelligence-metaverse.svg) DecisionOps — Intelligent Decisioning Deliver explainable, auditable, and measurable outcomes with reasoning AI](https://www.xenonstack.com/ai-agents/desicison-reimagined/) - Industries Industries Industry blueprints showcasing agentic transformation, real-world impact, and measurable outcomes across key sectors [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/adaptive-ai-computer-vision.svg) Aerospace and Defense Autonomous flight systems and predictive maintenance powered by AI](https://www.xenonstack.com/industries/aerospace/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/industries-fintech.svg) Banking - Finance - Payments AI governance for secure, compliant, and adaptive financial operations](https://www.xenonstack.com/industries/banking/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/industries-retail.svg) Manufacturing and Industrial Automation Smart factories using reasoning systems for real-time quality optimization](https://www.xenonstack.com/industries/digital-manufacturing-services/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/optimize-cloud-infrastrcuture.svg) Enterprise - IT Operations AI-powered IT operations ensuring reliability, scalability, and cost efficiency](https://www.xenonstack.com/industries/enterprise-technology/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/xs-scale-clients-and-partners.svg) Consumer – Experience – Tech Personalized digital experiences driven by explainable and trusted AI](https://www.xenonstack.com/industries/consumer-technology/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/discover-platform-engineering.svg) Retail and Supply Chain Autonomous retail analytics enhancing operations, engagement, and forecasting accuracy](https://www.xenonstack.com/industries/retail/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/industries-healthcare.svg) Travel – Hospitality – Guest Experience Agentic systems delivering personalized guest journeys with contextual intelligence](https://www.xenonstack.com/industries/travel-hospitality/) - Resources Resources Explore insights, success stories, and learning programs that build knowledge and strengthen the AI transformation journey [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/xs-scale-xenonstack-university.svg) Blogs Stay updated with the latest industry trends, news, and thought leadership](https://www.xenonstack.com/blog) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/insights.svg) Insights Explore in-depth AI articles, use cases, and innovative applications](https://www.xenonstack.com/insights) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/use-case.svg) Use Cases Discover real-world applications of Agentic AI across industries](https://www.xenonstack.com/use-cases) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/scale-cloud-native-applications.svg) Case Studies Learn how organizations are achieving success with our solutions](https://xenonstack.com/case-studies) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/video.svg) Video Library Explore our collection of product demos, webinars, and AI thought leadership videos](https://www.xenonstack.com/videos/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/ebook.svg) E-Books Download comprehensive e-books on AI, SRE, and more](https://www.xenonstack.com/e-book) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/presentation.svg) Presentations View our AI presentations, talks, and conference sessions on AI innovation](https://www.xenonstack.com/presentations/) - Company Company Discover our people, principles, and purpose driving innovation, trust, and meaningful careers in the AI era [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/xs-journey-about-us.svg) About Us Discover our mission, story, and the values driving our innovation and impact](https://www.xenonstack.com/about-us/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/xs-scale-xenonstack-university.svg) Xenonstack Academy Enhance your skills with our comprehensive training programs and courses designed for modern tech professionals](https://www.xenonstack.com/xenonstack-academy/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/xs-scale-clients-and-partners.svg) Contact Us Get in touch with us for support, business inquiries, or collaboration opportunities](https://www.xenonstack.com/contact-us/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/ai-driven-industries-public-safety.svg) Leadership Team Meet the visionary leaders guiding Xenonstack’s strategic direction and innovation](https://www.xenonstack.com/about-us/leadership-team/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/adaptive-ai-enterprise-knowledge-graph.svg) Tao of Xenonstack Learn about the guiding principles and philosophies that shape our culture and solutions](https://www.xenonstack.com/about-us/tao-of-xenonstack/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/xs-journey-how-we-work.svg) How We Work Understand our collaborative approach and work culture that drive successful outcomes](https://www.xenonstack.com/about-us/how-we-work/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/xs-journey-how-we-grow.svg) How We Grow Explore how we nurture talent, foster innovation, and promote sustainable growth](https://www.xenonstack.com/about-us/how-we-grow/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/xs-journey-our-purpose.svg) Careers Join our growing team! Explore career opportunities to work at the forefront of innovation](https://www.xenonstack.com/careers/) - Get Started [![xenonstack-logo](https://www.xenonstack.com/hubfs/xenonstack-logo-new-relase.svg)](https://www.xenonstack.com/) - Foundry ![dropdown-icon](https://www.elixirclaw.ai/hubfs/dropdown-assets/dropdown-icon.svg) [Akira AI](https://www.xenonstack.com/agentic-platforms/akira-ai/) [ElixirData](https://www.xenonstack.com/agentic-platforms/elixirdata/) [NexaStack](https://www.xenonstack.com/agentic-platforms/nexastack-unified-inference/) [MetaSecure](https://www.xenonstack.com/agentic-platforms/metasecure/) [Neural AI](https://www.xenonstack.com/agentic-platforms/neural-ai/) - AI Agents ![dropdown-icon](https://www.elixirclaw.ai/hubfs/dropdown-assets/dropdown-icon.svg) [Agentic Operations](https://www.xenonstack.com/ai-agents/agentic-operations/) [Agentic Finance](https://www.xenonstack.com/ai-agents/agentic-finance/) [Agentic Risk and Compliance](https://www.xenonstack.com/ai-agents/agentic-risk-compliance/) [Agentic Analytics](https://www.xenonstack.com/ai-agents/agentic-analytics/) [Agentic Supply Chain](https://www.xenonstack.com/ai-agents/agentic-procurement/) [Agentic Security](https://www.xenonstack.com/ai-agents/agentic-security/) [Snowflake AI Agents](https://www.xenonstack.com/ai-agents/snowflake-ai-agents/) [Databricks AI Agents](https://www.xenonstack.com/ai-agents/databricks-ai-agents/) [ServiceNow AI Agents](https://www.xenonstack.com/ai-agents/servicenow-ai-agents/) [Jira/Project Management Agents](https://www.xenonstack.com/ai-agents/jira-agents-actions/) [SAP AI Agents](https://www.xenonstack.com/ai-agents/sap-agents-actions/) [Oracle AI Agents](https://www.xenonstack.com/ai-agents/oracle-agents-actions/) - Solutions ![dropdown-icon](https://www.elixirclaw.ai/hubfs/dropdown-assets/dropdown-icon.svg) [ReliabilityOps](https://www.xenonstack.com/ai-agents/cloudops-reimagined/) [IncidentOps](https://www.xenonstack.com/ai-agents/sre-reimagined/) [PlatformOps](https://www.xenonstack.com/ai-agents/platformops-reimagined/) [DefenseOps](https://www.xenonstack.com/ai-agents/responsible-ai-aviator/) [TrustOps](https://www.xenonstack.com/ai-agents/secops-reimagined/) [RiskOps](https://www.xenonstack.com/ai-agents/risk-management-aviator/) [FactoryOps](https://www.xenonstack.com/ai-agents/industrial-automation-reimagined/) [AssetOps](https://www.xenonstack.com/ai-agents/asset-operations-and-maintenance-reimagined/) [QualityOps](https://www.xenonstack.com/ai-agents/qaops-reimagined/) [SourcingOps](https://www.xenonstack.com/ai-agents/procurement-reimagined/) [DataOps](https://www.xenonstack.com/ai-agents/dataops-reimagined/) [DecisionOps](https://www.xenonstack.com/ai-agents/desicison-reimagined/) - Industries ![dropdown-icon](https://www.elixirclaw.ai/hubfs/dropdown-assets/dropdown-icon.svg) [Aerospace and Defense](https://www.xenonstack.com/industries/aerospace/) [Banking - Finance - Payments](https://www.xenonstack.com/industries/banking/) [Manufacturing and Industrial Automation](https://www.xenonstack.com/industries/digital-manufacturing-services/) [Enterprise - IT Operations](https://www.xenonstack.com/industries/enterprise-technology/) [Consumer – Experience – Tech](https://www.xenonstack.com/industries/consumer-technology/) [Retail and Supply Chain](https://www.xenonstack.com/industries/retail/) [Travel – Hospitality – Guest Experience](https://www.xenonstack.com/industries/travel-hospitality/) - Resources ![dropdown-icon](https://www.elixirclaw.ai/hubfs/dropdown-assets/dropdown-icon.svg) [Blogs](https://www.xenonstack.com/blog) [Insights](https://www.xenonstack.com/insights) [Use Cases](https://www.xenonstack.com/use-cases) [Case Studies](https://www.xenonstack.com/case-studies) [Video Library](https://www.xenonstack.com/videos/) [E-Books](https://www.xenonstack.com/e-book) [Presentations](https://www.xenonstack.com/presentations/) - Company ![dropdown-icon](https://www.elixirclaw.ai/hubfs/dropdown-assets/dropdown-icon.svg) [About Us](https://www.xenonstack.com/about-us/) [Xenonstack Academy](https://www.xenonstack.com/xenonstack-academy/) [Contact Us](https://www.xenonstack.com/contact-us/) [Leadership Team](https://www.xenonstack.com/about-us/leadership-team/) [Tao of Xenonstack](https://www.xenonstack.com/about-us/tao-of-xenonstack/) [How We Work](https://www.xenonstack.com/about-us/how-we-work/) [How We Grow](https://www.xenonstack.com/about-us/how-we-grow/) [Careers](https://www.xenonstack.com/careers/) - Get Started ![Close](https://www.xenonstack.com/hubfs/slider-cross-icon.svg) ## Interested in Solving your Challenges with XenonStack Team ## Get Started Get Started with your requirements and primary focus, that will help us to make your solution First Name \* Please enter a valid First Name Last Name \* Please enter a valid Last Name Business Email ID \* Please enter a valid business email address Contact Number \* Please enter a valid Contact Number Company Website \* Please enter a valid Company Website URL LinkedIn URL \* Please enter a valid LinkedIn URL or N/A Leave this field empty Industry Belongs To \* Please Select your Industry Banking Fintech Payment Providers Wealth Management Discrete Manufacturing Semiconductor Machinery Manufacturing / Automation Appliances / Electrical / Electronics Elevator Manufacturing Defense & Space Manufacturing Computers & Electronics / Industrial Machinery Motor Vehicle Manufacturing Food and Beverages Distillery & Wines Beverages Shipping Logistics Mobility (EV / Public Transport) Energy & Utilities Hospitality Digital Gaming Platforms SportsTech with AI Public Safety - Explosives Public Safety - Firefighting Public Safety - Surveillance Public Safety - Others Media Platforms City Operations Airlines & Aviation Defense Warfare & Drones Robotics Engineering Drones Manufacturing AI Labs for Colleges AI MSP / Quantum / AGI Institutes Retail Apparel and Fashion Please correct the highlighted fields before proceeding. Proceed Next ## Interested in Solving your Challenges with XenonStack ## Personalization Get Started with your requirements and primary focus, that will help us to make your solution ### What is your Key focus areas? \* AI Workflow and Operations Data Management and Operations AI Governance Analytics and Insights Observability Security Operations Risk and Compliance Procurement and Supply Chain Private Cloud AI Vision AI ### In Which Agentic Platform and Accelerator you are Interested? \* Akira AI - Agentic AI Platform Multi Agent System Metasecure - Autonomous SOC Nexastack – Build and Managed Compound AI Stack Data Foundry XAI – Vision and AI Platform – Visual AI Agents Strategy Consulting AI Managed Services Others (Please Specify) ### Which segment does your company belong to? \* Startup Scale Startup SME Mid Enterprises Large Enterprises Federal Government Non Profits Others (Please Specify) ### At what stage is your AI use case currently in? \* Conceptualized: Use case defined, PoC pending POC Completed In Production with challenges Not yet defined Others (Please Specify) ### What are the primary challenges in adopting AI? \* Data Quality Issues Data Privacy and Compliance Aligning AI with business goals Unclear ROI from POCs Integration with existing ERP systems Scalability Challenges Moving POCs in Production Infrastructure Limitation High Implementation costs Others (Please Specify) ### What kind of infrastructure does your organization currently using? \* AWS Microsoft Azure GCP IBM Cloud Oracle Cloud On Premises Others (Please Specify) ### Are you using any Data platform? \* Databricks SnowFlake Amazon Redshift Azure Synapse Analytics Microsoft Fabric Teradata Oracle Database SAP Hana Informatica Google Cloud BigQuery Others (Please Specify) ### Preferred Approach for AI Transformation \* Assisted Intelligence Agents as Co-Pilot Collaborative Intelligence Agents as AI Teammates Autonomous Intelligence Agents – AI Agents Agentic Actions Agentic Process Automation ### In Which Domain your Solution/Organization belongs to in-terms of Data Privacy, Trustworthy AI \* Internal Organization Highly Regulated Industry (Healthcare, Financials etc) Medium Regulated Non Regulated ### Captcha Verification \* captcha text ![Refresh Icon](https://www.xenonstack.com/hs-fs/hubfs/refresh.png?width=20&height=20&name=refresh.png) Please select all the required fields Review Previous Submit ![green-checkmark](https://www.xenonstack.com/hubfs/green-checkmark.svg) ## your request has been submitted successfully ! Our XenonStack Team will shortly reach out to you. We are looking forward to showcase how XenonStack can transform your business. ![usecase-banner (1)](https://www.xenonstack.com/hs-fs/hubfs/usecase-banner%20(1).webp?width=1921&height=622&name=usecase-banner%20(1).webp) [Enterprise Digital Platform](https://www.xenonstack.com/insights/tag/enterprise-digital-platform) # Overview of The New Component-Driven Responsive Design [Navdeep Singh Gill](https://www.xenonstack.com/insights/author/navdeep-singh-gill) | 28 December 2021 ![Responsive Design: The New Component-Driven User Interface](https://www.xenonstack.com/hs-fs/hubfs/xenonstack-responsive-design-component-driven.png?width=1280&height=720&name=xenonstack-responsive-design-component-driven.png) ## Introduction Responsive Design Today, when we talked about the term: "responsive design," the first thought that came to our mind was using media queries to change layout when resizing a design from desktop size to tablet size to mobile size. But shortly, this insight of responsive design could also be considered outdated using tables for page layout. [CSS](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwi4uv3eqbDzAhWQSH0KHWIUBIc4HhAWegQIEBAB&url=https%3A%2F%2Fgithub.com%2Fcss-modules%2Fcss-modules&usg=AOvVaw0pz-UIJWEuU4H85JO_7NIX) is near revolutionizing the concept of responsive design by adding some new queries. These will directly magnify the component-based design landscape. Component-driven development has become a really popular development strategy. ![xenonstack-component-driven-development-strategy](https://www.xenonstack.com/hubfs/xenonstack-component-driven-development-strategy.png) The New Responsive Component-Driven Responsive Design contains updates to include container queries, media features based on user preference, and media queries for new screen types, such as a foldable screen. We will go through these components one by one in this blog. Component-based design systems produce inherent efficiencies for designers and developers and solve the challenges related to duplication and inconsistency in applying themes while driving the event of higher quality, reusable components. > An open source layout and functional testing framework for websites, written in Java, to test the look and feel of responsive websites. Click to explore about, [Responsive Design Testing with Galen Framework](https://www.xenonstack.com/insights/what-is-galen-framework) ## Media Features based on User-Preference The media features based on user preference are one of the most rousing upcoming CSS features. It allows us to build more accessible and tailored experiences to accommodate different user needs. Many of these media features aren't fully supported across browsers, but it shouldn't restrict us from using them. If they aren't supported within the user's browser, they'll just be ignored. According to written in w3.org spec, there are 6 different user preference media features, which are: 1. Prefers-reduced-motion 2. Prefers-reduced-transparency 3. Prefers-contrast 4. Prefers-color-scheme 5. Forced-colours 6. Prefers-reduced-data Preference features are acquired based on user's preferences in their OS(Windows, [macOS](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwj64732qbDzAhWBV30KHZgcBoMQFnoECBEQAQ&url=https%3A%2F%2Fdeveloper.apple.com%2Fmacos%2F&usg=AOvVaw0xvm28vGaISha5c1iU_vJe), Linux) and help develop a more robust and personalized web experience, especially for those with accessibility needs. > Before you start coding, consider these fundamental design concepts for building clean, efficient interfaces for a broad set of users. Click to explore about, [UI Design Dos and Don’ts](https://developer.apple.com/design/tips/) ### Control motion on the page using the prefers-reduced-motion feature Users who have set OS preferences for the reduced motion because \[ people with cognitive concerns such as [Attention Deficit Hyperactivity Disorder](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwiKw5m9qbDzAhUQeH0KHTElDIwQFnoECDQQAQ&url=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FAttention_deficit_hyperactivity_disorder&usg=AOvVaw3WSQAEu1T3r-UMqvjHcJOQ) (ADHD) \] generally request fewer animations when using their computer. That's why it's likely that they might not appreciate a flashy intro screen, card flip animation, intricate loader, or other flashy animations while using the web. With preferred-reduced-motion, you'll design your pages with reduced-motion in mind and make a motion-enhanced experience for those that do not have this preference set. `@media (prefers-reduced-motion: reduce){` `/* User which prefer less animation and motion */` `}` `@media (prefers-reduced-motion: no-preference){` `/* User which have no preference set in OS */` `}` ### Increased or Decreased contrast using the Prefers-Contrast Some users pick to have less or more contrast between elements. The prefers-contrast media feature will be used to detect if the user has requested less or more contrast. `@media (prefers-contrast: low){` `/* User which prefer less contrast */` `}` `@media (prefers-contrast: no-preference){` `/* User which have no preference set in OS */` `}` ### Using prefers-color-scheme for Light and Dark version This is probably the foremost well-known property of all of the user preference media features. The prefers-color-scheme feature helps you to customize your [user interface](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwiHr5KjqrDzAhUDfH0KHeDyD38QFnoECAMQAw&url=https%3A%2F%2Fxd.adobe.com%2Fideas%2Fprocess%2Fui-design%2F&usg=AOvVaw2lx6xvaNMenSSz-EBCwC2V) to the theme which your user prefers. In their OS, whether it's on desktop or mobile, users can set a preference for light, dark, or auto themes, which change depending on the time of day. `@media (prefers-color-scheme: dark){` `/* User which prefer dark theme */` `}` `@media (prefers-color-scheme: light){` `/* User which prefer light theme */` `}` ### Using prefers-reduced-data for fewer data to be used on user request The reduced data media feature can serve lighter CSS, which will use less data on [page load](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwjA9NCvqrDzAhXXb30KHYA9BYwQFnoECD0QAQ&url=https%3A%2F%2Fchrome.google.com%2Fwebstore%2Fdetail%2Fpage-load-time%2Ffploionmjgeclbkemipmkogoaohcdbig%3Fhl%3Den&usg=AOvVaw1tJw0QAr6CFEWio6dRYp3J). We can use it to show lighter background images, remove animations, not loading custom fonts, and much more. `@media (prefers-reduced-data: no preference){` `/* User which like no preference set in OS */` `}` `@media (prefers-reduced-data: reduce){` `/* User which prefer less data */` `}` No-preference value is the default option, similarly to other media features, that the user hasn't specified whether they want reduced data or not. > The spanning CSS media feature can be used to test whether the output device is a dual-screen and the browser viewport is spanned across the two display regions. Click to explore about, [CSS media screen-spanning](https://docs.microsoft.com/en-us/dual-screen/web/css-media-spanning) ## CSS - A Container Queries While developing a responsive design, we use a media query to change the document layout based on the viewport's size. When we target the element, we decide that when the children are within the sidebar, it should use the stacked layout. In terms of obtainable space, however, it may well be that the object in the sidebar would have enough space to display in the side-by-side layout on large screens. This problem is resolved by container queries where, rather than looking at the viewport size, we measure the container size and make website layout adjustments according to the space in the container. Warning: The CSS container queries are only supported in the experiment flag using Chrome Canary for now. `.parent {` `contain: layout inline-size/block-size;` `}` `@container (max-width: 850px) {` `.child img {` `display: none;` `}` `.child p {` `font-size: 1.25rem;` `}` `}` We can now test it with container queries [Chrome canary](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwig2tPrqrDzAhUFX30KHZtSDjcQFnoECAYQAQ&url=https%3A%2F%2Fwww.google.com%2Fintl%2Fen_in%2Fchrome%2Fcanary%2F&usg=AOvVaw3MieFnl8CbMj0G6uPbietb) (Canary is a version of the Chrome browser released daily and automatically for the Mac and Windows platforms. It's a test release before the new production release (Version prior to Chrome release). To begin with, search in chrome tab chrome://flags and look for "container queries," then enable it. > Creating a responsive web design may seem confusing at first, but knowing a few of the UI design trends is a great way to get inspired and learn. Click to explore about, [Responsive User Interface Design Trends](https://xd.adobe.com/ideas/process/ui-design/responsive-user-interface-design-trends/) ### What are the Chrome Flags? Chrome Flags are experimental features that are not part of the default Chrome browser which normal people use. [Chrome flags](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwjTwv76qrDzAhXGUn0KHXz1CaMQFnoECDEQAQ&url=https%3A%2F%2Fdeveloper.chrome.com%2Fblog%2Fbrowser-flags%2F&usg=AOvVaw1Vi2muRaRQsqjijt0zAxHK) are a list of experimental features and settings embedded in the Chrome browser for developers. These experimental features include functionality that Google functions on but hasn't enabled it yet for general consumers. Chrome flags allow us to improve our browsing performance and also allows us to use new in-development features. Here is the screenshot of the chrome flag for Enable CSS Container Queries ## What is the Process for Container Queries? The beginning step is to feature the contained property. According to the parent width component will adjust automatically. Therefore, we need to tell the browser only to repaint the affected area, not the whole page. With the contain property, we will let the browser realize that before time. The value inline-size means to reply to the parent's width changes only. For live demo, you can visit the codepen - [https://codepen.io/una/pen/LYbvKpK](https://codepen.io/una/pen/LYbvKpK) One of the great features of container queries is the ability to separate micro layouts from macro layouts. We will style every element with container queries, create micro layouts, and style entire page layouts with media queries. This makes a replacement level of control that permits even more [responsive interfaces](https://www.audi.com/ci/en/guides/user-interface/responsive-ui.html). ![xenonstack-micro-macro-layouts](https://www.xenonstack.com/hubfs/xenonstack-micro-macro-layouts.png) Container queries help us style based on its properties, like width and height on container's content. This takes a different approach from media queries, which is used to style the web page based on the viewport. ## Responsive Designs for the Form-Factor Nowadays, Web developers targeting dual-screen and foldable devices want to effectively layout the content in a window that spans multiple display screens, usually foldable phones. The web development platform does not provide the necessary primitives for building designs optimized for dual-screen or foldable experiences.![xenonstack-dual-screen-designs](https://www.xenonstack.com/hubfs/xenonstack-dual-screen-designs.png) Foldable or flexible screens and designing for screen spanning are examples of where we will see a form factor shift today. And screen-spanning is yet one more spec being worked on to cover these new form factors and needs. A perfect media query for screen-spanning can be used here. It currently behaves like this: @media (spanning: \) ![Java vs Kotlin](https://www.xenonstack.com/hubfs/cloud-security-failure.png) Our solutions cater to diverse industries with a focus on serving ever-changing marketing needs.**[Click here for our Product Engineering Consulting and Development Solutions](https://www.xenonstack.com/talk-to-specialist/product-design-engineering/)** ## Conclusion Component Driven Responsive design is the approach that suggests that design and development should respond to the user's behavior and environment based on screen size, platform, orientation, and user experience. - Discover more about [Building Scalable and Responsive Applications](https://www.xenonstack.com/insights/what-is-akka) - Click To explore about [Design Thinking for Agile User Stories](https://www.xenonstack.com/blog/agile-user-story) - Basic Principles for [Best Conversational User Interfaces](https://www.xenonstack.com/insights/principles-for-conversational-ui) ## Share Article - [![XenonStack Facebook](https://www.xenonstack.com/hubfs/xenonstack-facebook-service.svg)](http://www.facebook.com/share.php?u=https://www.xenonstack.com/insights/responsive-design-component-driven) - [![XenonStack Twitter](https://www.xenonstack.com/hubfs/xs-twitter-white-updated-icon.svg)](https://twitter.com/intent/tweet?text=I+found+this+interesting+blog+post&url=https://www.xenonstack.com/insights/responsive-design-component-driven) - [![XenonStack Linked In](https://www.xenonstack.com/hubfs/xenonstack-linkedin-service.svg)](http://www.linkedin.com/shareArticle?mini=true&url=https://www.xenonstack.com/insights/responsive-design-component-driven) - [![XenonStack Email Icon](https://www.xenonstack.com/hubfs/xenonstack-email-service.svg)](mailto:?subject=Check%20out%20https://www.xenonstack.com/insights/responsive-design-component-driven%20&body=Check%20out%20https://www.xenonstack.com/insights/responsive-design-component-driven) ## Table of Contents ## Share Article - [![XenonStack Facebook](https://www.xenonstack.com/hubfs/xenonstack-facebook-service.svg)](http://www.facebook.com/share.php?u=https://www.xenonstack.com/insights/responsive-design-component-driven) - [![XenonStack Twitter](https://www.xenonstack.com/hubfs/xs-twitter-white-updated-icon.svg)](https://twitter.com/intent/tweet?text=I+found+this+interesting+blog+post&url=https://www.xenonstack.com/insights/responsive-design-component-driven) - [![XenonStack Linked In](https://www.xenonstack.com/hubfs/xenonstack-linkedin-service.svg)](http://www.linkedin.com/shareArticle?mini=true&url=https://www.xenonstack.com/insights/responsive-design-component-driven) - [![XenonStack Email Icon](https://www.xenonstack.com/hubfs/xenonstack-email-service.svg)](mailto:?subject=Check%20out%20https://www.xenonstack.com/insights/responsive-design-component-driven%20&body=Check%20out%20https://www.xenonstack.com/insights/responsive-design-component-driven) ## Explore Related Topics [Platform Engineering](https://www.xenonstack.com/insights/tag/platform-engineering) [DevSecOps](https://www.xenonstack.com/insights/tag/devsecops) [Deployment Automation](https://www.xenonstack.com/insights/tag/deployment-automation) [Continuous Security](https://www.xenonstack.com/insights/tag/continuous-security) [Generative AI](https://www.xenonstack.com/blog/tag/generative-ai) [Cyber Security](https://www.xenonstack.com/insights/tag/cyber-security) [Enterprise Cloud](https://www.xenonstack.com/insights/tag/enterprise-cloud) [Data Science](https://www.xenonstack.com/insights/tag/data-science) [Kubernetes](https://www.xenonstack.com/insights/tag/kubernetes) ![navdeep-singh-gill](https://www.xenonstack.com/hubfs/navdeep-gill-ceo-xenonstack.svg) ## Navdeep Singh Gill Global CEO and Founder of XenonStack Navdeep Singh Gill is serving as Chief Executive Officer and Product Architect at XenonStack. He holds expertise in building SaaS Platform for Decentralised Big Data management and Governance, AI Marketplace for Operationalising and Scaling. His incredible experience in AI Technologies and Big Data Engineering thrills him to write about different use cases and its approach to solutions. [Explore More by Navdeep Singh Gill ![cta-blue-arrow](https://www.xenonstack.com/hubfs/cta-arrow-blue.svg)](https://www.xenonstack.com/insights/author/navdeep-singh-gill) ![Subscribe background](https://www.xenonstack.com/hubfs/blog-post-subscribe.svg) ## Subscribe to our Latest Technology Insights and Resources Subscribe Now ![slider-cross-icon](https://www.xenonstack.com/hubfs/slider-cross-icon.svg) ## Get the latest articles in your inbox Business Email ID \* Please enter a valid Business Email ID Company Name \* Please enter a valid Company Name Yes, I would like to receive the XenonStack newsletter as well as marketing emails regarding XenonStack products, services, and events. I can unsubscribe at any time. By registering, you confirm that you agree to the processing of your personal data by XenonStack as described in the Privacy Policy. Subscribe Now ## Related Articles ![Application Release Engineering - Best Practices and Tools](https://www.xenonstack.com/hs-fs/hubfs/release-management-process.png?width=1200&height=675&name=release-management-process.png) ### [Application Release Engineering - Best Practices and Tools](https://www.xenonstack.com/insights/application-release-engineering) 04 April 2025 ![Six Key Aspects of Infrastructure Modernization](https://www.xenonstack.com/hs-fs/hubfs/infrastructure-modernization-Feb-26-2024-10-45-39-0562-AM.png?width=1200&height=675&name=infrastructure-modernization-Feb-26-2024-10-45-39-0562-AM.png) ### [Six Key Aspects of Infrastructure Modernization](https://www.xenonstack.com/insights/infrastructure-modernization) 26 February 2024 ![Micro Frontend Architecture and Best Practices](https://www.xenonstack.com/hs-fs/hubfs/xenonstack-what-is-micro-frontend.png?width=1200&height=675&name=xenonstack-what-is-micro-frontend.png) ### [Micro Frontend Architecture and Best Practices](https://www.xenonstack.com/insights/micro-frontend-architecture) 11 December 2024 ![xenonstack-logo](https://www.xenonstack.com/hubfs/xenonstack-new-logo-release.svg) XenonStack Agentic Foundry powers enterprise agentic systems with unified infra, analytics, workflows, and security to drive automation and compliance. [![Youtube](https://www.xenonstack.com/hubfs/xs-footer-social-icons/youtube-icon.svg)](https://www.youtube.com/c/XenonStackOfficial) [![LinkedIn](https://www.xenonstack.com/hubfs/xs-footer-social-icons/linkedin-icon.svg)](https://www.linkedin.com/company/xenonstack/) [![Github](https://www.xenonstack.com/hubfs/xs-footer-social-icons/github-icon.svg)](https://github.com/xenonstack) [![Twitter](https://www.xenonstack.com/hubfs/xs-footer-social-icons/twitter-icon.svg)](https://twitter.com/xenonstack) [![Medium](https://www.xenonstack.com/hubfs/xs-footer-social-icons/medium-icon.svg)](https://medium.com/@xenonstack) [![Instagram](https://www.xenonstack.com/hubfs/xs-footer-social-icons/instagram-icon.svg)](https://www.instagram.com/teamxenonstack/) ![iso-9001-certified](https://www.xenonstack.com/hubfs/iso-9001-2015-certified.svg) ![iso-27001-certified](https://www.xenonstack.com/hubfs/iso-27001-2022-certified.svg) ![soc-certified](https://www.xenonstack.com/hubfs/soc-certified-org.svg) ![power-bi-partner](https://www.xenonstack.com/hubfs/power-bi-2.svg) ![kubernetes-certified-partner](https://www.xenonstack.com/hubfs/kubernetes-certified.svg) ![advance-tier-competency](https://www.xenonstack.com/hubfs/xenonstack-competency/aws-advanced-tier-service.svg) ![managed-service-competency](https://www.xenonstack.com/hubfs/xenonstack-competency/aws-managed-service.svg) ![ml-service-competency](https://www.xenonstack.com/hubfs/xenonstack-competency/aws-ml-competency.svg) ![devops-service-competency](https://www.xenonstack.com/hubfs/xenonstack-competency/aws-devops-competency.svg) ![amazon-kinesis-delivery](https://www.xenonstack.com/hubfs/xenonstack-competency/amazon-kinesis.svg) ## AI Engineering [Composite AI](https://www.xenonstack.com/artificial-intelligence/composite-ai/) [Decision AI](https://www.xenonstack.com/artificial-intelligence/decision-ai/) [AI Quality](https://www.xenonstack.com/artificial-intelligence/ai-quality/) [Generative AI](https://www.xenonstack.com/artificial-intelligence/generative-ai/) [Multimodal AI](https://www.xenonstack.com/artificial-intelligence/multimodal-ai/) [AI Assurance](https://www.xenonstack.com/artificial-intelligence/explainable-ai/) [MLOps](https://www.xenonstack.com/artificial-intelligence/mlops/) [Physical AI](https://www.xenonstack.com/artificial-intelligence/physical-ai/) [Augmented Engineering](https://www.xenonstack.com/artificial-intelligence/ai-augmented-software-development/) [Generative BI](https://www.xenonstack.com/artificial-intelligence/generative-bi/) ## Data Foundry [Streaming Data Platform](https://www.xenonstack.com/dataops/streaming-data-platform/) [Data Lakehouse](https://www.xenonstack.com/dataops/delta-lake/) [Data Catalog](https://www.xenonstack.com/dataops/data-catalog/) [Data Observability](https://www.xenonstack.com/dataops/data-observability/) [Cloud Data Warehouse](https://www.xenonstack.com/dataops/cloud-data-warehouse/) [Data Engineering](https://www.xenonstack.com/dataops/data-engineering/) [MetaData Management](https://www.xenonstack.com/dataops/metadata-management/) [Data Quality](https://www.xenonstack.com/dataops/augmented-data-quality/) [Real Time Analytics](https://www.xenonstack.com/dataops/real-time-analytics/) [Data Modernization](https://www.xenonstack.com/dataops/data-modernization/) ## Platform Engineering [Cloud Native](https://www.xenonstack.com/cloud-native/platform-engineering/) [Automation As Code](https://www.xenonstack.com/cloud-native/automation-as-code/) [Observability](https://www.xenonstack.com/cloud-native/observability/) [FinOps](https://www.xenonstack.com/cloud-native/finops/) [Application Modernization](https://www.xenonstack.com/cloud-native/application-modernization/) [DevSecOps](https://www.xenonstack.com/cloud-native/devsecops/) [Site Reliability Engineering](https://www.xenonstack.com/cloud-native/site-reliability-engineering/) [Progressive Delivery](https://www.xenonstack.com/cloud-native/progressive-delivery/) [GitOps](https://www.xenonstack.com/cloud-native/gitops/) [Compliance as code](https://www.xenonstack.com/cloud-native/compliance-as-code/) [Value Stream Management](https://www.xenonstack.com/cloud-native/value-stream-management/) [Policy as Code](https://www.xenonstack.com/cloud-native/policy-as-code/) [Telemetry Pipeline](https://www.xenonstack.com/cloud-native/telemetry-pipeline/) ## Agentic AI [Agentic Analytics](https://www.xenonstack.com/agentic-ai/enterprise-systems/) [Agentic AI Systems](https://www.xenonstack.com/agentic-ai/agentic-ai-system/) [Process Intelligence](https://www.xenonstack.com/agentic-ai/business-process-operations/) [Developer Experience](https://www.xenonstack.com/agentic-ai/developer-experience-platform/) [Autonomous Operations](https://www.xenonstack.com/agentic-ai/autonomous-operations/) [AI Vision at EDGE](https://www.xenonstack.com/agentic-ai/edge-and-vision-ai/) [Compound AI System](https://www.xenonstack.com/agentic-ai/compound-ai-system/) [GUI Agents](https://www.xenonstack.com/agetic-ai/gui-agents/) [CMDB Management](https://www.xenonstack.com/agentic-ai/cmdb-management/) [ITSM](https://www.xenonstack.com/agentic-ai/itsm/) [Network Automation](https://www.xenonstack.com/agentic-ai/network-automation/) ## AI Agents [DataBricks AI Agents](https://www.xenonstack.com/ai-agents/databricks-ai-agents/) [SnowFlake AI Agents](https://www.xenonstack.com/ai-agents/snowflake-ai-agents/) [ServiceNow AI Agents](https://www.xenonstack.com/ai-agents/servicenow-ai-agents/) [AWS AI Agents](https://www.xenonstack.com/ai-agents/aws-ai-agents/) [Microsoft Azure AI Agents](https://www.xenonstack.com/ai-agents/microsoft-azure-ai-agents-actions/) [SalesForce AI Agents](https://www.xenonstack.com/ai-agents/salesforce-agents-actions/) [MySQL AI Agents](https://www.xenonstack.com/ai-agents/mysql-agents-actions/) [PostgreSQL AI Agents](https://www.xenonstack.com/ai-agents/postgresql-agents-actions/) [Datadog AI Agents](https://www.xenonstack.com/ai-agents/datadog-agents-actions/) [DynaTrace AI Agents](https://www.xenonstack.com/ai-agents/dynatrace-agents-actions/) [Splunk AI Agents](https://www.xenonstack.com/ai-agents/splunk-agents-actions/) [BigQuery AI Agents](https://www.xenonstack.com/ai-agents/bigquery-agents-actions/) [SAP AI Agents](https://www.xenonstack.com/ai-agents/sap-agents-actions/) [Infor AI Agents](https://www.xenonstack.com/ai-agents/infor-agents-actions/) [Oracle AI Agents](https://www.xenonstack.com/ai-agents/oracle-agents-actions/) [WorkDay AI Agents](https://www.xenonstack.com/ai-agents/workday-agents-actions/) [Jira AI Agents](https://www.xenonstack.com/ai-agents/jira-agents-actions/) ## Industry [Aerospace and Aviation](https://www.xenonstack.com/industries/aerospace/) [Financial Services](https://www.xenonstack.com/industries/banking/) [Automotive And Industrial](https://www.xenonstack.com/industries/automotive/) [Consumer Tech](https://www.xenonstack.com/industries/consumer-technology/) [Technology, Media and Telco](https://www.xenonstack.com/industries/enterprise-technology/) [Digital Supply Chain](https://www.xenonstack.com/industries/digital-supply-chain/) [Hospitality and Tourism](https://www.xenonstack.com/industries/travel-hospitality/) [Discrete Manufacturing](https://www.xenonstack.com/industries/automotive/) [Education](https://www.xenonstack.com/industries/education/) [Media and Entertainment](https://www.xenonstack.com/industries/media-entertainment/) [Oil and Gas](https://www.xenonstack.com/industries/oil-and-gas/) [Energy and Utilities](https://www.xenonstack.com/industries/energy-and-utilities/) ## Enterprise Support [AI Managed Services](https://www.xenonstack.com/managed-services/ai-managed-services/) [Kubernetes Managed Services](https://www.xenonstack.com/managed-services/kubernetes/) [SRE as a Service](https://www.xenonstack.com/managed-services/site-reliability-engineering/) [Data Managed Services](https://www.xenonstack.com/managed-services/big-data/) [Analytics Managed Services](https://www.xenonstack.com/managed-services/analytics-managed-services/) [Data Protection](https://www.xenonstack.com/readiness-assessment/data-protection/) [On-Premise AI](https://www.xenonstack.com/managed-services/on-premise-ai-cluster/) ## Solutions [Private Cloud](https://www.xenonstack.com/solutions/private-cloud/) [Internal Developer Platform](https://www.xenonstack.com/solutions/internal-developer-platform/) [AI Inference](https://www.xenonstack.com/solutions/ai-inference/) [Open-Source Data Platform](https://www.xenonstack.com/solutions/open-source-data-platform/) [AI Trust Score](https://www.xenonstack.com/solutions/ai-trust-score/) [Autonomous SoC](https://www.xenonstack.com/solutions/autonomous-soc/) [Digital Twin](https://www.xenonstack.com/solutions/digital-twin/) [Readiness Assessment](https://www.xenonstack.com/readiness-assessment/) [Talk To Specialist](https://www.xenonstack.com/talk-to-specialist/) ## Company [About Us](https://www.xenonstack.com/about-us/) [Leadership Team](https://www.xenonstack.com/about-us/leadership-team/) [TAO of XenonStack](https://www.xenonstack.com/about-us/tao-of-xenonstack/) [How We Grow](https://www.xenonstack.com/about-us/how-we-grow/) [How We Work](https://www.xenonstack.com/about-us/how-we-work/) [Careers](https://www.xenonstack.com/careers/) [XA - QSIR](https://www.xenonstack.com/xenonstack-academy/) [Contact Us](https://www.xenonstack.com/contact-us/) [Book Demo](https://demo.xenonstack.com/) ## Resources [Blog](https://www.xenonstack.com/blog) [Insights](https://www.xenonstack.com/insights/) [Use Cases](https://www.xenonstack.com/use-cases) [Case Study](https://www.xenonstack.com/case-studies) [Videos](https://www.xenonstack.com/videos/) [EBooks](https://www.xenonstack.com/e-book) [Presentations](https://www.xenonstack.com/presentations/) @2026 XenonStack - A Stack Innovator! [Privacy Policy](https://www.xenonstack.com/privacy-policy/) [Terms and Conditions](https://www.xenonstack.com/terms-and-conditions/) Global Presence : ![united-states-flag-icon](https://www.xenonstack.com/hubfs/united-states.svg) USA ![uae-flag-icon](https://www.xenonstack.com/hubfs/uae-flag-icon.svg) Dubai ![india-flag-icon](https://www.xenonstack.com/hubfs/india-flag-icon.svg) India ![uk-flag-icon](https://www.xenonstack.com/hubfs/united-kingdom.svg) UK ![australia-flag-icon](https://www.xenonstack.com/hubfs/australia-flag-icon.svg) Australia ✕ ## Agent SRE for Reliability and Observability Solutions AI continuously monitors systems for risks before they escalate. It correlates signals across logs, metrics, and traces. This ensures faster detection, fewer incidents, and stronger reliability - ![Performance Icon](https://www.xenonstack.com/hubfs/performance.svg)Proactive detection of performance and availability issues - ![Root Cause Icon](https://www.xenonstack.com/hubfs/root-cause.svg)Root-cause analysis across microservices and environments - ![Remediation Icon](https://www.xenonstack.com/hubfs/remediation.svg)Automated remediation playbooks to reduce MTTR [Explore Agent SRE](https://agentsre.ai/) ![akira-ai-banner-illustration](https://www.xenonstack.com/hubfs/akira-ai-banner-illustration.svg) ✕ ## Physical Surveillance with Vision AI Agent Technology AI converts camera feeds into instant situational awareness. It detects unusual motion and unsafe behavior in real time. Long hours of video become searchable and summarized instantly - ![Motion Icon](https://www.xenonstack.com/hubfs/motion.svg)Real-time detection of suspicious motion or intrusion - ![Video Search Icon](https://www.xenonstack.com/hubfs/video-search.svg)Natural language video search and instant playback - ![Summary Icon](https://www.xenonstack.com/hubfs/summary.svg)Smart summaries for audits, investigations, and compliance [See Vision AI in Action](https://www.xenonstack.ai/) ![physical-surveillance](https://www.xenonstack.com/hubfs/xai-banner-image.svg) ✕ ## Agentic Data Intelligence Across Your Full Data Stack Your data stack becomes intelligent and conversational. Agents surface insights, detect anomalies, and explain trends. Move from dashboards to autonomous, always-on analytics - ![Connects warehouses](https://www.xenonstack.com/hubfs/data-icon.svg)Connects to warehouses, lakes, and streaming sources - ![Question Answering](https://www.xenonstack.com/hubfs/answers.svg)Question-answering in natural language - ![Continuous monitoring](https://www.xenonstack.com/hubfs/monitoring-2.svg)Continuous monitoring for anomalies and KPI deviations [See in Action](https://elixirdata.co/) ![agentic-data-intelligence](https://www.xenonstack.com/hubfs/empowerment-of-analysts.svg) ✕ ## Intelligent Diagnostic for Self-Healing System Automation Agents identify recurring failures and performance issues. They trigger workflows that resolve common problems automatically. Your infrastructure evolves into a self-healing environment - ![Diagnostics Icon](https://www.xenonstack.com/hubfs/diagnostic.svg)Automated diagnostics for recurring errors - ![Playbook Icon](https://www.xenonstack.com/hubfs/playbook.svg)Playbook execution: restart services, scale pods, clear queues - ![Feedback Icon](https://www.xenonstack.com/hubfs/feedback.svg)Feedback loop for improving remediation strategies [See in Action](https://agentanalyst.ai/) ![intelligent-diagnostic](https://www.xenonstack.com/hubfs/dataops-reimagined-banner-image.svg) ✕ ## Agentic GRC - Monitoring Risk and Compliance Controls AI continuously checks controls and compliance posture. It detects misconfigurations and risks before they escalate. Evidence collection becomes automatic and audit-ready - ![Controls Icon](https://www.xenonstack.com/hubfs/controls.svg)Continuous control checks across infrastructure and SaaS - ![Audit Icon](https://www.xenonstack.com/hubfs/audit.svg)Automated evidence collection for audits - ![Risk Icon](https://www.xenonstack.com/hubfs/risk.svg)Risk scoring and prioritized remediation recommendations [Explore Agent GRC](https://agentgrc.ai/) ![monitoring-risk-and-compliance](https://www.xenonstack.com/hubfs/enhanced-security-measures.svg) ✕ ## Agentic Finance and Procurement Intelligent Agents Financial and procurement workflows become proactive and insight-driven. Agents monitor spend, vendors, and contracts in real time. Approvals and sourcing decisions become faster and smarter - ![Visibility Icon](https://www.xenonstack.com/hubfs/visibility.svg)Real-time visibility into spend and commitments - ![Anomaly Icon](https://www.xenonstack.com/hubfs/anomaly.svg)Anomaly detection on invoices and vendor performance - ![Workflow Icon](https://www.xenonstack.com/hubfs/workflow.svg)Intelligent workflows for approvals and sourcing decisions [Optimize Finance & Procurement](https://www.xenonify.ai/) ![agentic-finance-and-procurement](https://www.xenonstack.com/hubfs/responsible-ai-aviators-banner-illustration.svg) ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Navdeep Singh Gill", "url" : "https://www.xenonstack.com/insights/author/navdeep-singh-gill" }, "dateModified" : "2021-12-28T14:47:18.819Z", "datePublished" : "2021-10-04T12:33:30.000Z", "headline" : "Overview of The New Component-Driven Responsive Design", "image" : [ "https://www.xenonstack.com/hubfs/xenonstack-responsive-design-component-driven.png" ], "mainEntityOfPage" : { "@id" : "https://www.xenonstack.com/insights/responsive-design-component-driven", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://www.xenonstack.com/hubfs/Xenonstack-Serives%20-3-2-2021-10.png" }, "name" : "Xenonstack Inc" } } ``` ```json { "@context" : "http://schema.org", "@type" : "Organization", "address" : { "@type" : "PostalAddress", "addressCountry" : "USA", "addressLocality" : "Plano", "addressRegion" : "Texas", "postalCode" : "75024", "streetAddress" : "7700 Windrose Ave. " }, "description" : "XenonStack is the #1 Data and AI foundry and technology services company to simplify and scale Enterprise and Generative AI Journeys.", "email" : "business@xenonstack.com", "logo" : "https://f.hubspotusercontent30.net/hubfs/8161231/Xenonstack-Serives%20-3-2-2021-10.png", "mainEntityOfPage" : { "@id" : "https://www.xenonstack.com/insights/responsive-design-component-driven", "@type" : "WebPage", "description" : "Component Driven Responsive design the concept of CSS by adding some media features based on user preference, and media queries." }, "name" : "XenonStack", "sameAs" : [ "https://www.facebook.com/XenonStack", "https://www.linkedin.com/company/xenonstack/", "https://www.youtube.com/c/XenonStackOfficial", "https://twitter.com/xenonstack" ], "telephone" : "", "url" : "https://www.xenonstack.com/" } ```