Skip to main content

Air Purifier Card

The Air Purifier Card is used for controlling your Air Purifier.

Air Purifier Light Air Purifier Dark

Usage​

📄 templates/custom_card_air_purifier/custom_card_air_purifier.yaml
type: "custom:button-card"
template: custom_card_air_purifier
entity: fan.air_purifier
name: Air Purifier

Template​

Template
/dashboard/HaCasa/templates/custom_card_air_purifier/custom_card_air_purifier.yaml
custom_card_air_purifier:
  triggers_update: "[[[ return entity.entity_id ]]]"
  show_label: true
  show_state: true
  show_icon: false
  state_display: "[[[ return helpers.localize(entity) ]]]"
  label: >
    [[[
      if (entity.state != "unavailable") {
        var pct = (entity.attributes.percentage != null) ? entity.attributes.percentage :
          "0";
        return pct + '<sup style="font-size: 40px;">%</sup>'
      } 
    ]]]
  styles:
    grid:
      - grid-template-areas: >
          'l buttons'
          'n buttons'
          's buttons'
      - grid-template-rows: "min-content min-content"
    card:
      - padding: "20px"
      - min-height: "120px"
    name:
      - justify-self: "start"
      - align-self: "start"
      - 
      - font-weight: 500
    label:
      - justify-self: "start"
      - align-self: "start"
      - font-family: "Montserrat"
      - font-weight: 700
      - font-size: "5em"
    state:
      - justify-self: "start"
      - color: "var(--color-dark-gray)"
      - font-size: "12px"
      - font-family: "Montserrat"
  custom_fields:
    buttons:
      card:
        type: "custom:button-card"
        styles:
          grid:
            - grid-template-areas: "'item1' 'item2'"
            - row-gap: "3rem"
          card:
            - padding: "10px"
            - background: "var(--contrast-background)"
        custom_fields:
          item1:
            card:
              type: "custom:button-card"
              icon: "mdi:chevron-up"
              styles: &humidifier_btn
                icon:
                  - width: "40px"
                card:
                  - box-shadow: "none"
                  - background: "none"
              tap_action:
                action: "call-service"
                service: "fan.increase_speed"
                target:
                  entity_id: '[[[ return entity.entity_id ]]]'
          item2:
            card:
              type: "custom:button-card"
              icon: "mdi:chevron-down"
              styles: *humidifier_btn
              tap_action:
                action: "call-service"
                service: "fan.decrease_speed"
                target:
                  entity_id: '[[[ return entity.entity_id ]]]'
  state:
    - value: "on"
      styles:
        card:
          - background: var(--color-green)
        name:
          - color: var(--color-white)
        label:
          - color: var(--color-white)
        state:
          - color: var(--color-white)
  hold_action:
    action: "more-info"