Lovelace: Button card

[Jimmy_Berglund]

yeh this is how ive done the new code. But i still have the problem when uting Entities with input_select together with Custom buttons together. So the problem is always after the Entities were ever i put it.

cards:
  - content: |
      ## <ha-icon icon="mdi:remote"></ha-icon> Vardagsrum
    type: markdown
  - cards:
      - card: null
        color: var(--secondary-text-color)
        color_type: icon
        entity: switch.appletv
        icon: 'mdi:apple'
        name: ' '
        size: 25%
        style: |
          :active ;
          ha-card {
              background-color: var(--paper-item-icon-active-color);
              transition: .05s;
          }
        styles:
          card:
            - border-radius: 30px
            - height: 53px
          label:
            - color: gray
            - font-size: 9px
            - justify-self: start
            - padding: 0px 5px
          name:
            - font-size: 12px
            - padding: 0px 0px
        tap_action:
          action: call-service
          service: remote.turn_on
          service_data:
            activity: Apple tv
            entity_id: remote.vardagsrum
        type: 'custom:button-card'
      - card: null
        color: var(--secondary-text-color)
        color_type: icon
        entity: switch.htpc
        icon: 'mdi:desktop-classic'
        name: ' '
        size: 25%
        style: |
          :active ;
          ha-card {
              background-color: var(--paper-item-icon-active-color);
              transition: .05s;
          }
        styles:
          card:
            - border-radius: 30px
            - height: 53px
          label:
            - color: gray
            - font-size: 9px
            - justify-self: start
            - padding: 0px 5px
          name:
            - font-size: 12px
            - padding: 0px 0px
        tap_action:
          action: call-service
          service: remote.turn_on
          service_data:
            activity: Htpc
            entity_id: remote.vardagsrum
        type: 'custom:button-card'
      - card: null
        color: var(--secondary-text-color)
        color_type: icon
        entity: switch.tv
        icon: 'fas:tv'
        name: ' '
        size: 25%
        style: |
          :active ;
          ha-card {
              background-color: var(--paper-item-icon-active-color);
              transition: .05s;
          }
        styles:
          card:
            - border-radius: 30px
            - height: 53px
          label:
            - color: gray
            - font-size: 9px
            - justify-self: start
            - padding: 0px 5px
          name:
            - font-size: 12px
            - padding: 0px 0px
        tap_action:
          action: call-service
          service: remote.turn_on
          service_data:
            activity: Tv
            entity_id: remote.vardagsrum
        type: 'custom:button-card'
      - card: null
        color: var(--secondary-text-color)
        color_type: icon
        entity: switch.ps4
        icon: 'mdi:playstation'
        name: ' '
        size: 25%
        style: |
          :active ;
          ha-card {
              background-color: var(--paper-item-icon-active-color);
              transition: .05s;
          }
        styles:
          card:
            - border-radius: 30px
            - height: 53px
          label:
            - color: gray
            - font-size: 9px
            - justify-self: start
            - padding: 0px 5px
          name:
            - font-size: 12px
            - padding: 0px 0px
        tap_action:
          action: call-service
          service: remote.turn_on
          service_data:
            activity: PS4
            entity_id: remote.vardagsrum
        type: 'custom:button-card'
      - card: null
        color: var(--red)
        color_off: var(--primary-text-color)
        color_type: icon
        icon: 'mdi:power'
        name: ' '
        size: 25%
        style: |
          :active ;
          ha-card {
              background-color: var(--paper-item-icon-active-color);
              transition: .05s;
          }
        styles:
          card:
            - border-radius: 30px
            - height: 53px
          label:
            - color: gray
            - font-size: 9px
            - justify-self: start
            - padding: 0px 5px
          name:
            - font-size: 12px
            - padding: 0px 0px
        tap_action:
          action: call-service
          service: remote.turn_off
          service_data:
            entity_id: remote.vardagsrum
        type: 'custom:button-card'
    type: horizontal-stack
  - entities:
      - input_select.freetoair
    type: entities
  - cards:
      - card:
          color: var(--secondary-text-color)
          color_type: icon
          icon: 'mdi:exit-to-app'
          name: HDMI 1
          show_icon: false
          size: 25%
          style: |
            :active ;
            ha-card {
                background-color: var(--paper-item-icon-active-color);
                transition: .05s;
            }
          styles:
            card:
              - border-radius: 30px
              - height: 53px
            label:
              - color: gray
              - font-size: 9px
              - justify-self: start
              - padding: 0px 5px
            name:
              - font-weight: bold
              - font-size: 15px
              - padding: 0px 0px
          tap_action:
            action: call-service
            service: script.turn_on
            service_data:
              entity_id: script.hdmi1
          type: 'custom:button-card'
        conditions:
          - entity: sensor.harmony_activity
            state_not: PowerOff
        type: conditional
      - card:
          color: var(--primary-text-color)
          color_type: icon
          icon: 'mdi:chevron-up'
          name: HDMI 2
          show_icon: false
          size: 25%
          style: |
            :active ;
            ha-card {
                background-color: var(--paper-item-icon-active-color);
                transition: .05s;
            }
          styles:
            card:
              - border-radius: 30px
              - height: 53px
            label:
              - color: gray
              - font-size: 9px
              - justify-self: start
              - padding: 0px 5px
            name:
              - font-weight: bold
              - font-size: 15px
              - padding: 0px 0px
          tap_action:
            action: call-service
            service: script.turn_on
            service_data:
              entity_id: script.hdmi2
          type: 'custom:button-card'
        conditions:
          - entity: sensor.harmony_activity
            state_not: PowerOff
        type: conditional
      - card:
          color: var(--primary-text-color)
          color_type: icon
          icon: 'mdi:menu'
          name: HDMI 3
          show_icon: false
          size: 25%
          style: |
            :active ;
            ha-card {
                background-color: var(--paper-item-icon-active-color);
                transition: .05s;
            }
          styles:
            card:
              - border-radius: 30px
              - height: 53px
            label:
              - color: gray
              - font-size: 9px
              - justify-self: start
              - padding: 0px 5px
            name:
              - font-weight: bold
              - font-size: 15px
              - padding: 0px 0px
          tap_action:
            action: call-service
            service: script.turn_on
            service_data:
              entity_id: script.hdmi3
          type: 'custom:button-card'
        conditions:
          - entity: sensor.harmony_activity
            state_not: PowerOff
        type: conditional
      - card:
          color: var(--primary-text-color)
          color_type: icon
          icon: 'mdi:volume-plus'
          name: HDMI 4
          show_icon: false
          size: 25%
          style: |
            :active ;
            ha-card {
                background-color: var(--paper-item-icon-active-color);
                transition: .05s;
            }
          styles:
            card:
              - border-radius: 30px
              - height: 53px
            label:
              - color: gray
              - font-size: 9px
              - justify-self: start
              - padding: 0px 5px
            name:
              - font-weight: bold
              - font-size: 15px
              - padding: 0px 0px
          tap_action:
            action: call-service
            service: script.turn_on
            service_data:
              entity_id: script.hdmi4
          type: 'custom:button-card'
        conditions:
          - entity: sensor.harmony_activity
            state_not: PowerOff
        type: conditional
    type: horizontal-stack
  - cards:
      - card:
          color: var(--secondary-text-color)
          color_type: icon
          icon: 'mdi:exit-to-app'
          size: 25%
          style: |
            :active ;
            ha-card {
                background-color: var(--paper-item-icon-active-color);
                transition: .05s;
            }
          styles:
            card:
              - border-radius: 30px
              - height: 53px
            label:
              - color: gray
              - font-size: 9px
              - justify-self: start
              - padding: 0px 5px
            name:
              - font-size: 12px
              - padding: 0px 0px
          tap_action:
            action: call-service
            service: script.turn_on
            service_data:
              entity_id: script.harmony_exit
          type: 'custom:button-card'
        conditions:
          - entity: sensor.harmony_activity
            state_not: PowerOff
        type: conditional
      - card:
          color: var(--primary-text-color)
          color_type: icon
          icon: 'mdi:chevron-up'
          size: 25%
          style: |
            :active ;
            ha-card {
                background-color: var(--paper-item-icon-active-color);
                transition: .05s;
            }
          styles:
            card:
              - border-radius: 30px
              - height: 53px
            label:
              - color: gray
              - font-size: 9px
              - justify-self: start
              - padding: 0px 5px
            name:
              - font-size: 12px
              - padding: 0px 0px
          tap_action:
            action: call-service
            service: script.turn_on
            service_data:
              entity_id: script.harmony_upp
          type: 'custom:button-card'
        conditions:
          - entity: sensor.harmony_activity
            state_not: PowerOff
        type: conditional
      - card:
          color: var(--secondary-text-color)
          color_type: icon
          icon: 'mdi:menu'
          size: 25%
          style: |
            :active ;
            ha-card {
                background-color: var(--paper-item-icon-active-color);
                transition: .05s;
            }
          styles:
            card:
              - border-radius: 30px
              - height: 53px
            label:
              - color: gray
              - font-size: 9px
              - justify-self: start
              - padding: 0px 5px
            name:
              - font-size: 12px
              - padding: 0px 0px
          tap_action:
            action: call-service
            service: script.turn_on
            service_data:
              entity_id: script.harmony_menu
          type: 'custom:button-card'
        conditions:
          - entity: sensor.harmony_activity
            state_not: PowerOff
        type: conditional
      - card:
          color: var(--primary-text-color)
          color_type: icon
          double_tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: VolumeUp
              device: 52940343
              entity_id: remote.vardagsrum
          icon: 'mdi:volume-plus'
          size: 25%
          style: |
            :active ;
            ha-card {
                background-color: var(--paper-item-icon-active-color);
                transition: .05s;
            }
          styles:
            card:
              - border-radius: 30px
              - height: 53px
            label:
              - color: gray
              - font-size: 9px
              - justify-self: start
              - padding: 0px 5px
            name:
              - font-size: 12px
              - padding: 0px 0px
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: VolumeUp
              device: 52940343
              entity_id: remote.vardagsrum
          type: 'custom:button-card'
        conditions:
          - entity: sensor.harmony_activity
            state_not: PowerOff
        type: conditional
    type: horizontal-stack
  - cards:
      - card:
          color: var(--primary-text-color)
          color_type: icon
          icon: 'mdi:chevron-left'
          size: 25%
          style: |
            :active ;
            ha-card {
                background-color: var(--paper-item-icon-active-color);
                transition: .05s;
            }
          styles:
            card:
              - border-radius: 30px
              - height: 53px
            label:
              - color: gray
              - font-size: 9px
              - justify-self: start
              - padding: 0px 5px
            name:
              - font-size: 12px
              - padding: 0px 0px
          tap_action:
            action: call-service
            service: script.turn_on
            service_data:
              entity_id: script.harmony_left
          type: 'custom:button-card'
        conditions:
          - entity: sensor.harmony_activity
            state_not: PowerOff
        type: conditional
      - card:
          color: var(--primary-text-color)
          color_type: icon
          icon: 'mdi:smoke-detector'
          size: 25%
          style: |
            :active ;
            ha-card {
                background-color: var(--paper-item-icon-active-color);
                transition: .05s;
            }
          styles:
            card:
              - border-radius: 30px
              - height: 53px
            label:
              - color: gray
              - font-size: 9px
              - justify-self: start
              - padding: 0px 5px
            name:
              - font-size: 12px
              - padding: 0px 0px
          tap_action:
            action: call-service
            service: script.turn_on
            service_data:
              entity_id: script.harmony_ok
          type: 'custom:button-card'
        conditions:
          - entity: sensor.harmony_activity
            state_not: PowerOff
        type: conditional
      - card:
          color: var(--primary-text-color)
          color_type: icon
          icon: 'mdi:chevron-right'
          size: 25%
          style: |
            :active ;
            ha-card {
                background-color: var(--paper-item-icon-active-color);
                transition: .05s;
            }
          styles:
            card:
              - border-radius: 30px
              - height: 53px
            label:
              - color: gray
              - font-size: 9px
              - justify-self: start
              - padding: 0px 5px
            name:
              - font-size: 12px
              - padding: 0px 0px
          tap_action:
            action: call-service
            service: script.turn_on
            service_data:
              entity_id: script.harmony_right
          type: 'custom:button-card'
        conditions:
          - entity: sensor.harmony_activity
            state_not: PowerOff
        type: conditional
      - card:
          color: var(--primary-text-color)
          color_type: icon
          double_tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: VolumeDown
              device: 52940343
              entity_id: remote.vardagsrum
          icon: 'mdi:volume-minus'
          size: 25%
          style: |
            :active ;
            ha-card {
                background-color: var(--paper-item-icon-active-color);
                transition: .05s;
            }
          styles:
            card:
              - border-radius: 30px
              - height: 53px
            label:
              - color: gray
              - font-size: 9px
              - justify-self: start
              - padding: 0px 5px
            name:
              - font-size: 12px
              - padding: 0px 0px
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: VolumeDown
              device: 52940343
              entity_id: remote.vardagsrum
          type: 'custom:button-card'
        conditions:
          - entity: sensor.harmony_activity
            state_not: PowerOff
        type: conditional
    type: horizontal-stack
  - cards:
      - card:
          color: var(--secondary-text-color)
          color_type: icon
          icon: 'mdi:volume-off'
          size: 25%
          style: |
            :active ;
            ha-card {
                background-color: var(--paper-item-icon-active-color);
                transition: .05s;
            }
          styles:
            card:
              - border-radius: 30px
              - height: 53px
            label:
              - color: gray
              - font-size: 9px
              - justify-self: start
              - padding: 0px 5px
            name:
              - font-size: 12px
              - padding: 0px 0px
          tap_action:
            action: call-service
            service: script.turn_on
            service_data:
              entity_id: script.harmony_mute
          type: 'custom:button-card'
        conditions:
          - entity: sensor.harmony_activity
            state_not: PowerOff
        type: conditional
      - card:
          color: var(--primary-text-color)
          color_type: icon
          icon: 'mdi:chevron-down'
          size: 25%
          style: |
            :active ;
            ha-card {
                background-color: var(--paper-item-icon-active-color);
                transition: .05s;
            }
          styles:
            card:
              - border-radius: 30px
              - height: 53px
            label:
              - color: gray
              - font-size: 9px
              - justify-self: start
              - padding: 0px 5px
            name:
              - font-size: 12px
              - padding: 0px 0px
          tap_action:
            action: call-service
            service: script.turn_on
            service_data:
              entity_id: script.harmony_ner
          type: 'custom:button-card'
        conditions:
          - entity: sensor.harmony_activity
            state_not: PowerOff
        type: conditional
      - card:
          color: var(--secondary-text-color)
          color_type: icon
          icon: 'mdi:keyboard-return'
          size: 25%
          style: |
            :active ;
            ha-card {
                background-color: var(--paper-item-icon-active-color);
                transition: .05s;
            }
          styles:
            card:
              - border-radius: 30px
              - height: 53px
            label:
              - color: gray
              - font-size: 9px
              - justify-self: start
              - padding: 0px 5px
            name:
              - font-size: 12px
              - padding: 0px 0px
          tap_action:
            action: call-service
            service: script.turn_on
            service_data:
              entity_id: script.harmony_prev
          type: 'custom:button-card'
        conditions:
          - entity: sensor.harmony_activity
            state_not: PowerOff
        type: conditional
      - card:
          color: var(--primary-text-color)
          color_type: icon
          icon: 'mdi:arrow-up-bold'
          size: 25%
          style: |
            :active ;
            ha-card {
                background-color: var(--paper-item-icon-active-color);
                transition: .05s;
            }
          styles:
            card:
              - border-radius: 30px
              - height: 53px
            label:
              - color: gray
              - font-size: 9px
              - justify-self: start
              - padding: 0px 5px
            name:
              - font-size: 12px
              - padding: 0px 0px
          tap_action:
            action: call-service
            service: script.turn_on
            service_data:
              entity_id: script.harmony_channel_up
          type: 'custom:button-card'
        conditions:
          - entity: sensor.harmony_activity
            state_not: PowerOff
        type: conditional
    type: horizontal-stack
  - cards:
      - card:
          color: var(--secondary-text-color)
          color_type: icon
          icon: 'mdi:gamepad-variant'
          size: 25%
          style: |
            :active ;
            ha-card {
                background-color: var(--paper-item-icon-active-color);
                transition: .05s;
            }
          styles:
            card:
              - border-radius: 30px
              - height: 53px
            label:
              - color: gray
              - font-size: 9px
              - justify-self: start
              - padding: 0px 5px
            name:
              - font-size: 12px
              - padding: 0px 0px
          tap_action:
            action: call-service
            service: script.turn_on
            service_data:
              entity_id: script.gamemode
          type: 'custom:button-card'
        conditions:
          - entity: sensor.harmony_activity
            state_not: PowerOff
        type: conditional
      - card:
          color: var(--secondary-text-color)
          color_type: icon
          icon: 'mdi:play-pause'
          size: 25%
          style: |
            :active ;
            ha-card {
                background-color: var(--paper-item-icon-active-color);
                transition: .05s;
            }
          styles:
            card:
              - border-radius: 30px
              - height: 53px
            label:
              - color: gray
              - font-size: 9px
              - justify-self: start
              - padding: 0px 5px
            name:
              - font-size: 12px
              - padding: 0px 0px
          tap_action:
            action: call-service
            service: script.turn_on
            service_data:
              entity_id: script.harmony_play
          type: 'custom:button-card'
        conditions:
          - entity: sensor.harmony_activity
            state_not: PowerOff
        type: conditional
      - card:
          color: var(--secondary-text-color)
          color_type: icon
          icon: 'mdi:television-guide'
          size: 25%
          style: |
            :active ;
            ha-card {
                background-color: var(--paper-item-icon-active-color);
                transition: .05s;
            }
          styles:
            card:
              - border-radius: 30px
              - height: 53px
            label:
              - color: gray
              - font-size: 9px
              - justify-self: start
              - padding: 0px 5px
            name:
              - font-size: 12px
              - padding: 0px 0px
          tap_action:
            action: call-service
            service: script.turn_on
            service_data:
              entity_id: script.harmony_guide
          type: 'custom:button-card'
        conditions:
          - entity: sensor.harmony_activity
            state_not: PowerOff
        type: conditional
      - card:
          color: var(--primary-text-color)
          color_type: icon
          icon: 'mdi:arrow-down-bold'
          size: 25%
          style: |
            :active ;
            ha-card {
                background-color: var(--paper-item-icon-active-color);
                transition: .05s;
            }
          styles:
            card:
              - border-radius: 30px
              - height: 53px
            label:
              - color: gray
              - font-size: 9px
              - justify-self: start
              - padding: 0px 5px
            name:
              - font-size: 12px
              - padding: 0px 0px
          tap_action:
            action: call-service
            service: script.turn_on
            service_data:
              entity_id: script.harmony_channel_down
          type: 'custom:button-card'
        conditions:
          - entity: sensor.harmony_activity
            state_not: PowerOff
        type: conditional
    type: horizontal-stack
