Person Cards - Show Off Yours

[rog889]

@Bjoerek

{{ state_attr("zone."+states(entity),"friendly_name") }}

Hi, I have one more issue. Your code is working fine 99% of occasion to show the “zone” in Friendly Name. But…if the zone contains more than 1 word, such as “San Lunas” or “San Diego”. The return value is “null”. I think the code is probably not being able to insert/replace the single space right after the word “San” with an underscore “". The ideal outcome of the code would be “zone.san_lunas”, so the code could translate the defined zone name into Friendly Name. Now it probably becomes
“zone.san lunas” instead, therefore, it returns to a “null” value. Is it possible to modify the code that if there’s “space” or more than 1 word in states(person), then insert "” in between the 2 words?

Thank you

[Bjoerek]

can you test this @rog889

{% if is_states(entity,“home”) -%}
Home
{% elif is_state(entity, “not_home”) %}
Away
{%- else -%}
{{states(entity)}}
{%- endif %}

[rog889]

@Bjoerek

{% if is_states(entity,“home”) -%}
Home
{% elif is_state(entity, “not_home”) %}
Away
{%- else -%}
{{states(entity)}}
{%- endif %}

It does work now! Thank you! BTW, I had to do the same thing for the badge icon and badge color. Now, it’s working with multiple words in a zone! Thank you very much AGAIN!!!

[Chykan (Andrew)]

This is not my card but belongs in this thread. @ElVit has done a fantastic job.

Person Card with Static Map API Background

