Lovelace: Decluttering Card

[Dozent]

Created file lovelace-ui.yaml,
/config/lovelace-ui.yaml

resources:
  - url: /local/decluttering-card.js
    type: module
    
decluttering_templates:
  air_purifier_control_button_template:
    card:
      color: 'rgba(255, 255, 255, 0)'
      color_type: card
      icon: 'mdi:[[icon]]'
      state:
        - operator: template
          styles:
            card:
              - color: var(--primary-color)
          value: |
            [[[ return [[condition]] ]]]
        - operator: default
          styles:
            card:
              - color: 'rgba(150,150,150, 1.0)'
      styles:
        card:
          - height: 50px
          - color: 'rgba(150, 150, 150, 1.0)'
          - box-shadow: none
      tap_action:
        action: call-service
        service: '[[svc_name]]'
        service_data: '[[svc_data]]'
      type: 'custom:button-card'
  air_purifier_status_button_template:
    card:
      color: 'rgba(255, 255, 255, 0)'
      color_type: card
      entity: '[[entity]]'
      show_icon: false
      show_name: true
      show_state: true
      size: 30%
      styles:
        card:
          - height: 70px
          - box-shadow: none
          - padding: 8% 0px 4% 0px
        grid:
          - grid-template-areas: '"s" "n"'
        name:
          - color: var(--primary-text-color)
          - font-size: 15px
          - align-self: start
        state:
          - color: var(--primary-text-color)
          - padding-left: 10px
          - font-size: 20px
          - font-weight: bold
          - align-self: end
      tap_action:
        action: '[[action]]'
      type: 'custom:button-card'

Сreate a manual card

cards:
  - cards:
      - template: air_purifier_status_button_template
        type: 'custom:decluttering-card'
        variables:
          - entity: sensor.air_purifier_filter_remaining
          - action: none
      - template: air_purifier_status_button_template
        type: 'custom:decluttering-card'
        variables:
          - entity: sensor.air_purifier_motor_speed
          - action: none
    type: horizontal-stack
  - cards:
      - template: air_purifier_control_button_template
        type: 'custom:decluttering-card'
        variables:
          - icon: power-standby
          - condition: 'states[''fan.xiaomi_miio_device''].state === ''on'''
          - svc_name: fan.toggle
          - svc_data:
              entity_id: fan.xiaomi_miio_device
      - template: air_purifier_control_button_template
        type: 'custom:decluttering-card'
        variables:
          - icon: weather-night
          - condition: 'states[''fan.xiaomi_miio_device''].attributes.speed === ''Silent'''
          - svc_name: fan.set_speed
          - svc_data:
              entity_id: fan.xiaomi_miio_device
              speed: Silent
      - template: air_purifier_control_button_template
        type: 'custom:decluttering-card'
        variables:
          - icon: circle-slice-3
          - condition: >-
              (states['fan.xiaomi_miio_device'].attributes.speed === 'Favorite'
              && states['fan.xiaomi_miio_device'].attributes.favorite_level ==
              4)
          - svc_name: script.air_purifier_set_favorite
          - svc_data:
              fav_level: 4
      - template: air_purifier_control_button_template
        type: 'custom:decluttering-card'
        variables:
          - icon: circle-slice-4
          - condition: >-
              (states['fan.xiaomi_miio_device'].attributes.speed === 'Favorite'
              && states['fan.xiaomi_miio_device'].attributes.favorite_level ==
              8)
          - svc_name: script.air_purifier_set_favorite
          - svc_data:
              fav_level: 8
      - template: air_purifier_control_button_template
        type: 'custom:decluttering-card'
        variables:
          - icon: circle-slice-6
          - condition: >-
              (states['fan.xiaomi_miio_device'].attributes.speed === 'Favorite'
              && states['fan.xiaomi_miio_device'].attributes.favorite_level ==
              12)
          - svc_name: script.air_purifier_set_favorite
          - svc_data:
              fav_level: 12
      - template: air_purifier_control_button_template
        type: 'custom:decluttering-card'
        variables:
          - icon: circle-slice-8
          - condition: >-
              (states['fan.xiaomi_miio_device'].attributes.speed === 'Favorite'
              && states['fan.xiaomi_miio_device'].attributes.favorite_level ==
              16)
          - svc_name: script.air_purifier_set_favorite
          - svc_data:
              fav_level: 16
      - template: air_purifier_control_button_template
        type: 'custom:decluttering-card'
        variables:
          - icon: brightness-auto
          - condition: 'states[''fan.xiaomi_miio_device''].attributes.speed === ''Auto'''
          - svc_name: fan.set_speed
          - svc_data:
              entity_id: fan.xiaomi_miio_device
              speed: Auto
    type: horizontal-stack