type: vertical-stack

[Mariusthvdb (Marius)]

been a long day, so excuse me if this is too stupid to ask, but why doesn’t my tap_action work on the entity?

  - type: 'custom:button-card'
    name: Family Presence
    template: button_default_title
    tap_action:
      action: more-info
      entity: sensor.family_home
    hold_action:
      action: navigate
      navigation_path: phones_tablets

hold_action navigates fine, and yes, the sensor.family_home actually exists…
must be going blind

thanks if you can have a look

update

seems to boil down to not having an entity in the main button config. If I do this:

  - type: 'custom:button-card'
    name: Family Presence
    template: button_default_title
    entity: sensor.family_home
    show_icon: false
    tap_action:
      action: more-info
#      entity: sensor.family_home
    hold_action:
      action: navigate
      navigation_path: phones_tablets

it works, but only if I add the show_icon: false because that is true by default, and messes the layout of the button.
@RomRider could you see if this is qualifying as a bug, or at least a (edge) case not catered for:
use tap_action more-info with an entity in the tap_action doesn’t work if the button does not have an entity set in the button config?
Please note I’ve also tried color_type: label-card but the issue remains the same. no more-info action initiated. No advantage for the label-card while I would have thought it to take away the need to set show_icon: false. Not so. So what does the label-card do in fact?

