Lovelace: Decluttering Card

Share your Projects! Dashboards & Frontend
4

One example where I’m using that card in my config (I have 8 covers):
image

Each cover is actually composed of 5 elements in a custom:vertical-stack-in-card:

  • 3 custom:button-card on top (each one has a button-card specific template associated to it, that’s a feature of the button-card itself)
  • 1 custom:slider-entity-row in the middle associated with custom:card-modder
  • 1 custom:button-card at the bottom

In ui-lovelace.yaml:

cover_button:
  type: custom:vertical-stack-in-card
  cards:
    - type: horizontal-stack
      cards:
        - type: custom:button-card
          size: '[[size]]'
          entity: '[[entity]]'
          template: cover_up
        - type: custom:button-card
          size: '[[size]]'
          entity: '[[entity]]'
          template: cover_stop
        - type: custom:button-card
          size: '[[size]]'
          entity: '[[entity]]'
          template: cover_down
    - type: custom:card-modder
      extra_styles: >
        .card-content {
          padding: 0px 0px
        }
      card:
        type: entities
        entities:
          - type: custom:slider-entity-row
            entity: '[[entity]]'
            full_row: true
            hide_state: true
    - type: custom:button-card
      name: '[[name]]'
      template: cover_name

Used like this:

    - type: horizontal-stack
      cards:
        - type: custom:decluttering-card
          template: cover_button
          variables:
            - size: 80%
            - entity: cover.cover_1
            - name: Window 1

        - type: custom:decluttering-card
          template: cover_button
          variables:
            - size: 80%
            - entity: cover.cover_2
            - name: Window 2

        - type: custom:decluttering-card
          template: cover_button
          variables:
            - size: 80%
            - entity: cover.cover_3
            - name: Window 3
7 Likes