type: 'custom:vertical-stack-in-card'

Still no display. What am I doing wrong?

[Gaston]

It work perfectly. So simple, thank you

[Ildar_Gabdullin]

btw, sometimes there is no need to use decluttering card for custom:button-card since this card has its own variables.

[Ildar_Gabdullin]

Start with the 1st card, remove the 2nd one. Now you cannot even see an error, everything is clipped.
Not to mention a fact that the template should be short and simple at the beginning, then you may add all needed additional functionality after clearing all basic functionality (here - working as a template). Otherwise you are making a common mistake - building monstrous software full of bugs.

[Gaston]

Hi, I am new to decluttering Card. However, I have a some experience with templates for custom:button-card.

I am migrating some templates form Custom:Button-card to Custom:decluttering-card.

   name: '[[[ return states[variables.var_delay].state ]]]'

I try to set the name off an entity with the state of another entity. I try many things but cannot find the right format to do it in Custom:Decluttering-Card.
The above line of code works great within Button-Card template.

[Ildar_Gabdullin]

The repo seems to be abandoned.
Although the card works fine in most of cases, there are issues on GitHub and I do not observe any reaction from the Author.
Will be happy to be wrong here.

Found a new bug - Passing a jinjia template causes an error · Issue #60 · custom-cards/decluttering-card · GitHub

It is related to a “pass a template as a variable” case:

  decl_test_var_template:
    default:
      - VALUE: xxx
    card:
      type: markdown
      content: '[[VALUE]]'

type: vertical-stack
cards:
  - type: custom:decluttering-card
    template: decl_test_var_template
    variables:
      - VALUE: '{{ states(''sun.sun'') }}'
  - type: custom:decluttering-card
    template: decl_test_var_template
    variables:
      - VALUE: >-
          {{ states('sun.sun') }}
  - type: custom:decluttering-card
    template: decl_test_var_template
    variables:
      - VALUE: >-
          {% if false -%}
          {{states('zone.home')}}
          {%- else -%}
          {{states('sun.sun')}}
          {%- endif %}
  - type: custom:decluttering-card
    template: decl_test_var_template
    variables:
      - VALUE: >-
          {% if false -%}
            {{states('zone.home')}}
          {%- else -%}
            {{states('sun.sun')}}
          {%- endif %}

Update:
found a solution / workaround:

    type: custom:decluttering-card
    template: decl_test_var_template
    variables:
      - VALUE: "
          {% if false -%}
            {{states('zone.home')}}
          {%- else -%}
            {{states('sun.sun')}}
          {%- endif %}
          "

[Mariusthvdb (Marius)]

Have another issue. Think I mentioned it in the repo some time ago with another more complex card config but this is simple:

Have a set of 8 conditional (state binary on) buttons in a grid of 4.
When the binary is on, it fills the grid from the left.

Since most of the yaml of those 8 cards is identical except the entity , I also made it with a decluttering template.

However, using that always ?except when the actual 1st card is on ) leaves the first in the grid unused and shows the first ‘on’ card in the 2nd place holder in the grid …

Anyone seen the same and maybe fixed that?

[Ildar_Gabdullin]

Post a short code for the card, will check it.

[mhanley05]