[Jimmy_Berglund]

@Jimmy_Berglund

• entities: - input_select.freetoair type: entities

Does tap work if you select a specifik device like device_tracker.mobile?

[Jimmy_Berglund]

In a more attempt to find out what my problem is i removed entities and made a button row with channels to see if that fixed it. Button row was made out of Slide row. So i could fitt all my channels.

It still triggers the Transparent problem. I allso removed the style: section to negate that as the problem.
So now i think its the Condition screwing it upp. Or something allse.

[Mariusthvdb (Marius)]

HI,
trying to figure out the ideal border-radius for a notification custom_field but I am stuck, probably because I a dong it the incorrect way, so turning to the community for help please.

here’s what the regular border-radius: 50% does on a single character field:

but this is what 20% radius does on a word:

50% makes it even worse, creating even more of a sausage rugby-ball

deleted the radius all to gether, since I use non-rounded buttons to be in style with that, but am not sure I like that:

Ive got no better way to express what I want/need then referencing this toggle-switch form factor:

what css setting should I try to have the notification field look like the toggle switch (start with radius 50%, then straight, end finally end with radius 50% again)…?

hope this is possible, and thank you for having a look at it!

edit
using 100px instead of % makes this, which comes close:

though still not sure if this is the way to go. Nor why this is better than using %. Any Css guru advice appreciated!

