YAML

type: horizontal-stack
cards:
  - type: conditional
    conditions:
      - entity: sensor.u_s_air_pollution_level
        state: good
    card:
      type: markdown
      content: >-
        <center><img src='/local/healthy-icon.svg' width='50%'><BR>


        <font size = 4px> The Air Quality Today Is  <font color = green> Good
        </font></font>


        The AQI is: <font size = 4px color = green> {{
        states('sensor.u_s_air_quality_index') }} </font></center>
  - type: conditional
    conditions:
      - entity: sensor.u_s_air_pollution_level
        state: moderate
    card:
      type: markdown
      content: >-
        <center><img src='/local/moderate-icon.svg' width='50%'><BR>

        <font size = 4px> The Air Quality Today Is  <font color = yellow>
        Moderate </font></font>


        The AQI is: <font size = 4px color = green> {{
        states('sensor.u_s_air_quality_index') }} </font></center>
  - type: conditional
    conditions:
      - entity: sensor.u_s_air_pollution_level
        state: unhealthy
    card:
      type: markdown
      content: >-
        <center><img src='/local/unhealthy-icon.svg' width='50%'><BR>

        <font size = 4px> The Air Quality Today Is  <font color = red> Moderate
        </font></font>


        The AQI is: <font size = 4px color = green> {{
        states('sensor.u_s_air_quality_index') }} </font></center>
  - type: conditional
    conditions:
      - entity: sensor.u_s_air_pollution_level
        state: hazardous
    card:
      type: markdown
      content: >-
        <center><img src='/local/hazardous-icon.svg' width='50%'><BR>

        <font size = 4px> The Air Quality Today Is  <font color = red> HAZARDOUS
        </font></font>


        The AQI is: <font size = 4px color = green> {{
        states('sensor.u_s_air_quality_index') }} </font></center>