Does anyone know if jinja can be used in the default values?
For example:

 custom_light_card_template:
    default:
      - icon: mdi:lightbulb
      - name: {{ state_attr('[[light-entity]]','friendly_name') }}
    card:
      type: custom:vertical-stack-in-card
      style: |
        :host {
        padding-left:0px;
        var(--card-background-color)
        }
      styles:
        '--chip-box-shadow': none
        '--chip-background': none
        '--chip-spacing': 0
      cards:
        - type: custom:mushroom-chips-card
          alignment: justify
          chips:
            - type: entity
              entity: '[[energy-entity]]'
              icon_color: '[[color]]'
        - type: custom:mushroom-light-card
          entity: '[[light-entity]]'
          icon: '[[icon]]'
          name: '[[name]]'

[mhanley05]

Damn, I just figured it out.
Just leave the name: null

Though it doesn’t look like jinja can be used in the default values. - Lovelace: Decluttering Card - #340 by Ildar_Gabdullin

decluttering_templates:
  custom_light_card_template:
    default:
      - icon: mdi:lightbulb
      - name: null
    card:
      type: custom:vertical-stack-in-card
      style: |
        :host {
        padding-left:0px;
        var(--card-background-color)
        }
      styles:
        '--chip-box-shadow': none
        '--chip-background': none
        '--chip-spacing': 0
      cards:
        - type: custom:mushroom-chips-card
          alignment: justify
          chips:
            - type: entity
              entity: '[[energy-entity]]'
              icon_color: '[[color]]'
        - type: custom:mushroom-light-card
          entity: '[[light-entity]]'
          icon: '[[icon]]'
          name: '[[name]]'

[Ildar_Gabdullin]

Passing a value into a template
(a small tutorial)

What types of values are considered:
– string (incl. multiline)
– jinjia template
– jinjia template which is used INSIDE another jinjia template
– card-mod style
– dictionary
– list

---

1. String:

1.1. A simple case - passing a value of some option:

decl_test_var_string:
  default:
    - VALUE: xxx
  card:
    type: entities
    entities:
      - entity: sun.sun
        name: '[[VALUE]]'

      - type: custom:decluttering-card
        template: decl_test_var_string

      - type: custom:decluttering-card
        template: decl_test_var_string
        variables:
          - VALUE: yyy

1.2. Passing a multiline string:
Need to use “\n” as line breakers:

decl_test_var_string_multiline:
  default:
    - VALUE: xxx
  card:
    type: markdown
    content: '[[VALUE]]'

      - type: custom:decluttering-card
        template: decl_test_var_string_multiline
        variables:
          - VALUE: xxx \n yyy \n zzz

But this does NOT work - using a pipe “|” to break a line:

      - type: custom:decluttering-card
        template: decl_test_var_string_multiline
        variables:
          - VALUE: |
              xxx
              yyy
              zzz

1.3. Passing a string into a string:

decl_test_var_string_into_string:
  default:
    - VALUE: xxx
  card:
    type: markdown
    content: >-
      String with a string: [[VALUE]]

      - type: custom:decluttering-card
        template: decl_test_var_string_into_string

      - type: custom:decluttering-card
        template: decl_test_var_string_into_string
        variables:
          - VALUE: yyy

---

2. jinjia template:
A template may be passed into a card which supports jinjia for some it’s option, like a “markdown” card.

decl_test_var_template:
  default:
    - VALUE: xxx
  card:
    type: markdown
    content: '[[VALUE]]'

2.1. Simple templates:

      - type: custom:decluttering-card
        template: decl_test_var_template

      - type: custom:decluttering-card
        template: decl_test_var_template
        variables:
          - VALUE: '{% set STATE = states(''sun.sun'') -%} {{STATE}}'

      - type: custom:decluttering-card
        template: decl_test_var_template
        variables:
          - VALUE: >-
              {% set STATE = states('sun.sun') -%}
              {{STATE}}

      - type: custom:decluttering-card
        template: decl_test_var_template
        variables:
          - VALUE: >-
              {% set VALUE = states('sun.sun') -%}
              Current is {{VALUE}}

2.2. Multiline template:
This does NOT work - with using a pipe “|” to “break” a line:

      - type: custom:decluttering-card
        template: decl_test_var_template
        variables:
          - VALUE: |-
              {% set VALUE = states('sun.sun') -%}
              Current is {{VALUE}}
              Hello!