[jarrah]

I would like to share my Life360 tracking button…

Unfortunately there’s a problem with the map in that it keeps on refreshing (I’ve raised an issue for it), but if you don’t mind that then please read on.

This uses @RomRider’s decluttering card which is a great way to repeat the same code but with different entities, so hopefully you can use this as an example for that too.

It also uses Card Mod so that the map card seamlessly fits within the button.

# ui-lovelace.yaml
resources:
  - url: /community_plugin/button-card/button-card.js
    type: module
  - url: /community_plugin/decluttering-card/decluttering-card.js
    type: module
  - url: /community_plugin/lovelace-card-mod/card-mod.js
    type: module

decluttering_templates:
  life360_dtemplate:
    card:
      type: custom:button-card
      entity: '[[entity]]'
      show_entity_picture: true
      show_state: true
      name: '[[name]]'
      tap_action: more-info
      styles:
        card:
          - background: 'linear-gradient(rgba(255,255,255,0.1)16%, rgba(0,0,20,0.3)84%)'
          - border-radius: 15px
          - border: 'solid 1.5px rgb(0,0,0)'
          - font-size: 17px
          - text-shadow: 0px 0px 5px black
          - height: 270px
          - width: 540px
          - padding: 0px
        grid:
          - grid-template-rows: 1fr min-content min-content min-content min-content min-content min-content min-content # 8 rows
          - grid-template-columns: 1fr 1fr 50% # 3 columns, right half is the map
          - grid-template-areas: '"i batt map" "n s map" "speed speed map" "place place map" "since since map" "journey journey map" "accur accur map" "seen seen map"'
        name:
          - align-self: start
          - justify-self: middle
          - padding-bottom: 10px
          - font-size: 20px
          - font-weight: bold
        state:
          - justify-self: middle
          - padding-bottom: 10px
          - font-size: 15px
          - color: deepskyblue
        entity_picture:
          - width: 50%
          - justify-self: middle
          - border-radius: 100%
          - padding: 0px
        custom_fields:
          batt:
            - align-self: middle # up/down
            - justify-self: middle # left/right
            - font-size: 20px
          speed:
            - justify-self: start
            - font-size: 15px
            - padding-left: 10px
          place:
            - justify-self: start
            - font-size: 15px
            - padding-left: 10px
          since:
            - justify-self: start
            - font-size: 15px
            - padding-left: 10px
          journey:
            - justify-self: start
            - font-size: 15px
            - padding-left: 10px
          accur:
            - justify-self: start
            - font-size: 15px
            - padding-left: 10px
          seen:
            - justify-self: start
            - font-size: 15px
            - padding-left: 10px
            - padding-bottom: 10px
          map:
            - align-self: middle
            - justify-self: middle
      custom_fields:
        batt: >
          [[[
            let battery = states['[[entity]]'].attributes.battery;
            let battery_icon = states['[[batt_template]]'].attributes.icon;
            var battery_icon_color = states['[[entity]]'].attributes.battery > '30' ? 'green' : 'red';
            return `<ha-icon icon="${battery_icon}" style="width: 30px; height: 30px; padding-bottom: 10px; color:${battery_icon_color};"></ha-icon> ${battery}%`
          ]]]
        speed: |
          [[[
            let speed = states['[[entity]]'].attributes.speed;
            if (states['[[entity]]'].attributes.moving) return `<ha-icon icon="mdi:car" style="width: 17px; height: 17px; padding-bottom: 6px; padding-right: 6px; color: deepskyblue;"></ha-icon>
            <span style="color: deepskyblue; font-weight: bold;">Status:</span> moving - ${speed} mph`
            else if (states['[[entity]]'].attributes.driving) return `<ha-icon icon="mdi:car" style="width: 17px; height: 17px; padding-bottom: 6px; padding-right: 6px; color: deepskyblue;"></ha-icon>
            <span style="color: deepskyblue; font-weight: bold;">Status:</span> driving - ${speed} mph`
            else return `<ha-icon icon="mdi:car" style="width: 17px; height: 17px; padding-bottom: 6px; padding-right: 6px; color: deepskyblue;"></ha-icon>
            <span style="color: deepskyblue; font-weight: bold;">Status:</span> Standstill`
          ]]]
        place: |
          [[[
            return `
            <ha-icon icon="mdi:map-marker-radius" style="width: 17px; height: 17px; padding-bottom: 6px; padding-right: 6px; color: deepskyblue;"></ha-icon>
            <span style="color: deepskyblue; font-weight: bold;">Place:</span>
            ${states['[[entity]]'].attributes.place}`
          ]]]
        since: >
          [[[
            return `
            <ha-icon icon="mdi:map-clock-outline" style="width: 17px; height: 17px; padding-bottom: 6px; padding-right: 6px; color: deepskyblue;"></ha-icon>
            <span style="color: deepskyblue; font-weight: bold;">Since:</span>
            ${states['[[since]]'].state}`
          ]]]
        journey: >
          [[[
            return `
            <ha-icon icon="mdi:map-marker-down" style="width: 17px; height: 17px; padding-bottom: 6px; padding-right: 6px; color: deepskyblue;"></ha-icon>
            <span style="color: deepskyblue; font-weight: bold;">Time to home:</span>
            ${states['[[travel_time]]'].state} mins`
          ]]]
        accur: |
          [[[
            return `
            <ha-icon icon="mdi:map-marker-circle" style="width: 17px; height: 17px; padding-bottom: 6px; padding-right: 6px; color: deepskyblue;"></ha-icon>
            <span style="color: deepskyblue; font-weight: bold;">GPS Accur:</span>
            ${states['[[entity]]'].attributes.gps_accuracy}`
          ]]]
        seen: |
          [[[
            return `
            <ha-icon icon="mdi:map-marker-check" style="width: 17px; height: 17px; padding-bottom: 6px; padding-right: 6px; color: deepskyblue;"></ha-icon>
            <span style="color: deepskyblue; font-weight: bold;">Last Seen:</span>
            ${states['[[lastseen]]'].state}`
          ]]]
        map:
          card:
            type: map
            style: |
              ha-card {
                box-shadow: none;
              }
            default_zoom: 16
            entities:
              - '[[entity]]'