One more improvment from my side: It is also possible to change the color or icon of the map marker depending on your location. Simply change the background url for this: background: url('https://maps.geoapify.com/v1/staticmap?style=osm-bright&width=600&height=230&center=lonlat:{{ state_attr('device_tracker.MY_IPHONE', 'longitude') }},{{ state_attr('device_tracker.MY_IPHONE', 'latitude') }}&zoom=14.0&marker=lonlat:{{ state_attr('device_tracker.MY_IPHONE', 'longitude') }},{{ state_attr('device…

[lilp69 (lilp)]

Here’s my person cards.

The code:

type: vertical-stack
cards:
  - type: vertical-stack
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:button-card
            entity: person.XxX
            aspect_ratio: 1/1
            name: XxX
            show_entity_picture: true
            show_name: true
            hold_action:
              action: none
            state:
              - value: home
                styles:
                  custom_fields:
                    icon:
                      - border-color: '#77c66e'
                      - icon-color: green
              - value: not_home
                styles:
                  card: null
                  custom_fields:
                    icon:
                      - border-color: '#EF4F1A'
              - value: work
                styles:
                  custom_fields:
                    icon:
                      - border-color: orange
              - value: lyon
                styles:
                  custom_fields:
                    icon:
                      - border-color: blue
              - value: lamures
                styles:
                  custom_fields:
                    icon:
                      - border-color: blue
            styles:
              card:
                - border-radius: 5%
                - padding: 5%
                - color: gray
                - font-size: 9px
                - text-shadow: 0px 0px 0px black
                - text-transform: capitalize
                - justify-self: end
                - align-self: middle
              grid:
                - grid-template-areas: '"icon status" "n n" "battery proximity" "wifi alarm" "sd sd"'
                - grid-template-columns: 2fr
                - grid-template-rows: 1fr min-content min-content min-content min-content
              name:
                - font-size: 15px
                - align-self: middle
                - justify-self: start
                - padding-bottom: 10px
                - color: |
                    [[[
                        if (states['person.XxX'].state =='not_home') { 
                        return "#EF4F1A";
                        } 
                        if (states['person.XxX'].state =='home') { 
                        return "#77c66e";
                        } 
                        if (states['person.XxX'].state =='work') { 
                        return "orange";
                        }
                        else {
                        return "blue";
                        }
                      ]]]
                - '--text-wifi-color-sensor': |-
                    [[[
                      if (states['person.XxX'].state =='not_home') { 
                      return "#EF4F1A";
                      } 
                      if (states['person.XxX'].state =='home') { 
                      return "#77c66e";
                      } 
                      if (states['person.XxX'].state =='work') { 
                      return "orange";
                      }
                      else {
                      return "blue";
                      }
                    ]]]
              custom_fields:
                icon:
                  - clip-path: circle()
                  - width: 80%
                  - pointer-events: none
                  - display: grid
                  - border: 5px solid
                  - border-color: gray
                  - border-radius: 500px
                  - margin: 0 +10% 0 0
                  - justify-self: end
                  - opacity: 1
                status:
                  - align-self: start
                  - justify-self: end
                  - color: |
                      [[[
                        if (states['person.XxX'].state =='not_home') { 
                        return "#EF4F1A";
                        } 
                        if (states['person.XxX'].state =='home') { 
                        return "#77c66e";
                        } 
                        if (states['person.XxX'].state =='work') { 
                        return "orange";
                        }
                        else {
                        return "blue";
                        }
                      ]]]
                  - '--text-wifi-color-sensor': |-
                      [[[
                        if (states['person.XxX'].state =='not_home') { 
                        return "#EF4F1A";
                        } 
                        if (states['person.XxX'].state =='home') { 
                        return "#77c66e";
                        } 
                        if (states['person.XxX'].state =='work') { 
                        return "orange";
                        }
                        else {
                        return "blue";
                        }
                      ]]]
                proximity:
                  - padding: 0.5em 0px
                  - align-self: middle
                  - justify-self: end
                  - color: |
                      [[[
                        if (states['person.XxX'].state =='not_home') { 
                        return "#EF4F1A";
                        } 
                        if (states['person.XxX'].state =='home') { 
                        return "#77c66e";
                        } 
                        if (states['person.XxX'].state =='work') { 
                        return "orange";
                        }
                        else {
                        return "blue";
                        }
                      ]]]
                  - '--text-wifi-color-sensor': |-
                      [[[
                        if (states['person.XxX'].state =='not_home') { 
                        return "#EF4F1A";
                        } 
                        if (states['person.XxX'].state =='home') { 
                        return "#77c66e";
                        } 
                        if (states['person.XxX'].state =='work') { 
                        return "orange";
                        }
                        else {
                        return "blue";
                        }
                      ]]]
                wifi:
                  - padding: 0.5em 0px
                  - align-self: middle
                  - justify-self: start
                  - color: |
                      [[[
                        if (states['person.XxX'].state =='not_home') { 
                        return "#EF4F1A";
                        } 
                        if (states['person.XxX'].state =='home') { 
                        return "#77c66e";
                        } 
                        if (states['person.XxX'].state =='work') { 
                        return "orange";
                        }
                        else {
                        return "blue";
                        }
                      ]]]
                  - '--text-wifi-color-sensor': |-
                      [[[
                        if (states['person.XxX'].state =='not_home') { 
                        return "#EF4F1A";
                        } 
                        if (states['person.XxX'].state =='home') { 
                        return "#77c66e";
                        } 
                        if (states['person.XxX'].state =='work') { 
                        return "orange";
                        }
                        else {
                        return "blue";
                        }
                      ]]]
                battery:
                  - padding: 0.5em 0px
                  - align-self: middle
                  - justify-self: start
                  - color: |
                      [[[
                        if (states['person.XxX'].state =='not_home') { 
                        return "#EF4F1A";
                        } 
                        if (states['person.XxX'].state =='home') { 
                        return "#77c66e";
                        } 
                        if (states['person.XxX'].state =='work') { 
                        return "orange";
                        }
                        else {
                        return "blue";
                        }
                      ]]]
                  - '--text-color-sensor': |-
                      [[[
                        if (states['person.XxX'].state =='not_home') { 
                        return "#EF4F1A";
                        } 
                        if (states['person.XxX'].state =='home') { 
                        return "#77c66e";
                        } 
                        if (states['person.XxX'].state =='work') { 
                        return "orange";
                        }
                        else {
                        return "blue";
                        }
                      ]]]
                alarm:
                  - padding: 0.5em 0px
                  - align-self: middle
                  - justify-self: end
                  - color: |
                      [[[
                        if (states['person.XxX'].state =='not_home') { 
                        return "#EF4F1A";
                        } 
                        if (states['person.XxX'].state =='home') { 
                        return "#77c66e";
                        } 
                        if (states['person.XxX'].state =='work') { 
                        return "orange";
                        }
                        else {
                        return "blue";
                        }
                      ]]]
                  - '--text-color-sensor': |-
                      [[[
                        if (states['person.XxX'].state =='not_home') { 
                        return "#EF4F1A";
                        } 
                        if (states['person.XxX'].state =='home') { 
                        return "#77c66e";
                        } 
                        if (states['person.XxX'].state =='work') { 
                        return "orange";
                        }
                        else {
                        return "blue";
                        }
                      ]]]
            custom_fields:
              icon: >
                [[[ return entity === undefined ? null : `<img
                src="${states[entity.entity_id].attributes.entity_picture}"
                width="100%">`; ]]]
              status: |
                [[[
                  if (states['person.XxX'].state =='not_home') { 
                  return `<ha-icon icon="mdi:home-export-outline"
                    style="width: 20px; height: 20px; color: '#EF4F1A';">
                    </ha-icon><span> Away</span>`;
                  } 
                  if (states['person.XxX'].state =='home') { 
                  return `<ha-icon 
                    icon="mdi:home"
                    style="width: 20px; height: 20px; color: #77c66e;">
                    </ha-icon><span> ${entity.state}</span>`;
                  } 
                  if (states['person.XxX'].state =='work') { 
                  return `<ha-icon 
                    icon="mdi:briefcase"
                    style="width: 20px; height: 20px; color: orange;">
                    </ha-icon><span> ${entity.state}</span>`;
                  }
                  else {
                  return `<ha-icon 
                    icon="mdi:map-marker-radius"
                    style="width: 20px; height: 20px; color: blue;">
                    </ha-icon><span> ${entity.state}</span>`;
                  }
                ]]]
              proximity: |
                [[[
                  return `<ha-icon
                    icon="mdi:map-marker-distance"
                    style="width: 20px; height: 20px; color: var(--text-color-sensor);">
                    </ha-icon>  <span>\<span style="color: var(--text-color-sensor);">${states['proximity.XxX'].state} Kms</span></span>`
                ]]]
              battery: |
                [[[
                  if (states['sensor.oneplus_battery_state'].state =='charging') { 
                    return `<ha-icon
                    icon="mdi:battery-charging"
                    style="width: 20px; height: 20px; color: var(--text-color-sensor);">
                    </ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.oneplus_battery_level'].state}% battery</span></span>`;
                  } else {
                    return `<ha-icon
                    icon="mdi:battery"
                    style="width: 20px; height: 20px; color: var(--text-color-sensor);">
                    </ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.oneplus_battery_level'].state}% battery</span></span>`;
                  }
                ]]]
              wifi: |
                [[[
                  if (states['sensor.oneplus_wifi_connection'].state =='<not connected>') { 
                    return `<ha-icon
                    icon="mdi:wifi"
                    style="width: 20px; height: 20px; color: var(--text-wifi-color-sensor);">
                    </ha-icon> <span><span style="color: var(--text-wifi-color-sensor);">Disconnected</span></span>`; 
                  } else {
                    return `<ha-icon
                    icon="mdi:wifi"
                    style="width: 20px; height: 20px; color: var(--text-wifi-color-sensor);">
                    </ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.oneplus_wifi_connection'].state}</span></span>`;
                  }
                ]]]
              alarm: |
                [[[
                  return `<ha-icon
                    icon="mdi:alarm"
                    style="width: 20px; height: 20px; color: var(--text-color-sensor);">
                    </ha-icon>  <span>\<span style="color: var(--text-color-sensor);">${states['sensor.oneplus_next_alarm'].state}</span></span>`
                ]]]
          - type: custom:button-card
            entity: person.YyY
            aspect_ratio: 1/1
            name: YyY
            show_entity_picture: true
            show_name: true
            hold_action:
              action: none
            state:
              - value: home
                styles:
                  custom_fields:
                    icon:
                      - border-color: '#77c66e'
                      - icon-color: green
              - value: not_home
                styles:
                  card: null
                  custom_fields:
                    icon:
                      - border-color: '#EF4F1A'
              - value: work
                styles:
                  custom_fields:
                    icon:
                      - border-color: orange
              - value: lyon
                styles:
                  custom_fields:
                    icon:
                      - border-color: blue
              - value: lamures
                styles:
                  custom_fields:
                    icon:
                      - border-color: blue
            styles:
              card:
                - border-radius: 5%
                - padding: 5%
                - color: gray
                - font-size: 9px
                - text-shadow: 0px 0px 0px black
                - text-transform: capitalize
                - justify-self: end
                - align-self: middle
              grid:
                - grid-template-areas: '"icon status" "n n" "battery proximity" "wifi alarm" "sd sd"'
                - grid-template-columns: 2fr
                - grid-template-rows: 1fr min-content min-content min-content min-content
              name:
                - font-size: 15px
                - align-self: middle
                - justify-self: start
                - padding-bottom: 10px
                - color: |
                    [[[
                        if (states['person.YyY'].state =='not_home') { 
                        return "#EF4F1A";
                        } 
                        if (states['person.YyY'].state =='home') { 
                        return "#77c66e";
                        } 
                        if (states['person.YyY'].state =='work') { 
                        return "orange";
                        }
                        else {
                        return "blue";
                        }
                      ]]]
              custom_fields:
                icon:
                  - clip-path: circle()
                  - width: 40%
                  - pointer-events: none
                  - display: grid
                  - border: 5px solid
                  - border-color: gray
                  - border-radius: 500px
                  - margin: 0 +10% 0 0
                  - justify-self: start
                  - opacity: 1
                status:
                  - align-self: start
                  - justify-self: end
                  - color: |
                      [[[
                        if (states['person.YyY'].state =='not_home') { 
                        return "#EF4F1A";
                        } 
                        if (states['person.YyY'].state =='home') { 
                        return "#77c66e";
                        } 
                        if (states['person.YyY'].state =='work') { 
                        return "orange";
                        }
                        else {
                        return "blue";
                        }
                      ]]]
                  - '--text-wifi-color-sensor': |-
                      [[[
                        if (states['person.YyY'].state =='not_home') { 
                        return "#EF4F1A";
                        } 
                        if (states['person.YyY'].state =='home') { 
                        return "#77c66e";
                        } 
                        if (states['person.YyY'].state =='work') { 
                        return "orange";
                        }
                        else {
                        return "blue";
                        }
                      ]]]
                proximity:
                  - padding: 0.5em 0px
                  - align-self: middle
                  - justify-self: end
                  - color: |
                      [[[
                        if (states['person.YyY'].state =='not_home') { 
                        return "#EF4F1A";
                        } 
                        if (states['person.YyY'].state =='home') { 
                        return "#77c66e";
                        } 
                        if (states['person.YyY'].state =='work') { 
                        return "orange";
                        }
                        else {
                        return "blue";
                        }
                      ]]]
                  - '--text-wifi-color-sensor': |-
                      [[[
                        if (states['person.YyY'].state =='not_home') { 
                        return "#EF4F1A";
                        } 
                        if (states['person.YyY'].state =='home') { 
                        return "#77c66e";
                        } 
                        if (states['person.YyY'].state =='work') { 
                        return "orange";
                        }
                        else {
                        return "blue";
                        }
                      ]]]
                wifi:
                  - padding: 0.5em 0px
                  - align-self: middle
                  - justify-self: start
                  - color: |
                      [[[
                        if (states['person.YyY'].state =='not_home') { 
                        return "#EF4F1A";
                        } 
                        if (states['person.YyY'].state =='home') { 
                        return "#77c66e";
                        } 
                        if (states['person.YyY'].state =='work') { 
                        return "orange";
                        }
                        else {
                        return "blue";
                        }
                      ]]]
                  - '--text-wifi-color-sensor': |-
                      [[[
                        if (states['person.YyY'].state =='not_home') { 
                        return "#EF4F1A";
                        } 
                        if (states['person.YyY'].state =='home') { 
                        return "#77c66e";
                        } 
                        if (states['person.YyY'].state =='work') { 
                        return "orange";
                        }
                        else {
                        return "blue";
                        }
                      ]]]
                battery:
                  - padding: 0.5em 0px
                  - align-self: middle
                  - justify-self: start
                  - color: |
                      [[[
                        if (states['person.YyY'].state =='not_home') { 
                        return "#EF4F1A";
                        } 
                        if (states['person.YyY'].state =='home') { 
                        return "#77c66e";
                        } 
                        if (states['person.YyY'].state =='work') { 
                        return "orange";
                        }
                        else {
                        return "blue";
                        }
                      ]]]
                  - '--text-color-sensor': |-
                      [[[
                        if (states['person.YyY'].state =='not_home') { 
                        return "#EF4F1A";
                        } 
                        if (states['person.YyY'].state =='home') { 
                        return "#77c66e";
                        } 
                        if (states['person.YyY'].state =='work') { 
                        return "orange";
                        }
                        else {
                        return "blue";
                        }
                      ]]]
                alarm:
                  - padding: 0.5em 0px
                  - align-self: middle
                  - justify-self: end
                  - color: |
                      [[[
                        if (states['person.YyY'].state =='not_home') { 
                        return "#EF4F1A";
                        } 
                        if (states['person.YyY'].state =='home') { 
                        return "#77c66e";
                        } 
                        if (states['person.YyY'].state =='work') { 
                        return "orange";
                        }
                        else {
                        return "blue";
                        }
                      ]]]
                  - '--text-color-sensor': |-
                      [[[
                        if (states['person.YyY'].state =='not_home') { 
                        return "#EF4F1A";
                        } 
                        if (states['person.YyY'].state =='home') { 
                        return "#77c66e";
                        } 
                        if (states['person.f'].state =='work') { 
                        return "orange";
                        }
                        else {
                        return "blue";
                        }
                      ]]]
            custom_fields:
              icon: >
                [[[ return entity === undefined ? null : `<img
                src="${states[entity.entity_id].attributes.entity_picture}"
                width="100%">`; ]]]
              status: |
                [[[
                  if (states['person.YyY'].state =='not_home') { 
                  return `<ha-icon icon="mdi:home-export-outline"
                    style="width: 20px; height: 20px; color: '#EF4F1A';">
                    </ha-icon><span> Away</span>`;
                  } 
                  if (states['person.YyY'].state =='home') { 
                  return `<ha-icon 
                    icon="mdi:home"
                    style="width: 20px; height: 20px; color: #77c66e;">
                    </ha-icon><span> ${entity.state}</span>`;
                  } 
                  if (states['person.YyY'].state =='work') { 
                  return `<ha-icon 
                    icon="mdi:briefcase"
                    style="width: 20px; height: 20px; color: orange;">
                    </ha-icon><span> ${entity.state}</span>`;
                  }
                  else {
                  return `<ha-icon 
                    icon="mdi:map-marker-radius"
                    style="width: 20px; height: 20px; color: blue;">
                    </ha-icon><span> ${entity.state}</span>`;
                  }
                ]]]
              proximity: |
                [[[
                  return `<ha-icon
                    icon="mdi:map-marker-distance"
                    style="width: 20px; height: 20px; color: var(--text-color-sensor);">
                    </ha-icon>  <span>\<span style="color: var(--text-color-sensor);">${states['proximity.YyY'].state} Kms</span></span>`
                ]]]
              battery: |
                [[[
                  if (states['sensor.iphone_de_YyY_battery_state'].state =='charging') { 
                    return `<ha-icon
                    icon="mdi:battery-charging"
                    style="width: 20px; height: 20px; color: var(--text-color-sensor);">
                    </ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.iphone_de_YyY_battery_level'].state}% battery</span></span>`;
                  } else {
                    return `<ha-icon
                    icon="mdi:battery"
                    style="width: 20px; height: 20px; color: var(--text-color-sensor);">
                    </ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.iphone_de_YyY_battery_level'].state}% battery</span></span>`;
                  }
                ]]]
              wifi: |
                [[[
                  if (states['sensor.iphone_de_YyY_ssid'].state =='<not connected>') { 
                    return `<ha-icon
                    icon="mdi:wifi"
                    style="width: 20px; height: 20px; color: var(--text-wifi-color-sensor);">
                    </ha-icon> <span><span style="color: var(--text-wifi-color-sensor);">Disconnected</span></span>`; 
                  } else {
                    return `<ha-icon
                    icon="mdi:wifi"
                    style="width: 20px; height: 20px; color: var(--text-wifi-color-sensor);">
                    </ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.iphone_de_YyY_ssid'].state}</span></span>`;
                  }
                ]]]

Would like change alarm display from :2024-06-14T06:15:00+00:00 to Fri Jun 14 08:15:00. Don’t know how.
Add last change for status.
Personal avatar and icons.

[grnmachine23]

Just curious has anyone had this issue with their distance displaying multiple characters.

Code

    [[[
      return `<ha-icon
        icon="mdi:map-marker-distance"
        style="width: 10px; height: 10px; color: #888888;">
        </ha-icon>  <span>\<span style="color: var(--text-color-sensor);">${states['sensor.home_rich_distance'].state} Mi</span></span>`

[lilp69 (lilp)]

Same here when I’m not at home.

[Mariusthvdb (Marius)]

you can set it to any precision you want using the native button-card helpers functionality

[Mariusthvdb (Marius)]

@lilp69

                  - color: |
                      [[[
                        if (states['person.XxX'].state =='not_home') { 
                        return "#EF4F1A";
                        } 
                        if (states['person.XxX'].state =='home') { 
                        return "#77c66e";
                        } 
                        if (states['person.XxX'].state =='work') { 
                        return "orange";
                        }
                        else {
                        return "blue";
                        }
                      ]]]

might I suggest you check the endless repeating code inside your card, and reorganize it so you have eg only 1 color variable and use that for all fields? it would be much easier to read and maintain.

there are other repeated bits in the styles but the template seems the first big win
Given the fact you color your whole card based on the same presence condition, just set it to the top level and be done with it?

[lilp69 (lilp)]

I’m ok with you, I’m just a newbie to code. . Which part I need to delete and where to put this code?

[Mariusthvdb (Marius)]

just check the section I quoted.
That is repeated for each of the button elements stylings.

You can set the color: element on the card itself, and it will colorize all elements inside the card (might not do that for the icon, not sure anymore, that depends on the color type you set in the main card options)

just try it and you’ll see it happening when doing

            custom: button-card
            styles:
              card:
                - color: |
                    [[[
                      if (entity.state == 'not_home')  return "#EF4F1A";
                      if (entity.state == 'home')   return "#77c66e";
                      if (entity.state == 'work')  return "orange";
                      return "blue";
                    ]]]

note I refer to entity.state, so you point need to use that states['person.XxX'].state at all in your templates. It’s the main entity of the card.

the template can be made a bit smaller still, but this would be a good start.

[lilp69 (lilp)]

So like that :

type: vertical-stack
cards:
  - type: vertical-stack
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:button-card
            entity: person.XxX
            aspect_ratio: 1/1
            name: XxX
            show_entity_picture: true
            show_name: true
            hold_action:
              action: none
            state:
              - value: home
                styles:
                  custom_fields:
                    icon:
                      - border-color: '#77c66e'
                      - icon-color: green
              - value: not_home
                styles:
                  card: null
                  custom_fields:
                    icon:
                      - border-color: '#EF4F1A'
              - value: work
                styles:
                  custom_fields:
                    icon:
                      - border-color: orange
              - value: lyon
                styles:
                  custom_fields:
                    icon:
                      - border-color: blue
              - value: lamures
                styles:
                  custom_fields:
                    icon:
                      - border-color: blue
            styles:
              card:
                - border-radius: 5%
                - padding: 5%
                - color: gray
                - font-size: 9px
                - text-shadow: 0px 0px 0px black
                - text-transform: capitalize
                - justify-self: end
                - align-self: middle
                - color: |
                    [[[
                      if (entity.state == 'not_home')  return "#EF4F1A";
                      if (entity.state == 'home')   return "#77c66e";
                      if (entity.state == 'work')  return "orange";
                      return "blue";
                    ]]]
              grid:
                - grid-template-areas: '"icon status" "n n" "battery proximity" "wifi alarm" "sd sd"'
                - grid-template-columns: 2fr
                - grid-template-rows: 2fr min-content min-content min-content min-content
              name:
                - font-size: 15px
                - align-self: middle
                - justify-self: start
                - padding-bottom: 10px
              custom_fields:
                icon:
                  - clip-path: circle()
                  - width: 80%
                  - pointer-events: none
                  - display: grid
                  - border: 5px solid
                  - border-color: gray
                  - border-radius: 500px
                  - margin: 0 +10% 0 0
                  - justify-self: end
                  - opacity: 1
                status:
                  - align-self: start
                  - justify-self: end
                proximity:
                  - padding: 0.5em 0px
                  - align-self: middle
                  - justify-self: end
                  - numeric_precision: 2
                wifi:
                  - padding: 0.5em 0px
                  - align-self: middle
                  - justify-self: start
                battery:
                  - padding: 0.5em 0px
                  - align-self: middle
                  - justify-self: start
                alarm:
                  - padding: 0.5em 0px
                  - align-self: middle
                  - justify-self: end
                calendar:
                  - padding: 0.5em 0px
                  - align-self: middle
                  - justify-self: end
            custom_fields:
              icon: >
                [[[ return entity === undefined ? null : `<img
                src="${states[entity.entity_id].attributes.entity_picture}"
                width="100%">`; ]]]
              status: |
                [[[
                  if (states['person.XxX'].state =='not_home') { 
                  return `<ha-icon icon="mdi:home-export-outline"
                    style="width: 20px; height: 20px; color: '#EF4F1A';">
                    </ha-icon><span> Away</span>`;
                  } 
                  if (states['person.XxX'].state =='home') { 
                  return `<ha-icon 
                    icon="mdi:home"
                    style="width: 20px; height: 20px; color: #77c66e;">
                    </ha-icon><span> ${entity.state} </span>`;
                  } 
                  if (states['person.XxX'].state =='work') { 
                  return `<ha-icon 
                    icon="mdi:briefcase"
                    style="width: 20px; height: 20px; color: orange;">
                    </ha-icon><span> ${entity.state}</span>`;
                  }
                  else {
                  return `<ha-icon 
                    icon="mdi:map-marker-radius"
                    style="width: 20px; height: 20px; color: blue;">
                    </ha-icon><span> ${entity.state}</span>`;
                  }
                ]]]
              proximity: |
                [[[
                  return `<ha-icon
                    icon="mdi:map-marker-distance"
                    style="width: 20px; height: 20px; color: var(--text-color-sensor);">
                    </ha-icon>  <span>\<span style="color: var(--text-color-sensor);">${states['proximity.XxX'].state} Kms</span></span>`
                ]]]
              battery: |
                [[[
                  if (states['sensor.oneplus_battery_state'].state =='charging') { 
                    return `<ha-icon
                    icon="mdi:battery-charging"
                    style="width: 20px; height: 20px; color: var(--text-color-sensor);">
                    </ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.oneplus_battery_level'].state}% battery</span></span>`;
                  } else {
                    return `<ha-icon
                    icon="mdi:battery"
                    style="width: 20px; height: 20px; color: var(--text-color-sensor);">
                    </ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.oneplus_battery_level'].state}% battery</span></span>`;
                  }
                ]]]
              wifi: |
                [[[
                  if (states['sensor.oneplus_wifi_connection'].state =='<not connected>') { 
                    return `<ha-icon
                    icon="mdi:wifi"
                    style="width: 20px; height: 20px; color: var(--text-wifi-color-sensor);">
                    </ha-icon> <span><span style="color: var(--text-wifi-color-sensor);">Disconnected</span></span>`; 
                  } else {
                    return `<ha-icon
                    icon="mdi:wifi"
                    style="width: 20px; height: 20px; color: var(--text-wifi-color-sensor);">
                    </ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.oneplus_wifi_connection'].state}</span></span>`;
                  }
                ]]]
              alarm: |
                [[[
                  return `<ha-icon
                    icon="mdi:alarm"
                    style="width: 20px; height: 20px; color: var(--text-color-sensor);">
                    </ha-icon>  <span>\<span style="color: var(--text-color-sensor);">${states['sensor.oneplus_next_alarm'].state}</span></span>`
                ]]]

[Mariusthvdb (Marius)]

did you try it?

@lilp69

type: vertical-stack
cards:
  - type: vertical-stack
    cards:
      - type: horizontal-stack
        cards:

btw, are you sure this is needed?

[lilp69 (lilp)]

Yes, it does change color depending on the state of the person entity. Both the text and the icon.
Thanks.

[Mariusthvdb (Marius)]

sure, np.

now, given the fact you use the same code for all buttons, you could drop all of that generic yaml in a template and only use the entity in the main button config.

O and btw, you are still. using those colors in the custom fields html code, which seems no longer required. Why not just set most of those options directly in the styles section and only use specifics inside the html for the custom fields

 battery: |
                [[[
                  if (states['sensor.oneplus_battery_state'].state =='charging') { 
                    return `<ha-icon
                    icon="mdi:battery-charging"
                    style="width: 20px; height: 20px; color: var(--text-color-sensor);">
                    </ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.oneplus_battery_level'].state}% battery</span></span>`;
                  } else {
                    return `<ha-icon
                    icon="mdi:battery"
                    style="width: 20px; height: 20px; color: var(--text-color-sensor);">
                    </ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.oneplus_battery_level'].state}% battery</span></span>`;
                  }
                ]]]

the only thing depending on the state of that particular entity is the icon…so add most of that to the

                battery:
                  - padding: 0.5em 0px
                  - align-self: middle
                  - justify-self: start

and only change the icon based on the template
etc
etc

I didnt test it, but I believe you could at least do this:

Yaml

          - type: custom:button-card
            entity: person.XxX
            aspect_ratio: 1/1
            name: XxX
            show_entity_picture: true
            show_name: true
            hold_action:
              action: none
            state:
              - value: home
                styles:
                  custom_fields:
                    icon:
                      - border-color: '#77c66e'
                      - icon-color: green
              - value: not_home
                styles:
                  card: null
                  custom_fields:
                    icon:
                      - border-color: '#EF4F1A'
              - value: work
                styles:
                  custom_fields:
                    icon:
                      - border-color: orange
              - value: lyon
                styles:
                  custom_fields:
                    icon:
                      - border-color: blue
              - value: lamures
                styles:
                  custom_fields:
                    icon:
                      - border-color: blue
            styles:
              card:
                - border-radius: 5%
                - padding: 5%
                - color: gray
                - font-size: 9px
                - text-shadow: 0px 0px 0px black
                - text-transform: capitalize
                - justify-self: end
                - align-self: middle
                - color: |
                    [[[
                      if (entity.state == 'not_home')  return "#EF4F1A";
                      if (entity.state == 'home')   return "#77c66e";
                      if (entity.state == 'work')  return "orange";
                      return "blue";
                    ]]]
              grid:
                - grid-template-areas: '"icon status" "n n" "battery proximity" "wifi alarm" "sd sd"'
                - grid-template-columns: 2fr
                - grid-template-rows: 2fr min-content min-content min-content min-content
              name:
                - font-size: 15px
                - align-self: middle
                - justify-self: start
                - padding-bottom: 10px
              custom_fields:
                icon:
                  - clip-path: circle()
                  - width: 80%
                  - pointer-events: none
                  - display: grid
                  - border: 5px solid
                  - border-color: gray
                  - border-radius: 500px
                  - margin: 0 +10% 0 0
                  - justify-self: end
                  - opacity: 1
                status:
                  - align-self: start
                  - justify-self: end
                  - width: 20px
                  - height: 20px
                proximity:
                  - padding: 0.5em 0px
                  - align-self: middle
                  - justify-self: end
                  - numeric_precision: 2
                  - width: 20px
                  - height: 20px
                wifi:
                  - padding: 0.5em 0px
                  - align-self: middle
                  - justify-self: start
                  - width: 20px
                  - height: 20px
                battery:
                  - padding: 0.5em 0px
                  - align-self: middle
                  - justify-self: start
                  - width: 20px
                  - height: 20px
                alarm:
                  - padding: 0.5em 0px
                  - align-self: middle
                  - justify-self: end
                  - width: 20px
                  - height: 20px
                calendar:
                  - padding: 0.5em 0px
                  - align-self: middle
                  - justify-self: end
            custom_fields:
              icon: >
                [[[ return entity === undefined ? null : `<img
                src="${states[entity.entity_id].attributes.entity_picture}"
                width="100%">`; ]]]
              status: |
                [[[
                  if (entity.state =='not_home') { 
                  return `<ha-icon icon="mdi:home-export-outline" style="color: '#EF4F1A';">
                    </ha-icon><span> Away</span>`;
                  } 
                  if (entity.state =='home') { 
                  return `<ha-icon icon="mdi:home" style="color: #77c66e;">
                    </ha-icon><span> ${entity.state} </span>`;
                  } 
                  if (entity.state =='work') { 
                  return `<ha-icon 
                    icon="mdi:briefcase" style="color: orange;">
                    </ha-icon><span> ${entity.state}</span>`;
                  }
                  else {
                  return `<ha-icon 
                    icon="mdi:map-marker-radius" style="color: blue;">
                    </ha-icon><span> ${entity.state}</span>`;
                  }
                ]]]
              proximity: |
                [[[
                  return `<ha-icon icon="mdi:map-marker-distance"
                    </ha-icon>  <span>\<span>${states['proximity.XxX'].state} Kms</span></span>`
                ]]]
              battery: |
                [[[
                  if (states['sensor.oneplus_battery_state'].state =='charging') { 
                    return `<ha-icon icon="mdi:battery-charging">
                    </ha-icon> <span><span>${states['sensor.oneplus_battery_level'].state}% battery</span></span>`;
                  } else {
                    return `<ha-icon icon="mdi:battery" >
                    </ha-icon> <span><span >${states['sensor.oneplus_battery_level'].state}% battery</span></span>`;
                  }
                ]]]
              wifi: |
                [[[
                  if (states['sensor.oneplus_wifi_connection'].state =='<not connected>') { 
                    return `<ha-icon icon="mdi:wifi" >
                    </ha-icon> <span><span >Disconnected</span></span>`; 
                  } else {
                    return `<ha-icon icon="mdi:wifi" >
                    </ha-icon> <span><span >${states['sensor.oneplus_wifi_connection'].state}</span></span>`;
                  }
                ]]]
              alarm: |
                [[[
                  return `<ha-icon icon="mdi:alarm">
                    </ha-icon>  <span>\<span >${states['sensor.oneplus_next_alarm'].state}</span></span>`
                ]]]

nope… that was wrong, its been some time I made those larger buttons with all custom fields in html… sorry. We need the dimension in the custom fields, because there’s more than only then icon…

This should work

type: custom:button-card
entity: person.marijn
aspect_ratio: 1/1
name: Marijn
show_entity_picture: true
show_name: true
hold_action:
  action: none
styles:
  card:
    - border-radius: 5%
    - padding: 5%
    - color: gray
    - font-size: 9px
    - text-shadow: 0px 0px 0px black
    - text-transform: capitalize
    - justify-self: end
    - align-self: middle
    - color: |
        [[[
          if (entity.state == 'not_home') return "#EF4F1A";
          if (entity.state == 'home') return "#77c66e";
          if (entity.state == 'work') return "orange";
          return "blue";
        ]]]
  grid:
    - grid-template-areas: '"icon status" "n n" "battery proximity" "wifi alarm"'
    - grid-template-columns: 2fr
    - grid-template-rows: 2fr min-content min-content min-content min-content
  name:
    - font-size: 15px
    - align-self: middle
    - justify-self: start
    - padding-bottom: 10px
  custom_fields:
    icon:
      - clip-path: circle()
      - width: 80%
      - pointer-events: none
      - display: grid
      - border: 5px solid
      - border-color: |
          [[[
            if (entity.state == 'not_home') return "#EF4F1A";
            if (entity.state == 'home') return "#77c66e";
            if (entity.state == 'work') return "orange";
            return "blue";
          ]]]
      - border-radius: 500px
      - margin: 0 +10% 0 0
      - justify-self: end
      - opacity: 1
    status:
      - align-self: start
      - justify-self: end
    proximity:
      - padding: 0.5em 0px
      - align-self: middle
      - justify-self: end
      - numeric_precision: 2
    wifi:
      - padding: 0.5em 0px
      - align-self: middle
      - justify-self: start
    battery:
      - padding: 0.5em 0px
      - align-self: middle
      - justify-self: start
    alarm:
      - padding: 0.5em 0px
      - align-self: middle
      - justify-self: end
    calendar:
      - padding: 0.5em 0px
      - align-self: middle
      - justify-self: end
custom_fields:
  icon: >
    [[[ return entity === undefined ? null : `<img
        src="${states[entity.entity_id].attributes.entity_picture}"
        width="100%">`; ]]]
  status: |
    [[[
      if (entity.state =='not_home') {
      return `<ha-icon icon="mdi:home-export-outline" style="color: '#EF4F1A';">
        </ha-icon><span> Away</span>`;
      }
      if (entity.state =='home') {
      return `<ha-icon icon="mdi:home" style="width: 20px; height: 20px;color: #77c66e;">
        </ha-icon><span> ${entity.state} </span>`;
      }
      if (entity.state =='work') {
      return `<ha-icon
        icon="mdi:briefcase" style="width: 20px; height: 20px color: orange;">
        </ha-icon><span> ${entity.state}</span>`;
      }
      else {
      return `<ha-icon
        icon="mdi:map-marker-radius" style="width: 20px; height: 20px color: blue;">
        </ha-icon><span> ${entity.state}</span>`;
      }
    ]]]
  proximity: |
    [[[
      return `<ha-icon icon="mdi:map-marker-distance" style="width: 20px; height: 20px">
        </ha-icon> Distance <span><span>${states['sensor.thuis_marijn_distance'].state} Kms</span></span>`
    ]]]
  battery: |
    [[[
      if (states['sensor.marijn_battery_state'].state =='charging') {
        return `<ha-icon icon="mdi:battery-charging" style="width: 20px; height: 20px">
        </ha-icon> <span><span>${states['sensor.marijn_battery_level'].state}% battery</span></span>`;
      } else {
        return `<ha-icon icon="mdi:battery" style="width: 20px; height: 20px">
        </ha-icon> <span><span >${states['sensor.marijn_battery_level'].state}% battery</span></span>`;
      }
    ]]]
  wifi: |
    [[[
      if (states['sensor.marijn_connection_type'].state =='not connected') {
        return `<ha-icon icon="mdi:wifi" style="width: 20px; height: 20px">
        </ha-icon> <span><span >Disconnected</span></span>`;
      } else {
        return `<ha-icon icon="mdi:wifi" style="width: 20px; height: 20px">
        </ha-icon> <span><span >${states['sensor.marijn_connection_type'].state}</span></span>`;
      }
    ]]]
  alarm: |
    [[[
      return `<ha-icon icon="mdi:alarm" style="width: 20px; height: 20px">
        </ha-icon>  <span><span >${states['sensor.next_alarm'].state}</span></span>`
    ]]]

Note: if you still want to colorize the custom fields, you have to get those colors back in there, per custom field

I did ofc change several entity_id’s so watch out for those, and also, you apparently didn’t migrate your Proximity integration yet, as that entity you use there is legacy now… just remember to change it in the near future

I’d take out the words Distance and Battery from those fields, the icon says it all, and it brings more balance to the card

also, consider using the

  battery: |
    [[[
      if (states['sensor.marijn_battery_state'].state =='charging') {
        return `<ha-icon icon="mdi:battery-charging" style="width: 20px; height: 20px">
        </ha-icon> <span><span>${helpers.localize(states['sensor.marijn_battery_level'])} </span></span>`;
      } else {
        return `<ha-icon icon="mdi:battery" style="width: 20px; height: 20px">
        </ha-icon> <span><span >${helpers.localize(states['sensor.marijn_battery_level'])}</span></span>`;
      }
    ]]]

helpers.localize() functionality, which takes care of the units for you, and localization of states to your language

or compact a bit more:

  battery: |
    [[[ var mdi = states['sensor.marijn_battery_state'].state =='Charging'
          ? "mdi:battery-charging" : "mdi:battery";
      return `<ha-icon icon= ${mdi} style="width: 20px; height: 20px">
        </ha-icon><span>${helpers.localize(states['sensor.marijn_battery_level'])}</span>`;

    ]]]
  wifi: |
    [[[ var id  = states['sensor.marijn_connection_type'];
      return `<ha-icon icon=${id.attributes.icon} style="width: 20px; height: 20px">
        </ha-icon> <span >${helpers.localize(id)}</span>`;
    ]]]

you see the options are endless have fun !

A bit more compressed

type: custom:button-card
entity: person.marijn
aspect_ratio: 1/1
name: Marijn
show_entity_picture: true
show_name: true
hold_action:
  action: none
styles:
  card:
    - border-radius: 5%
    - padding: 5%
    - font-size: 9px
    - color: |
        [[[ if (entity.state == 'not_home') return '#EF4F1A';
            if (entity.state == 'home') return '#77c66e';
            if (entity.state == 'work') return 'orange';
            return 'blue'; ]]]
  grid:
    - grid-template-areas: '"picture status" "n n" "battery proximity" "wifi alarm"'
    - grid-template-columns: 2fr
    - grid-template-rows: 2fr min-content min-content min-content min-content
  name:
    - font-size: 15px
    - align-self: middle
    - justify-self: start
    - padding-bottom: 10px
    - font-weight: bold
  custom_fields:
    picture:
      - width: 80%
      - display: grid
      - border: 5px solid
      - border-color: |
          [[[
            if (entity.state == 'not_home') return '#EF4F1A';
            if (entity.state == 'home') return '#77c66e';
            if (entity.state == 'work') return 'orange';
            return "blue";
          ]]]
      - border-radius: 100%
      - margin: 0 +10% 0 0
      - justify-self: end
      - opacity: 1
    status:
      - align-self: start
      - justify-self: end
    proximity:
      - padding: 0.5em 0px
      - align-self: middle
      - justify-self: end
      - numeric_precision: 2
    wifi:
      - padding: 0.5em 0px
      - align-self: middle
      - justify-self: start
    battery:
      - padding: 0.5em 0px
      - align-self: middle
      - justify-self: start
    alarm:
      - padding: 0.5em 0px
      - align-self: middle
      - justify-self: end
# not used?
#     calendar:
#       - padding: 0.5em 0px
#       - align-self: middle
#       - justify-self: end
custom_fields:
  picture: >
    [[[ return `<img src=${states[entity.entity_id].attributes.entity_picture}
                width="100%">`; ]]]
  status: |
    [[[ if (entity.state =='not_home') {
        return `<ha-icon icon=mdi:home-export-outline style="color:'#EF4F1A';"></ha-icon>
                <span> ${helpers.localize(entity)}</span>`;
      }
      if (entity.state =='home') {
      return `<ha-icon icon=mdi:home style="width:20px;color: #77c66e;"></ha-icon>
              <span> ${helpers.localize(entity)} </span>`;
      }
      if (entity.state =='work') {
      return `<ha-icon icon=mdi:briefcase style="width:20px;color:orange;"></ha-icon>
              <span> ${helpers.localize(entity)}</span>`;
      }
      else {
      return `<ha-icon icon=mdi:map-marker-radius style="width:20px;color:blue;"></ha-icon>
              <span> ${helpers.localize(entity)}</span>`;
      }
    ]]]
  proximity: |
    [[[ return `<ha-icon icon=mdi:map-marker-distance style="width:20px;"></ha-icon>
                <span>${helpers.localize(states['sensor.thuis_marijn_distance'])}</span>`; ]]]
  battery: |
    [[[ var mdi = states['sensor.marijn_battery_state'].state =='Charging'
          ? 'mdi:battery-charging' : 'mdi:battery';
      return `<ha-icon icon= ${mdi} style="width:20px;"></ha-icon>
              <span>${helpers.localize(states['sensor.marijn_battery_level'])}</span>`; ]]]
  wifi: |
    [[[ var id  = states['sensor.marijn_connection_type'];
        return `<ha-icon icon=${id.attributes.icon} style="width:20px;"></ha-icon>
                <span >${helpers.localize(id)}</span>`; ]]]
  alarm: |
    [[[  return `<ha-icon icon=mdi:alarm style="width:20px;"></ha-icon>
              <span >${states['sensor.next_alarm'].state}</span>`; ]]]

---

But honestly: if you ask me, there is too much info for 1 button card.

having 4 of these inside a grid makes the card go way out of proportion, and make all text undreadable.

I believe 2 really is the max for a stack/grid. And, then the text is too small still…

compare:

to

ofc all colors have a meaning, and certain states are only shown when relevant

[crankycowboy]

Here’s mine. Pretty basic, but has some cool features. Clicking the location status pops up a map card with actual location. Clicking on the picture initiates a critical notification to find my phone. Pretty happy with the outcome:

[BlackMamba08]

Can you share your code to make the picture clickable?

I tried using chatgpt to make a button that says find phone. It makes the entire card tap action to find phone, which i do not want

[crankycowboy]

Sure, I’ll grab it and post back here when I get home. My card is using a picture elements card. Essentially I created a “helper” that is a toggle, and then an automation that whenever that toggle is switched on, it will send the notification to the appropriate phone. Then in the card, I placed a “state-icon” element behind the picture and made the icon transparent. So even though you are clicking the picture, it’s the “invisible” icon that is triggering the action. Hope that makes sense.

[lilp69 (lilp)]

@Mariusthvdb

ou ask me, there is t

Thanks for the optimization.
The new code :

type: vertical-stack
cards:
  - type: custom:button-card
    entity: person.XXX
    aspect_ratio: 1/1
    name: XXX
    show_entity_picture: true
    show_name: true
    hold_action:
      action: none
    styles:
      card:
        - border-radius: 5%
        - padding: 5%
        - color: gray
        - font-size: 9px
        - text-shadow: 0px 0px 0px black
        - text-transform: capitalize
        - justify-self: end
        - align-self: middle
        - color: |
            [[[
              if (entity.state == 'not_home') return "red";
              if (entity.state == 'home') return "#77c66e";
              if (entity.state == 'work') return "orange";
              return "lightblue";
            ]]]
      grid:
        - grid-template-areas: '"icon status" "n n" "battery proximity" "wifi alarm"'
        - grid-template-columns: 2fr
        - grid-template-rows: 2fr min-content min-content min-content min-content
      name:
        - font-size: 15px
        - align-self: middle
        - justify-self: start
        - padding-bottom: 10px
      custom_fields:
        icon:
          - clip-path: circle()
          - width: 80%
          - pointer-events: none
          - display: grid
          - border: 5px solid
          - border-color: |
              [[[
                if (entity.state == 'not_home') return "red";
                if (entity.state == 'home') return "#77c66e";
                if (entity.state == 'work') return "orange";
                return "lightblue";
              ]]]
          - border-radius: 500px
          - margin: 0 +10% 0 0
          - justify-self: end
          - opacity: 1
        status:
          - align-self: start
          - justify-self: end
        proximity:
          - padding: 0.5em 0px
          - align-self: middle
          - justify-self: end
          - numeric_precision: 2
        wifi:
          - padding: 0.5em 0px
          - align-self: middle
          - justify-self: start
        battery:
          - padding: 0.5em 0px
          - align-self: middle
          - justify-self: start
        alarm:
          - padding: 0.5em 0px
          - align-self: middle
          - justify-self: end
        calendar:
          - padding: 0.5em 0px
          - align-self: middle
          - justify-self: end
    custom_fields:
      icon: |
        [[[ return entity === undefined ? null : `<img
            src="${states[entity.entity_id].attributes.entity_picture}"
            width="100%">`; ]]]
      status: |
        [[[
          if (entity.state =='not_home') {
          return `<ha-icon icon="mdi:home-export-outline" style="width: 20px; height: 20px;color: '#EF4F1A';">
            </ha-icon><span> Away</span>`;
          }
          if (entity.state =='home') {
          return `<ha-icon icon="mdi:home" style="width: 20px; height: 20px;color: #77c66e;">
            </ha-icon><span> ${entity.state} </span>`;
          }
          if (entity.state =='work') {
          return `<ha-icon
            icon="mdi:briefcase" style="width: 20px; height: 20px color: orange;">
            </ha-icon><span> ${entity.state}</span>`;
          }
          else {
          return `<ha-icon
            icon="mdi:map-marker-radius" style="width: 20px; height: 20px color: blue;">
            </ha-icon><span> ${entity.state}</span>`;
          }
        ]]]
      proximity: |
        [[[
          return `<ha-icon icon="mdi:map-marker-distance" style="width: 20px; height: 20px">
            </ha-icon> Distance <span><span>${states['sensor.home_oneplus_distance'].state} Kms</span></span>`
        ]]]
      battery: |
        [[[ var mdi = states['sensor.oneplus_battery_state'].state =='Charging'
              ? "mdi:battery-charging" : "mdi:battery";
          return `<ha-icon icon= ${mdi} style="width: 20px; height: 20px">
            </ha-icon><span>${helpers.localize(states['sensor.oneplus_battery_level'])}</span>`;

        ]]]
      wifi: |
        [[[ var id  = states['sensor.oneplus_wifi_connection'];
          return `<ha-icon icon=${id.attributes.icon} style="width: 20px; height: 20px">
            </ha-icon> <span >${helpers.localize(id)}</span>`;
        ]]]
      alarm: |
        [[[
          return `<ha-icon icon="mdi:alarm" style="width: 20px; height: 20px">
            </ha-icon>  <span><span >${states['sensor.oneplus_next_alarm'].state}</span></span>`
        ]]]

A lot of information, but on laptop and my smartphone I’ve a good display.
I’m working on a popup card with a lot more information.
Every day I’m work on optimization on the display and information to show on my dashboards.

[grnmachine23]

Would you mind posting your code love the idea.