You need to use “\n” or “< br >” to “break” a line:

      - type: custom:decluttering-card
        template: decl_test_var_template
        variables:
          - VALUE: >-
              {% set VALUE = states('sun.sun') -%}
              Current is {{VALUE}}
              \n
              Hello!

      - type: custom:decluttering-card
        template: decl_test_var_template
        variables:
          - VALUE: >-
              {% set VALUE = states('sun.sun') -%}
              Current is {{VALUE}}
              <br>
              Hello!

2.3. Template with conditions.
Actually all templates are similar, there is no “templates w/o conditions”, “templates with conditions”, … But this example is provided to demonstrate some trick.

This code works:

      - type: custom:decluttering-card
        template: decl_test_var_template
        variables:
          - VALUE: >-
              {% if false -%}
              {{states('zone.home')}}
              {%- else -%}
              {{states('sun.sun')}}
              {%- endif %}

But this does not - see indents inside a template:

      - type: custom:decluttering-card
        template: decl_test_var_template
        variables:
          - VALUE: >-
              {% if false -%}
                {{states('zone.home')}}
              {%- else -%}
                {{states('sun.sun')}}
              {%- endif %}

These indents help to structure templates, they are not supposed to cause any troubles.
Although this code works fine in “Dev tools → Template” and everywhere in Lovelace, these “indents” cause an error in this particular case (described here, here).
But there is a workaround - place the whole template into double quotation marks:

      - type: custom:decluttering-card
        template: decl_test_var_template
        variables:
          - VALUE: "
              {% if false -%}
                {{states('zone.home')}}
              {%- else -%}
                {{states('sun.sun')}}
              {%- endif %}
              "

---

3. jinjia template which is used INSIDE another jinjia template:
Consider this code:

{% set STATE = states(xxxx) -%}
{%- if STATE | int(default=0) < .... -%}
  {{ ... }}
{%- else -%}
  {{ ... }}
{%- endif %}

Assume the 1st line is

{% set STATE = '[[VALUE]]' -%}

where “VALUE” is a jinjia template "{% set SENSOR = 'sun.sun' -%} {{ states(SENSOR) }}" - and this code cannot work since templates cannot be passed into templates:

{% set STATE = {% set SENSOR = 'sun.sun' -%} {{ states(SENSOR) }} -%}

Luckily we got a new jinjia extension "ct_eval()" (check here & here) which “evaluates text as a template”.
Consider this decluttering-template:

decl_test_var_template_into_template:
  default:
    - VALUE: >-
        {{states('sun.sun')}}
  card:
    type: markdown
    content: |-
      {% set STATE = ct_eval("[[VALUE]]") -%}
      Current state is {{STATE}}
      Zone state is {{states('zone.home')}}

      - type: custom:decluttering-card
        template: decl_test_var_template_into_template

      - type: custom:decluttering-card
        template: decl_test_var_template_into_template
        variables:
          - VALUE: yyy

      - type: custom:decluttering-card
        template: decl_test_var_template_into_template
        variables:
          - VALUE: '{{states(''person.ildar'')}}'

      - type: custom:decluttering-card
        template: decl_test_var_template_into_template
        variables:
          - VALUE: >-
              {{states('person.ildar')}}

      - type: custom:decluttering-card
        template: decl_test_var_template_into_template
        variables:
          - VALUE: >-
              {% if true -%}
              {{states('zone.home')}}
              {%- else -%}
              {{states('sun.sun')}}
              {%- endif %}

This code with added indentations does not work - same reasons as it was described above:

      - type: custom:decluttering-card
        template: decl_test_var_template_into_template
        variables:
          - VALUE: |-
              {% if true -%}
                {{states('zone.home')}}
              {%- else -%}
                {{states('sun.sun')}}
              {%- endif %}

But workaround is same - double quotation marks:

      - type: custom:decluttering-card
        template: decl_test_var_template_into_template
        variables:
          - VALUE: "
              {% if false -%}
                {{states('zone.home')}}
              {%- else -%}
                {{states('sun.sun')}}
              {%- endif %}
              "