title: Home
views:
  - title: test
    icon: mdi:run
    panel: false
    path: test
    cards:
      - type: vertical-stack 
        cards:
          - type: 'custom:decluttering-card'
            template: life360_dtemplate
            variables:
              - entity: device_tracker.life360_name
              - name: Name
              - batt_template: sensor.name_battery_template
              - travel_time: sensor.phone_to_home_name
              - since: sensor.life360_name_since
              - lastseen: sensor.life360_name_lastseen

  
# Configuration or package yaml
sensor:
  - platform: google_travel_time
    name: phone_to_home_name
    scan_interval: 21600 # 6 hours
    api_key: !secret google_maps_api
    origin: device_tracker.life360_name
    destination: !secret address

  - platform: template
    sensors:
      life360_name_lastseen:
        friendly_name: "Name Last Seen"
        value_template: "{{ as_timestamp(state_attr('device_tracker.life360_name', 'last_seen')) | timestamp_custom('%A @ %-I:%M %p') }}"

      life360_name_since:
        friendly_name: "Name Location Since"
        value_template: "{{ as_timestamp(state_attr('device_tracker.life360_name', 'at_loc_since')) | timestamp_custom('%A @ %-I:%M %p') }}"

      name_battery_template:
        friendly_name: Name Phone Battery
        unit_of_measurement: '%'
        value_template: "{{ states.device_tracker.life360_name.attributes.battery |int(-1) }}"
        icon_template: >-
          {% if states.device_tracker.life360_name.attributes.battery != "unknown" %}
            {% set battery_level = states.device_tracker.life360_name.attributes.battery|int (-1)%}
            {% set battery_round = (battery_level|int / 10)|int * 10 %}
            {% if states.device_tracker.life360_name.attributes.battery_charging|lower == "true" %}
              {% if battery_level == -1 %}
                mdi:battery-unknown
              {% else %}
                {% if battery_round >= 100 %}
                  mdi:battery-charging-100
                {% elif battery_round > 0 %}
                  mdi:battery-charging-{{ battery_round }}
                {% else %}
                  mdi:battery-alert
                {% endif %}
              {% endif %}
            {% else %}
              {% if battery_level == -1 %}
                mdi:battery-unknown
              {% else %}
                {% if battery_round >= 100 %}
                  mdi:battery
                {% elif battery_round > 0 %}
                  mdi:battery-{{ battery_round }}
                {% else %}
                  mdi:battery-alert
                {% endif %}
              {% endif %}
            {% endif %}
          {% else %}
            mdi:battery-alert
          {% endif %}

automation:
  # To stay within the free API call limit made to Google, I only update the google travel time sensor at certain times
  - alias: "Commute - Update afternoon commute sensor"
    initial_state: 'on'
    trigger:
      - platform: time_pattern
        minutes: '/2'
    condition:
      - condition: time
        after: '16:00:00'
        before: '18:00:00'
      - condition: time
        weekday:
          - mon
          - tue
          - wed
          - thu
          - fri
    action:
      - service: homeassistant.update_entity
        entity_id: sensor.phone_to_home_name

[petro]

@Mariusthvdb

Any Css guru advice appreciated!

Not a guru, but making it a large pixel size will work until you get large enough to be greater than 100 pixels. I’d end up doing that. % is not the way to go with rectangular features.

[petro]

can you strip out a single button from that mess please? Too much to look at and debug.

[AhmadK (akasma74)]

Guys, I started using this card yesterday and it’s great for many jobs.
I didn’t read all 3012 post in this topic (read the docs though) but could anyone tell me why almost every option is templatable but not color? It would be useful… or I don’t need it provided I use card_mod for things like hiding box_shadow?
And one more thing - is it correct that we can change label and name but we cannot do anything about state’s content?

[petro]

color is a style, all styles should be handled under the state field

state:
- value: 'on'
  styles:
    icon:
      color: blah
- value: 'off'
  styles:
    icon:
      color: blah

[Mariusthvdb (Marius)]

@AhmadK

do anything about state’s content?

sure you can, use a custom_field and call it fakeState use it all the time to combine the use of label for last_changed, but also want to see other values that are not the state. Combining those can save precious button real estate…
you could even use that in a state template if you’d like

    - value: 'on'
      custom_fields:
        stateDisplay: >
          [[[  var fakestate = `<span style="color: #F0C209;"> ${entity.state}:</span>`;
               var fakelabel = `<span style="color: #F0C209;"> ${Math.round(entity.attributes.brightness / 2.55)} %</span>`;
               return fakestate +' ' + fakelabel;]]]

or use the name field for it, (that’s the great thing about Button-card, you can template anything into anything):

        name: >
          [[[
          var fakestate = `<span style="color: red;font-size: 11px;word-wrap:break-word;"> ${entity.state.substr(0, entity.state.length-11)} </span>`;
          return 'Last motion' + "<br>" + fakestate
          ]]]

[skank]

Hi lovely card, however im having issues with the icon not begin aligned left

can someone tell me whats wrong please?

button_card_templates:
  light_button:
    color_type: label-card
    styles:
      card:
        - width: 125px
        - height: 125px
      grid:
        - grid-template-areas: '"i" "n" "s"'
        - grid-template-columns: 1fr
        - grid-template-rows: 1fr min-content min-content
      icon:
        - align: start
      img_cell:
        - align-self: start
        - text-align: start
      name:
        - justify-self: start
        - padding-left: 10px
        - font-size: 20px
      state:
        - justify-self: start
        - padding-left: 10px
    show_label: false
    show_state: true
    state:
      - value: 'on'
        styles:
          card:
            - color: black
          icon:
            - color: orange
    tap_action:
      action: toggle  

its centered instead of left

[AhmadK (akasma74)]

@petro

color is a style, all styles should be handled under the state field

sounds reasonable, will try that.
UPDATE:
here’s the correct way that worked for me:

state:
  - operator: template
    value:  "[[[return isFinite(entity.state.split(' ')[0])]]]"
    icon:   'mdi:power-off'
    styles:
      icon:
        - color:  'gray'

well, I only had access to docs and they list both icon and color at the same level and it didn’t work. Actually, looking closer to the docs, that color is very versatile as may be applicable to background/icon/etc but it’s just a string and that inside styles can be a template!

@Mariusthvdb

use a custom_field

last night I decided not to dive into that, sounded too abstract

@Mariusthvdb

you could even use that in a state template if you’d like

yes, but I’m yet to link it with state of my entity… as it’s the state that being compared to value, isn’t it?
I know I can template name and label, but the thing is they all have their own names in the card’s grid and my main problem was to position two strings to the right from the icon (name and label) and one to the right of them (here’s my code).
Looks like I need to learn about custom_field asap

UPDATE2: thanks @Mariusthvdb, it wasn’t clear after reading the docs (to me) what these custom_fields are for. Now my card works without additional sensors, happy days!

