{"id":1830,"date":"2025-07-23T03:31:44","date_gmt":"2025-07-23T03:31:44","guid":{"rendered":"https:\/\/locationweather.io\/docs\/?post_type=docs&#038;p=1830"},"modified":"2026-02-02T10:48:41","modified_gmt":"2026-02-02T10:48:41","slug":"aqi-minimal-card","status":"publish","type":"docs","link":"https:\/\/locationweather.io\/docs\/aqi-minimal-card\/","title":{"rendered":"AQI \u2013 Minimal Card"},"content":{"rendered":"\n<p>Display real-time air quality data\u2014 including the Air Quality Index (AQI), key AQI pollutants, and health advisories in a clean, compact layout. Use the<strong> AQI \u2013 Minimal Card<\/strong> to present essential environmental health information at a glance, perfectly suited for sidebars or in-page content without disrupting your design.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e68726c81b1&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e68726c81b1\" class=\"wp-block-image aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"357\" height=\"729\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/locationweather.io\/docs\/wp-content\/uploads\/2025\/07\/Live-Example-of-AQI-Minimal-Card.png\" alt=\"\" class=\"wp-image-2066\" srcset=\"https:\/\/locationweather.io\/docs\/wp-content\/uploads\/2025\/07\/Live-Example-of-AQI-Minimal-Card.png 357w, https:\/\/locationweather.io\/docs\/wp-content\/uploads\/2025\/07\/Live-Example-of-AQI-Minimal-Card-147x300.png 147w\" sizes=\"(max-width: 357px) 100vw, 357px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong> AQI \u2013 Minimal Card Block <strong>\u2013 Key Features<\/strong>:<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Real-time Air Quality Data:<\/strong> Display current AQI levels and primary pollutant information.<\/li>\n\n\n\n<li><strong>Stylish Templates:<\/strong> Choose from 6 pre-designed templates to match your site&#8217;s aesthetic.<\/li>\n\n\n\n<li><strong>Pollutant Details:<\/strong> Provide specific data on pollutants with customizable display styles.<\/li>\n\n\n\n<li><strong>Health Advisory:<\/strong> Include actionable health recommendations based on current air quality.<\/li>\n\n\n\n<li><strong>Comprehensive AQI Forecast:<\/strong> Support for Daily, Hourly, or combined air quality AQI forecasts in multiple view styles.<\/li>\n\n\n\n<li><strong>Responsive Display:<\/strong> Fully optimized for seamless viewing on desktop, tablet, and mobile devices.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>How to Create a Minimal AQI Card Block<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open the <strong>WordPress <\/strong>page or post you wish to edit.<\/li>\n\n\n\n<li>Click the <strong>(+)<\/strong> button to add a new block.<\/li>\n\n\n\n<li>Search for <strong>&#8220;AQI \u2013 Minimal Card&#8221;<\/strong> or find it under the <strong>Location Weather <\/strong>blocks.<\/li>\n\n\n\n<li>Click the block to add it to your page. You can instantly see the <strong>Block Preview<\/strong> to customize as you want.<\/li>\n\n\n\n<li>Once you\u2019ve done the design, click <strong>Publish<\/strong> or <strong>Update<\/strong>.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Let us explore the AQI \u2013 Minimal Card Block Settings:<\/strong><\/h4>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Weather API Source<\/strong><\/h3>\n\n\n\n<p><strong>API Source: <\/strong>This section allows you to select the Weather API provider for your air quality information. Choose your preferred provider, <strong>OpenWeather<\/strong> or <strong>Weather API<\/strong> ( Upcoming), to fetch accurate data.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e68726c8acf&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e68726c8acf\" class=\"wp-block-image aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"277\" height=\"381\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/locationweather.io\/docs\/wp-content\/uploads\/2025\/07\/How-to-Choose-Create-Air-Quality-Index-Weather-Minimal-Card.png\" alt=\"\" class=\"wp-image-2072\" srcset=\"https:\/\/locationweather.io\/docs\/wp-content\/uploads\/2025\/07\/How-to-Choose-Create-Air-Quality-Index-Weather-Minimal-Card.png 277w, https:\/\/locationweather.io\/docs\/wp-content\/uploads\/2025\/07\/How-to-Choose-Create-Air-Quality-Index-Weather-Minimal-Card-218x300.png 218w\" sizes=\"(max-width: 277px) 100vw, 277px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>AQI Templates: General<\/strong><\/h3>\n\n\n\n<p>This section provides a variety of pre-designed templates and core search functionality.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e68726c8eaf&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e68726c8eaf\" class=\"wp-block-image aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"274\" height=\"351\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/locationweather.io\/docs\/wp-content\/uploads\/2025\/07\/How-to-Choose-AQI-Templates-from-6-Stylish-Designs.png\" alt=\"\" class=\"wp-image-2068\" srcset=\"https:\/\/locationweather.io\/docs\/wp-content\/uploads\/2025\/07\/How-to-Choose-AQI-Templates-from-6-Stylish-Designs.png 274w, https:\/\/locationweather.io\/docs\/wp-content\/uploads\/2025\/07\/How-to-Choose-AQI-Templates-from-6-Stylish-Designs-234x300.png 234w\" sizes=\"(max-width: 274px) 100vw, 274px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Select a Template:<\/strong> Find your preferred templates from <strong>6 stylish designs<\/strong>.<\/li>\n\n\n\n<li><strong>Custom Weather Search:<\/strong> Use this toggle to enable a front-end weather search bar, allowing users to look up air quality for different locations.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Style AQI Templates:<\/strong><\/h3>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e68726c92c5&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e68726c92c5\" class=\"wp-block-image aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"270\" height=\"723\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/locationweather.io\/docs\/wp-content\/uploads\/2025\/07\/How-to-Style-AQI-Templates-from-6-Stylish-Designs.png\" alt=\"\" class=\"wp-image-2069\" srcset=\"https:\/\/locationweather.io\/docs\/wp-content\/uploads\/2025\/07\/How-to-Style-AQI-Templates-from-6-Stylish-Designs.png 270w, https:\/\/locationweather.io\/docs\/wp-content\/uploads\/2025\/07\/How-to-Style-AQI-Templates-from-6-Stylish-Designs-112x300.png 112w\" sizes=\"(max-width: 270px) 100vw, 270px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Override Specific with Global:<\/strong> Toggle this to choose between global font styles and block-specific customizations.<\/li>\n\n\n\n<li><strong>Typography:<\/strong> Dedicated panel to choose a custom Font Family as you need.<\/li>\n\n\n\n<li><strong>Color: <\/strong>Set the Primary\/Secondary Text Color from here.<\/li>\n\n\n\n<li><strong>Background Type:<\/strong> Choose from Solid Color, Gradient, Image, or Video backgrounds to set the tone for your card.<\/li>\n\n\n\n<li><strong>Border &amp; Radius:<\/strong> Customize the border style and set a Border Radius to create modern, rounded corners.<\/li>\n\n\n\n<li><strong>Show\/Hide Box Shadow: <\/strong>Use the toggle to enable or disable the box shadow from here.<\/li>\n\n\n\n<li><strong>Spacing &amp; Width:<\/strong> Adjust the padding and Max Width to ensure the card fits perfectly in your layout.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Set Location:<\/strong><\/h3>\n\n\n\n<p>This section allows you to define the geographic location for which the weather information will be displayed. For more details,&nbsp;<a href=\"https:\/\/locationweather.io\/docs\/weather-map-by-owm\/#weather-map-by-owm\" target=\"_blank\" rel=\"noreferrer noopener\">visit this link<\/a>.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Regional Preferences:<\/strong><\/h3>\n\n\n\n<p>This section allows you to set the display format for the weather location name, time, and date, as well as the time zone and language. For more details,&nbsp;<a href=\"https:\/\/locationweather.io\/docs\/weather-card\/#regional-preferences\" target=\"_blank\" rel=\"noreferrer noopener\">visit this link<\/a>.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Air Quality Summary: General<\/strong><\/h3>\n\n\n\n<p>This section allows you to configure and style the main descriptive elements of the air quality report within the block.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e68726c98d2&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e68726c98d2\" class=\"wp-block-image aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"273\" height=\"255\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/locationweather.io\/docs\/wp-content\/uploads\/2025\/07\/How-to-Configure-AQI-Summary.png\" alt=\"\" class=\"wp-image-2073\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Heading Label:<\/strong> Enter a custom title for the summary section (e.g., <em>&#8220;Today&#8217;s Air Quality&#8221;<\/em>).<\/li>\n\n\n\n<li><strong>Show\/Hide AQI Condition:<\/strong> Enable this toggle switch to show or hide the descriptive air quality status (e.g., <em>Good, Moderate, Unhealthy<\/em>).<\/li>\n\n\n\n<li><strong>Show\/Hide AQI Description:<\/strong> Enable this to display a detailed health recommendation or advisory based on the current air quality level.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Style Air Quality Summary:<\/strong><\/h3>\n\n\n\n<p>To add style to your Air Quality Summary, follow the steps below.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e68726c9d39&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e68726c9d39\" class=\"wp-block-image aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"276\" height=\"252\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/locationweather.io\/docs\/wp-content\/uploads\/2025\/07\/How-to-Style-AQI-Summary.png\" alt=\"\" class=\"wp-image-2074\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Heading Typography:<\/strong> Customize the font family, color, size, weight, and style for the AQI heading.<\/li>\n\n\n\n<li><strong>Description Typography:<\/strong> Customize the font family, color, size, weight, and style for the AQI description.<\/li>\n\n\n\n<li><strong>Margin:<\/strong> Adjust the spacing around the summary section to ensure it fits well.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Pollutant Details: General<\/strong><\/h3>\n\n\n\n<p>The <strong>Pollutant Details <\/strong>panel gives you complete control to fine-tune how specific pollutant data is presented to your visitors, ensuring technical accuracy and visual clarity.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e68726ca281&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e68726ca281\" class=\"wp-block-image aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"274\" height=\"282\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/locationweather.io\/docs\/wp-content\/uploads\/2025\/07\/How-to-Configure-AQI-Pollutant-Details.png\" alt=\"\" class=\"wp-image-2075\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Show\/Hide Pollutant Details:<\/strong> Enable or disable this to show or hide the breakdown of individual pollutants.<\/li>\n\n\n\n<li><strong>Show\/Hide<\/strong> <strong>Measurement Units:<\/strong> Enable or disable the visibility of the units of measurement (e.g., $\\mu g\/m^3$) next to the pollutant values.<\/li>\n\n\n\n<li><strong>Show\/Hide<\/strong> <strong>Condition Indicator:<\/strong> Enable this to show a visual status for each pollutant.<\/li>\n\n\n\n<li><strong>Symbol Display Style:<\/strong> Choose how chemical symbols appear:<\/li>\n<\/ul>\n\n\n\n<p><strong>Normal:<\/strong> Set it to display symbols as standard text (e.g., SO2).<\/p>\n\n\n\n<p><strong>Subscript:<\/strong> Set it to display symbols with a scientific formatting (e.g., $SO_2$).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Style Pollutant Details:<\/strong><\/h3>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e68726ca83f&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e68726ca83f\" class=\"wp-block-image aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"274\" height=\"460\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/locationweather.io\/docs\/wp-content\/uploads\/2025\/07\/How-to-Style-AQI-Pollutant-Details.png\" alt=\"\" class=\"wp-image-2076\" srcset=\"https:\/\/locationweather.io\/docs\/wp-content\/uploads\/2025\/07\/How-to-Style-AQI-Pollutant-Details.png 274w, https:\/\/locationweather.io\/docs\/wp-content\/uploads\/2025\/07\/How-to-Style-AQI-Pollutant-Details-179x300.png 179w\" sizes=\"(max-width: 274px) 100vw, 274px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Pollutant Label<\/strong> &amp; <strong>Value Typography:<\/strong> Customize the font family, color, size, weight, and style as you want.<\/li>\n\n\n\n<li><strong>Configure Pollutant Box<\/strong>: Set the background style, color, width &amp; padding.<\/li>\n\n\n\n<li><strong>Gap Controls:<\/strong> Adjust the Horizontal and Vertical Gap between the pollutant information boxes.<\/li>\n\n\n\n<li><strong>Margin:<\/strong> Set custom margins to control the spacing between the pollutant section and other block elements.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Air Quality Forecast: General<\/strong><\/h3>\n\n\n\n<p>From this panel, you can set how you want to show users upcoming air quality forecast trends, helping them plan outdoor activities accordingly.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e68726caf24&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e68726caf24\" class=\"wp-block-image aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"273\" height=\"558\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/locationweather.io\/docs\/wp-content\/uploads\/2025\/07\/How-to-Configure-AQI-Forecast.png\" alt=\"\" class=\"wp-image-2077\" srcset=\"https:\/\/locationweather.io\/docs\/wp-content\/uploads\/2025\/07\/How-to-Configure-AQI-Forecast.png 273w, https:\/\/locationweather.io\/docs\/wp-content\/uploads\/2025\/07\/How-to-Configure-AQI-Forecast-147x300.png 147w\" sizes=\"(max-width: 273px) 100vw, 273px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Air Quality Forecast:<\/strong> Enable this toggle to enable or disable the forecast section.<\/li>\n\n\n\n<li><strong>Air Quality Forecast Type:<\/strong> Select how to display Daily, Hourly, or Both forecast data.<\/li>\n\n\n\n<li><strong>Forecast View Style:<\/strong> Choose the layout format from <strong>List<\/strong>, <strong>Graph<\/strong>, or <strong>Carousel<\/strong>.<\/li>\n\n\n\n<li><strong>Display Range:<\/strong> Set the specific number of Forecast Days (e.g., 4 Days) or Forecast Hours (e.g., 96 Hours) to show.<\/li>\n\n\n\n<li><strong>Forecast Label:<\/strong> Enter the title of the forecast section (default: &#8220;AQI Forecast&#8221;).<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Style Air Quality Forecast:<\/strong><\/h3>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e68726cb3d6&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e68726cb3d6\" class=\"wp-block-image aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"274\" height=\"486\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/locationweather.io\/docs\/wp-content\/uploads\/2025\/07\/How-to-Style-AQI-Forecast.png\" alt=\"\" class=\"wp-image-2078\" srcset=\"https:\/\/locationweather.io\/docs\/wp-content\/uploads\/2025\/07\/How-to-Style-AQI-Forecast.png 274w, https:\/\/locationweather.io\/docs\/wp-content\/uploads\/2025\/07\/How-to-Style-AQI-Forecast-169x300.png 169w\" sizes=\"(max-width: 274px) 100vw, 274px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Typography:<\/strong> Customize the font family, color, size, and weight for the Heading, Day &amp; Date, and AQI Condition text.<\/li>\n\n\n\n<li><strong>Background Type:<\/strong> Choose a background style for the forecast area (Transparent, Solid, or Gradient).<\/li>\n\n\n\n<li><strong>Border &amp; Radius:<\/strong> Customize the border style and set a border radius to create modern, rounded corners.<\/li>\n\n\n\n<li><strong>Carousel Settings: <\/strong>Set the carousel settings as you want from here.<\/li>\n\n\n\n<li><strong>Spacing:<\/strong> Adjust the Item Gap, Padding, and Margin from here.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Footer:<\/strong><\/h3>\n\n\n\n<p>This section allows you to control the display of information in the block\u2019s footer, such as the data update time and weather attribution. For more details, <a href=\"https:\/\/locationweather.io\/docs\/weather-card\/#footer\">visit this link<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Advanced Settings:<\/strong><\/h3>\n\n\n\n<p>This section allows you to control the visibility of the block across different device types. You can choose to show or hide the block on desktops, tablets, or mobile devices to optimize the user experience for each screen size. For more details, <a href=\"https:\/\/locationweather.io\/docs\/weather-card\/#advanced-settings\">visit this link<\/a>.<\/p>\n","protected":false},"parent":0,"menu_order":7,"template":"","docs_cat":[14],"class_list":["post-1830","docs","type-docs","status-publish","hentry","docs_cat-weather-blocks"],"taxonomy_info":{"docs_cat":[{"value":14,"label":"Weather Blocks"}]},"featured_image_src_large":[],"author_info":[],"comment_info":"","_links":{"self":[{"href":"https:\/\/locationweather.io\/docs\/wp-json\/wp\/v2\/docs\/1830","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/locationweather.io\/docs\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/locationweather.io\/docs\/wp-json\/wp\/v2\/types\/docs"}],"version-history":[{"count":4,"href":"https:\/\/locationweather.io\/docs\/wp-json\/wp\/v2\/docs\/1830\/revisions"}],"predecessor-version":[{"id":2128,"href":"https:\/\/locationweather.io\/docs\/wp-json\/wp\/v2\/docs\/1830\/revisions\/2128"}],"wp:attachment":[{"href":"https:\/\/locationweather.io\/docs\/wp-json\/wp\/v2\/media?parent=1830"}],"wp:term":[{"taxonomy":"docs_cat","embeddable":true,"href":"https:\/\/locationweather.io\/docs\/wp-json\/wp\/v2\/docs_cat?post=1830"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}