---

4. card-mod style:

decl_test_var_style:
  default:
    - STYLE: 'ha-card { color: magenta; }'
  card:
    type: entities
    title: Title
    entities:
      - entity: sun.sun
        secondary_info: last-changed
      - entity: sensor.season
        secondary_info: last-changed
      - entity: person.ildar
        secondary_info: last-changed
      - entity: sensor.processor_use
        secondary_info: last-changed
    card_mod:
      style: '[[STYLE]]'

      - type: custom:decluttering-card
        template: decl_test_var_style
      - type: custom:decluttering-card
        template: decl_test_var_style
        variables:
          - STYLE:
              hui-simple-entity-row:
                $ hui-generic-entity-row $ .info.pointer .secondary: |
                  ha-relative-time {
                    color: red !important;
                  }
              hui-sensor-entity-row:
                $ hui-generic-entity-row $ .info.pointer .secondary: |
                  ha-relative-time {
                    color: orange !important;
                  }
              .: |
                .card-header .name {
                  color: yellow;
                } 
                ha-card {
                  background: lightblue;
                }

---

5. Dictionary:

decl_test_var_dict:
  default:
    - ENTITY:
        entity: zone.home
        name: my zone
  card:
    type: entities
    entities:
      - sun.sun
      - '[[ENTITY]]'

      - type: custom:decluttering-card
        template: decl_test_var_dict

      - type: custom:decluttering-card
        template: decl_test_var_dict
        variables:
          - ENTITY:
              entity: weather.home_met
              name: Weather (home)

Unfortunately, I do not know a way to add an element(s) into a dictionary - consider this example:
– a decluttering-template is an Entities card;
– one row is defined by a dictionary ({‘entity’: ‘sun.sun’, ‘name’:“my sun”});
– an input variable is a dictionary with other options ({‘type’: ‘attribute’, ‘attribute’:“elevation”});
– you can use an input variable-dictionary to define the WHOLE row and you cannot merge two dictionaries to set additional options.

Also, I do not know a way to address elements inside a dictionary-variable like "VALUE['subvalue_a']" or "VALUE.subvalue_a"(although similar operations are available for dictionaries, but not inside the decluttering-card for variables).

---

6. Lists:

decl_test_var_list:
  default:
    - ENTITIES:
        - sun.sun
        - zone.home
  card:
    type: entities
    entities: '[[ENTITIES]]'

      - type: custom:decluttering-card
        template: decl_test_var_list

      - type: custom:decluttering-card
        template: decl_test_var_list
        variables:
          - ENTITIES:
              - entity: weather.home_met
                name: Weather (home)
              - entity: sensor.processor_use
                name: CPU load

Unfortunately I do not know a way to address an element in the list like "VALUE[0]" - consider this example:
– a card is an Entities card;
– an input variable-list contains a list of entities;
– you cannot use 1st entity for the 1st row, 2nd element - for the 2nd row, …

[Mariusthvdb (Marius)]

thx.
consider this grid:

    - type: grid
      columns: 4
      cards:

#decluttering causes first grid column to be empty

#        - type: custom:decluttering-card
#          template: celebration
#          variables:
#            - event: verjaardag_1
#
#        - type: custom:decluttering-card
#          template: celebration
#          variables:
#            - event: verjaardag_2
#
#        - type: custom:decluttering-card
#          template: celebration
#          variables:
#            - event: verjaardag_3
#
#        - type: custom:decluttering-card
#          template: celebration
#          variables:
#            - event: verjaardag_4
#
#        - type: custom:decluttering-card
#          template: celebration
#          variables:
#            - event: verjaardag_5
#
#          etcetcetc

        - type: conditional
          conditions:
            - entity: binary_sensor.verjaardag_1
              state: 'on'
          card:
            type: custom:button-card
            template: button_feest_alert
            entity: binary_sensor.verjaardag_1

        - type: conditional
          conditions:
            - entity: binary_sensor.verjaardag_2
              state: 'on'
          card:
            type: custom:button-card
            template: button_feest_alert
            entity: binary_sensor.verjaardag_2

        - type: conditional
          conditions:
            - entity: binary_sensor.verjaardag_3
              state: 'on'
          card:
            type: custom:button-card
            template: button_feest_alert
            entity: binary_sensor.verjaardag_3