[AhmadK (akasma74)]

I have a similar problem and so far was unable to change it.
Here’s how it looks:

[klogg]

Can we use the javascript switch in templates?
If so can someone tell me how please.

This doesn’t seem to work…

      [[[
        var cycle = 'none';

        switch(cycle)
          case 'none':
            return 'Idle';
          default:
            return 'Something Else';
      ]]]

[apop]

I believe you’re just missing opening and closing braces. Try this:

      [[[
        var cycle = 'none';

        switch(cycle) {
          case 'none':
            return 'Idle';
          default:
            return 'Something Else';
        }
      ]]]

[Jimmy_Berglund]

But the problem is not on a single button the problem happens when i combine the following cards

• content
• custom:button-card
• conditional
• horizontal-stack
• vertical-stack
• Entities

And i cant single them out cause the transparent problem only happens when ever they are all combined and it happens direcly after the entities funktion.

So the only way to se it is to use it as i have. I tripped my whole homeassistant from swipe cards and compact header and others to see if thats what causing it.

Its propably either my code or something with the combination.

The cleanest i have so far with the worked upp version to have as little wierd things it it as i myself can come upp with is the folowing.

cards:
  - content: |
      ## <ha-icon icon="mdi:remote"></ha-icon> Vardagsrum
    type: markdown
  - cards:
      - type: 'custom:button-card'
        color: var(--secondary-text-color)
        color_type: icon
        entity: switch.appletv
        icon: 'mdi:apple'
        name: ' '
        size: 25%
        style: |
          :active
          ha-card {
              background-color: var(--paper-item-icon-active-color);
              transition: .05s;
          }
        styles:
          card:
            - border-radius: 30px
            - height: 53px
          label:
            - color: gray
            - font-size: 9px
            - justify-self: start
            - padding: 0px 5px
          name:
            - font-size: 12px
            - padding: 0px 0px
        tap_action:
          action: call-service
          service: remote.turn_on
          service_data:
            activity: Apple tv
            entity_id: remote.vardagsrum
      - type: 'custom:button-card'
        color: var(--secondary-text-color)
        color_type: icon
        entity: switch.htpc
        icon: 'mdi:desktop-classic'
        name: ' '
        size: 25%
        style: |
          :active
          ha-card {
              background-color: var(--paper-item-icon-active-color);
              transition: .05s;
          }
        styles:
          card:
            - border-radius: 30px
            - height: 53px
          label:
            - color: gray
            - font-size: 9px
            - justify-self: start
            - padding: 0px 5px
          name:
            - font-size: 12px
            - padding: 0px 0px
        tap_action:
          action: call-service
          service: remote.turn_on
          service_data:
            activity: Htpc
            entity_id: remote.vardagsrum
      - type: 'custom:button-card'
        color: var(--secondary-text-color)
        color_type: icon
        entity: switch.tv
        icon: 'mdi:television'
        name: ' '
        size: 25%
        style: |
          :active
          ha-card {
              background-color: var(--paper-item-icon-active-color);
              transition: .05s;
          }
        styles:
          card:
            - border-radius: 30px
            - height: 53px
          label:
            - color: gray
            - font-size: 9px
            - justify-self: start
            - padding: 0px 5px
          name:
            - font-size: 12px
            - padding: 0px 0px
        tap_action:
          action: call-service
          service: remote.turn_on
          service_data:
            activity: Tv
            entity_id: remote.vardagsrum
      - type: 'custom:button-card'
        color: var(--secondary-text-color)
        color_type: icon
        entity: switch.ps4
        icon: 'mdi:playstation'
        name: ' '
        size: 25%
        style: |
          :active
          ha-card {
              background-color: var(--paper-item-icon-active-color);
              transition: .05s;
          }
        styles:
          card:
            - border-radius: 30px
            - height: 53px
          label:
            - color: gray
            - font-size: 9px
            - justify-self: start
            - padding: 0px 5px
          name:
            - font-size: 12px
            - padding: 0px 0px
        tap_action:
          action: call-service
          service: remote.turn_on
          service_data:
            activity: PS4
            entity_id: remote.vardagsrum
      - type: 'custom:button-card'
        color: var(--red)
        color_off: var(--primary-text-color)
        color_type: icon
        icon: 'mdi:power'
        name: ' '
        size: 25%
        style: |
          :active
          ha-card {
              background-color: var(--paper-item-icon-active-color);
              transition: .05s;
          }
        styles:
          card:
            - border-radius: 30px
            - height: 53px
          label:
            - color: gray
            - font-size: 9px
            - justify-self: start
            - padding: 0px 5px
          name:
            - font-size: 12px
            - padding: 0px 0px
        tap_action:
          action: call-service
          service: remote.turn_off
          service_data:
            entity_id: remote.vardagsrum
    type: horizontal-stack
  - entities:
      - input_select.freetoair
    type: entities
  - cards:
      - card:
          color: var(--secondary-text-color)
          color_type: icon
          icon: 'mdi:exit-to-app'
          name: HDMI 1
          show_icon: false
          size: 25%
          style: |
            :active
            ha-card {
                background-color: var(--paper-item-icon-active-color);
                transition: .05s;
            }
          styles:
            card:
              - border-radius: 30px
              - height: 53px
            label:
              - color: gray
              - font-size: 9px
              - justify-self: start
              - padding: 0px 5px
            name:
              - font-weight: bold
              - font-size: 15px
              - padding: 0px 0px
          tap_action:
            action: call-service
            service: script.turn_on
            service_data:
              entity_id: script.hdmi1
          type: 'custom:button-card'
        conditions:
          - entity: sensor.harmony_activity
            state_not: PowerOff
        type: conditional
      - card:
          color: var(--primary-text-color)
          color_type: icon
          icon: 'mdi:chevron-up'
          name: HDMI 2
          show_icon: false
          size: 25%
          style: |
            :active
            ha-card {
                background-color: var(--paper-item-icon-active-color);
                transition: .05s;
            }
          styles:
            card:
              - border-radius: 30px
              - height: 53px
            label:
              - color: gray
              - font-size: 9px
              - justify-self: start
              - padding: 0px 5px
            name:
              - font-weight: bold
              - font-size: 15px
              - padding: 0px 0px
          tap_action:
            action: call-service
            service: script.turn_on
            service_data:
              entity_id: script.hdmi2
          type: 'custom:button-card'
        conditions:
          - entity: sensor.harmony_activity
            state_not: PowerOff
        type: conditional
      - card:
          color: var(--primary-text-color)
          color_type: icon
          icon: 'mdi:menu'
          name: HDMI 3
          show_icon: false
          size: 25%
          style: |
            :active
            ha-card {
                background-color: var(--paper-item-icon-active-color);
                transition: .05s;
            }
          styles:
            card:
              - border-radius: 30px
              - height: 53px
            label:
              - color: gray
              - font-size: 9px
              - justify-self: start
              - padding: 0px 5px
            name:
              - font-weight: bold
              - font-size: 15px
              - padding: 0px 0px
          tap_action:
            action: call-service
            service: script.turn_on
            service_data:
              entity_id: script.hdmi3
          type: 'custom:button-card'
        conditions:
          - entity: sensor.harmony_activity
            state_not: PowerOff
        type: conditional
      - card:
          color: var(--primary-text-color)
          color_type: icon
          icon: 'mdi:volume-plus'
          name: HDMI 4
          show_icon: false
          size: 25%
          style: |
            :active
            ha-card {
                background-color: var(--paper-item-icon-active-color);
                transition: .05s;
            }
          styles:
            card:
              - border-radius: 30px
              - height: 53px
            label:
              - color: gray
              - font-size: 9px
              - justify-self: start
              - padding: 0px 5px
            name:
              - font-weight: bold
              - font-size: 15px
              - padding: 0px 0px
          tap_action:
            action: call-service
            service: script.turn_on
            service_data:
              entity_id: script.hdmi4
          type: 'custom:button-card'
        conditions:
          - entity: sensor.harmony_activity
            state_not: PowerOff
        type: conditional
    type: horizontal-stack
  - cards:
      - card:
          color: var(--secondary-text-color)
          color_type: icon
          icon: 'mdi:exit-to-app'
          size: 25%
          style: |
            :active
            ha-card {
                background-color: var(--paper-item-icon-active-color);
                transition: .05s;
            }
          styles:
            card:
              - border-radius: 30px
              - height: 53px
            label:
              - color: gray
              - font-size: 9px
              - justify-self: start
              - padding: 0px 5px
            name:
              - font-size: 12px
              - padding: 0px 0px
          tap_action:
            action: call-service
            service: script.turn_on
            service_data:
              entity_id: script.harmony_exit
          type: 'custom:button-card'
        conditions:
          - entity: sensor.harmony_activity
            state_not: PowerOff
        type: conditional
      - card:
          color: var(--primary-text-color)
          color_type: icon
          icon: 'mdi:chevron-up'
          size: 25%
          style: |
            :active
            ha-card {
                background-color: var(--paper-item-icon-active-color);
                transition: .05s;
            }
          styles:
            card:
              - border-radius: 30px
              - height: 53px
            label:
              - color: gray
              - font-size: 9px
              - justify-self: start
              - padding: 0px 5px
            name:
              - font-size: 12px
              - padding: 0px 0px
          tap_action:
            action: call-service
            service: script.turn_on
            service_data:
              entity_id: script.harmony_upp
          type: 'custom:button-card'
        conditions:
          - entity: sensor.harmony_activity
            state_not: PowerOff
        type: conditional
      - card:
          color: var(--secondary-text-color)
          color_type: icon
          icon: 'mdi:menu'
          size: 25%
          style: |
            :active
            ha-card {
                background-color: var(--paper-item-icon-active-color);
                transition: .05s;
            }
          styles:
            card:
              - border-radius: 30px
              - height: 53px
            label:
              - color: gray
              - font-size: 9px
              - justify-self: start
              - padding: 0px 5px
            name:
              - font-size: 12px
              - padding: 0px 0px
          tap_action:
            action: call-service
            service: script.turn_on
            service_data:
              entity_id: script.harmony_menu
          type: 'custom:button-card'
        conditions:
          - entity: sensor.harmony_activity
            state_not: PowerOff
        type: conditional
      - card:
          color: var(--primary-text-color)
          color_type: icon
          double_tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: VolumeUp
              device: 52940343
              entity_id: remote.vardagsrum
          icon: 'mdi:volume-plus'
          size: 25%
          style: |
            :active
            ha-card {
                background-color: var(--paper-item-icon-active-color);
                transition: .05s;
            }
          styles:
            card:
              - border-radius: 30px
              - height: 53px
            label:
              - color: gray
              - font-size: 9px
              - justify-self: start
              - padding: 0px 5px
            name:
              - font-size: 12px
              - padding: 0px 0px
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: VolumeUp
              device: 52940343
              entity_id: remote.vardagsrum
          type: 'custom:button-card'
        conditions:
          - entity: sensor.harmony_activity
            state_not: PowerOff
        type: conditional
    type: horizontal-stack
  - cards:
      - card:
          color: var(--primary-text-color)
          color_type: icon
          icon: 'mdi:chevron-left'
          size: 25%
          style: |
            :active
            ha-card {
                background-color: var(--paper-item-icon-active-color);
                transition: .05s;
            }
          styles:
            card:
              - border-radius: 30px
              - height: 53px
            label:
              - color: gray
              - font-size: 9px
              - justify-self: start
              - padding: 0px 5px
            name:
              - font-size: 12px
              - padding: 0px 0px
          tap_action:
            action: call-service
            service: script.turn_on
            service_data:
              entity_id: script.harmony_left
          type: 'custom:button-card'
        conditions:
          - entity: sensor.harmony_activity
            state_not: PowerOff
        type: conditional
      - card:
          color: var(--primary-text-color)
          color_type: icon
          icon: 'mdi:smoke-detector'
          size: 25%
          style: |
            :active
            ha-card {
                background-color: var(--paper-item-icon-active-color);
                transition: .05s;
            }
          styles:
            card:
              - border-radius: 30px
              - height: 53px
            label:
              - color: gray
              - font-size: 9px
              - justify-self: start
              - padding: 0px 5px
            name:
              - font-size: 12px
              - padding: 0px 0px
          tap_action:
            action: call-service
            service: script.turn_on
            service_data:
              entity_id: script.harmony_ok
          type: 'custom:button-card'
        conditions:
          - entity: sensor.harmony_activity
            state_not: PowerOff
        type: conditional
      - card:
          color: var(--primary-text-color)
          color_type: icon
          icon: 'mdi:chevron-right'
          size: 25%
          style: |
            :active
            ha-card {
                background-color: var(--paper-item-icon-active-color);
                transition: .05s;
            }
          styles:
            card:
              - border-radius: 30px
              - height: 53px
            label:
              - color: gray
              - font-size: 9px
              - justify-self: start
              - padding: 0px 5px
            name:
              - font-size: 12px
              - padding: 0px 0px
          tap_action:
            action: call-service
            service: script.turn_on
            service_data:
              entity_id: script.harmony_right
          type: 'custom:button-card'
        conditions:
          - entity: sensor.harmony_activity
            state_not: PowerOff
        type: conditional
      - card:
          color: var(--primary-text-color)
          color_type: icon
          double_tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: VolumeDown
              device: 52940343
              entity_id: remote.vardagsrum
          icon: 'mdi:volume-minus'
          size: 25%
          style: |
            :active
            ha-card {
                background-color: var(--paper-item-icon-active-color);
                transition: .05s;
            }
          styles:
            card:
              - border-radius: 30px
              - height: 53px
            label:
              - color: gray
              - font-size: 9px
              - justify-self: start
              - padding: 0px 5px
            name:
              - font-size: 12px
              - padding: 0px 0px
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: VolumeDown
              device: 52940343
              entity_id: remote.vardagsrum
          type: 'custom:button-card'
        conditions:
          - entity: sensor.harmony_activity
            state_not: PowerOff
        type: conditional
    type: horizontal-stack
  - cards:
      - card:
          color: var(--secondary-text-color)
          color_type: icon
          icon: 'mdi:volume-off'
          size: 25%
          style: |
            :active
            ha-card {
                background-color: var(--paper-item-icon-active-color);
                transition: .05s;
            }
          styles:
            card:
              - border-radius: 30px
              - height: 53px
            label:
              - color: gray
              - font-size: 9px
              - justify-self: start
              - padding: 0px 5px
            name:
              - font-size: 12px
              - padding: 0px 0px
          tap_action:
            action: call-service
            service: script.turn_on
            service_data:
              entity_id: script.harmony_mute
          type: 'custom:button-card'
        conditions:
          - entity: sensor.harmony_activity
            state_not: PowerOff
        type: conditional
      - card:
          color: var(--primary-text-color)
          color_type: icon
          icon: 'mdi:chevron-down'
          size: 25%
          style: |
            :active
            ha-card {
                background-color: var(--paper-item-icon-active-color);
                transition: .05s;
            }
          styles:
            card:
              - border-radius: 30px
              - height: 53px
            label:
              - color: gray
              - font-size: 9px
              - justify-self: start
              - padding: 0px 5px
            name:
              - font-size: 12px
              - padding: 0px 0px
          tap_action:
            action: call-service
            service: script.turn_on
            service_data:
              entity_id: script.harmony_ner
          type: 'custom:button-card'
        conditions:
          - entity: sensor.harmony_activity
            state_not: PowerOff
        type: conditional
      - card:
          color: var(--secondary-text-color)
          color_type: icon
          icon: 'mdi:keyboard-return'
          size: 25%
          style: |
            :active
            ha-card {
                background-color: var(--paper-item-icon-active-color);
                transition: .05s;
            }
          styles:
            card:
              - border-radius: 30px
              - height: 53px
            label:
              - color: gray
              - font-size: 9px
              - justify-self: start
              - padding: 0px 5px
            name:
              - font-size: 12px
              - padding: 0px 0px
          tap_action:
            action: call-service
            service: script.turn_on
            service_data:
              entity_id: script.harmony_prev
          type: 'custom:button-card'
        conditions:
          - entity: sensor.harmony_activity
            state_not: PowerOff
        type: conditional
      - card:
          color: var(--primary-text-color)
          color_type: icon
          icon: 'mdi:arrow-up-bold'
          size: 25%
          style: |
            :active
            ha-card {
                background-color: var(--paper-item-icon-active-color);
                transition: .05s;
            }
          styles:
            card:
              - border-radius: 30px
              - height: 53px
            label:
              - color: gray
              - font-size: 9px
              - justify-self: start
              - padding: 0px 5px
            name:
              - font-size: 12px
              - padding: 0px 0px
          tap_action:
            action: call-service
            service: script.turn_on
            service_data:
              entity_id: script.harmony_channel_up
          type: 'custom:button-card'
        conditions:
          - entity: sensor.harmony_activity
            state_not: PowerOff
        type: conditional
    type: horizontal-stack
  - cards:
      - card:
          color: var(--secondary-text-color)
          color_type: icon
          icon: 'mdi:gamepad-variant'
          size: 25%
          style: |
            :active
            ha-card {
                background-color: var(--paper-item-icon-active-color);
                transition: .05s;
            }
          styles:
            card:
              - border-radius: 30px
              - height: 53px
            label:
              - color: gray
              - font-size: 9px
              - justify-self: start
              - padding: 0px 5px
            name:
              - font-size: 12px
              - padding: 0px 0px
          tap_action:
            action: call-service
            service: script.turn_on
            service_data:
              entity_id: script.gamemode
          type: 'custom:button-card'
        conditions:
          - entity: sensor.harmony_activity
            state_not: PowerOff
        type: conditional
      - card:
          color: var(--secondary-text-color)
          color_type: icon
          icon: 'mdi:play-pause'
          size: 25%
          style: |
            :active
            ha-card {
                background-color: var(--paper-item-icon-active-color);
                transition: .05s;
            }
          styles:
            card:
              - border-radius: 30px
              - height: 53px
            label:
              - color: gray
              - font-size: 9px
              - justify-self: start
              - padding: 0px 5px
            name:
              - font-size: 12px
              - padding: 0px 0px
          tap_action:
            action: call-service
            service: script.turn_on
            service_data:
              entity_id: script.harmony_play
          type: 'custom:button-card'
        conditions:
          - entity: sensor.harmony_activity
            state_not: PowerOff
        type: conditional
      - card:
          color: var(--secondary-text-color)
          color_type: icon
          icon: 'mdi:television-guide'
          size: 25%
          style: |
            :active
            ha-card {
                background-color: var(--paper-item-icon-active-color);
                transition: .05s;
            }
          styles:
            card:
              - border-radius: 30px
              - height: 53px
            label:
              - color: gray
              - font-size: 9px
              - justify-self: start
              - padding: 0px 5px
            name:
              - font-size: 12px
              - padding: 0px 0px
          tap_action:
            action: call-service
            service: script.turn_on
            service_data:
              entity_id: script.harmony_guide
          type: 'custom:button-card'
        conditions:
          - entity: sensor.harmony_activity
            state_not: PowerOff
        type: conditional
      - card:
          color: var(--primary-text-color)
          color_type: icon
          icon: 'mdi:arrow-down-bold'
          size: 25%
          style: |
            :active
            ha-card {
                background-color: var(--paper-item-icon-active-color);
                transition: .05s;
            }
          styles:
            card:
              - border-radius: 30px
              - height: 53px
            label:
              - color: gray
              - font-size: 9px
              - justify-self: start
              - padding: 0px 5px
            name:
              - font-size: 12px
              - padding: 0px 0px
          tap_action:
            action: call-service
            service: script.turn_on
            service_data:
              entity_id: script.harmony_channel_down
          type: 'custom:button-card'
        conditions:
          - entity: sensor.harmony_activity
            state_not: PowerOff
        type: conditional
    type: horizontal-stack
type: vertical-stack

And it still pops upp from enteties and continued. All buttons have condition that they only show when not in power off state on the harmony remote.

[petro]

Well for 1, you are using card mod on the button card. You don’t want to do that. You’re having the button card settings fight with card mod.

[Jimmy_Berglund]

Still happens with or without it so its not about the card mod.
Allso if it was it would happen to the row above the Entities.

I can understand that some error happens and then kill the rest Of all Cards it renders.

But so far my search has taken me to the conclution that it happens when all these different Cards are brought together.

Worth to note that i have not seen it on a diffrent tab then the first main page. And that took me to think it was some other mod doing it. But so far i still have the same problem with all things removed but the card.

[klogg]

Brilliant thanks.
I don’t know how I missed that after all my pouring over the docs on w3schools!!!