etcetc

and this decluttering_template:

card:
  type: conditional
  conditions:
    - entity: binary_sensor.[[event]]
      state: 'on'
  card:
    type: custom:button-card
    template: button_feest_alert
    entity: binary_sensor.[[event]]

ive seen this in more spots in my config, but always shrug and make it work another way. this seems too straightforward not to have another look though, so if you can spot an issue: please!

[Mariusthvdb (Marius)]

Dont think you mentioned this in your wonderful post (thank you!) above, but I was pleasantly surprised the other day we can even drop in a complete entities list from a calling card.

Consider this deculttering, and especially note the bottom

  entities:
    '[[entities]]'

in:

default:
  - trigger_state: 'on'
card:
  type: picture-glance
  card_mod:
    style: |
      ha-card {
        border: {{'1em solid red' if is_state('[[trigger_id]]','[[trigger_state]]')
                else 'none'}};
      }
      .box div:nth-child(1) .wrapper {
        pointer-events: none;
      }
  entity: '[[main_id]]'
#   title: '[[title]]'
  show_state: true
#   state_color: true # picture-glance does Not use state_color!! 
  state_filter:
    'off': grayscale(80%)
    'unavailable': grayscale(100%)
#   area: '[[area]]'
  image: /local/images/areas/[[image]]
  aspect_ratio: 100%
  tap_action: none
  hold_action:
    action: navigate
    navigation_path: /ui-sub-views/[[path]]
  double_tap_action:
    action: toggle
  entities:
    '[[entities]]'

and call this with something like:

      - type: custom:decluttering-card
        template: picture_glance_area
        variables:
          - main_id: light.laundry_ceiling
          - trigger_id: binary_sensor.laundry_sensor_motion
          - image: bijkeuken.jpg
          - path: bijkeuken
# this complete entities object gets injected 
          - entities:
              - entity: sensor.laundry_sensor_temperature
              - entity: sensor.laundry_sensor_illuminance
              - entity: binary_sensor.back_door
              - entity: switch.boiler_bijkeuken
                <<: &none
                  tap_action:
                    action: none
                  hold_action:
                    action: none
                  double_tap_action:
                    action: none

      - type: custom:decluttering-card
        template: picture_glance_area
        variables:
          - main_id: light.patchboard_attic
          - trigger_id: binary_sensor.lekkage_op_zolder
          - image: zolder_living_klein.jpg
          - path: zolder
          - entities:
              - entity: sensor.attic_sensor_temperature
              - entity: sensor.attic_sensor_illuminance
              - entity: binary_sensor.smart_co_alarm_zolder_carbon_monoxide_sensor
              - entity: binary_sensor.attic_heater_flood_sensor_water_alarm_water_leak_detected
              - entity: binary_sensor.attic_flood_sensor_water_alarm_water_leak_detected
              - entity: switch.cv_zolder
                <<: *none

I never realized that would work, but needed to find a way to have the same decluttering and take care of different entities listings… it simply does!

(only thing this does Not do is color the icons using state_color: true but that is an issue with the picture-glance card, and Ive filed a FR/discussion to add that, really ugly those whitish icons everywhere… but, besides the point for this topic )

[Ildar_Gabdullin]

@Mariusthvdb

  entities:
    '[[entities]]'

This is a “list-variable” case described in my post.
In my setup I usually use this notation (probably gives same yaml output):

  entities: '[[entities]]'

even this

  entities: '[[LIST_ENTITIES]]'

to prevent mixing with options’ names, where “LIST_”, “VALUE_”, “INPUT_”, “SENSOR_”, “DICT_” prefixes used to define a type of a variable (and “STYLE” is always for card-mod style).

[Ildar_Gabdullin]

@Mariusthvdb

consider this grid:

I’ll check it tonight.

[Mariusthvdb (Marius)]

right, I missed you mentioning it, its a big post I now see it under 6.
most important part for me is that we can change the number of entities and are not fixed to a predefined list length.

and yes the position is mostly on the same line. However, I always mimic a verbose post, and since we use that list notation

entities:
  - entity1
  - entity2

I mimicked that with:

  entities:
    '[[entities]]'

Aware you use the CAPS in your vars It’s just not for my taste, and of no further consequence.

@Ildar_Gabdullin

I’ll check it tonight.

thanks!

[Gaston]

Got it

                name: >-
                  [[[ return
                  states['input_number.autolock_delay_[[subject]]'].state; ]]]
         

[Ildar_Gabdullin]

@mhanley05

Though it doesn’t look like jinja can be used in the default values

My statement was a bit hasty, actually.
It depends:
– a template for a “default” value of some variable cannot be resolved BEFORE using this variable;
– it may be resolved WHEN using this variable: if an option supports templates - then the template is resolved, otherwise - no.
Consider this decluttering-template:

  decl_test_var_template_2:
    default:
      - VALUE: >-
           {{ states('sun.sun') }}
    card:
      type: vertical-stack
      cards:
        - type: markdown
          content: '[[VALUE]]'
        - type: entities
          title: '[[VALUE]]'
          entities:
            - zone.home

where the variable is used for the “content” option (does support jinjia) and for the “title” option (does not support jinjia).

type: vertical-stack
cards:
  - type: custom:decluttering-card
    template: decl_test_var_template_2
    
  - type: custom:decluttering-card
    template: decl_test_var_template_2
    variables:
      - VALUE: xxx
      
  - type: custom:decluttering-card
    template: decl_test_var_template_2
    variables:
      - VALUE: >-
          {{ states('device_tracker.iiyama') }}

Check this long read also.

[Ildar_Gabdullin]

Template:

  decl_test_var_marius:
    card:
      type: conditional
      conditions:
        - entity: input_boolean.[[event]]
          state: 'on'
      card:
        type: custom:button-card
        size: 20%
        entity: input_boolean.[[event]]

Card:

type: vertical-stack
cards:
  - type: entities
    entities:
      - input_boolean.test_boolean
      - input_boolean.test_boolean_2
      ...
      - input_boolean.test_boolean_8

  - type: grid
    columns: 4
    square: false
    cards:
      - type: custom:decluttering-card
        template: decl_test_var_marius
        variables:
          - event: test_boolean
      - type: custom:decluttering-card
        template: decl_test_var_marius
        variables:
          - event: test_boolean_2

      ...

      - type: custom:decluttering-card
        template: decl_test_var_marius
        variables:
          - event: test_boolean_8

So far seems OK.

Now comment the “square” option - and we got a gap:

And yes - this does not happen w/o decluttering-card:

  - type: grid
    columns: 4
    _square: false
    cards:
      - type: conditional
        conditions:
          - entity: input_boolean.test_boolean
            state: 'on'
        card:
          type: custom:button-card
          size: 20%
          entity: input_boolean.test_boolean
      - type: conditional
        conditions:
          - entity: input_boolean.test_boolean_2
            state: 'on'
        card:
          type: custom:button-card
          size: 20%
          entity: input_boolean.test_boolean_2
      ...
      - type: conditional
        conditions:
          - entity: input_boolean.test_boolean_8
            state: 'on'
        card:
          type: custom:button-card
          size: 20%
          entity: input_boolean.test_boolean_8

Cannot explain it…

[Mariusthvdb (Marius)]

thanks for confirming…

I had not noticed the square option difference, will have a look. It makes it even stranger, because all of my buttons Are squared themselves via their setting aspect_ratio: 1. (Moreover, the square: true option is default, so I never use it unless needing square: false … Realize you used non squared buttons above, just stating the obvious probably) In any case, it should Not make a difference in my config…?

btw, I had another Grid/Decluttering issue some time ago: decluttering inside a core grid card behaves oddly, changes size of the grid tile · Issue #59 · custom-cards/decluttering-card · GitHub
They just dont play nicely