This should work
const state = states['light.hello'].state === 'on' ?...
Just spent about two hours trying to get this to work and you helped me in like 5 minutes 
Whish i was better programmer. Tack !
Ah, I access some entities that way too. I’m curious, why are you putting a button card inside a button card?
Just for some experimentation. I am using the first button card as a “background/canvas” and then using custom fields to add other cards, in some cases more custom button cards. I am certain there is many ways to do it better. I guess i could just use the picture element card as the canvas or the markdown card as you have done in your design. But why make it simple 
1 Like
Hello. After fighting with the home assistant I managed to come up with what looks good. It’s amazing what you did. Very good work. Thank you so much for sharing it
Can you guide me? Thanks
I sorry for the English. I use a translator.
Thank you @Mattias_Persson for sharing your config with us. Since this now supports responsive rendering, I also ventured to change my previous frontend 
I must say I like the result very much. Simple, beautiful and intuitive.
One little thing is a bit strange for me though. When I call the frontend, the clock of the sidebar is sometimes displayed large like in you Screenshots and sometimes small. No matter if I call it on the desktop or on the smartphone. Unfortunately, I have not yet found the cause. Does anyone of you also have the problem?
1 Like
Hi, it’s in the original post :
Known issues
1 Like
Hello
I have a problem with the mqtt switches.
Only one works and the other two don’t.
I suppose it is a matter of how the squad is assembled.
I’ll pass you the jams in case you see the error. I can’t really find it
Thank you
It worked when I put 3 columns.
The number of columns is used for the number of entities?
action: fire-dom-event
browser_mod:
command: popup
title: Balkong
style:
hui-grid-card:
$: |
#root {
grid-gap: 0 !important;
}
card:
type: grid
columns: 3
square: false
cards:
- type: entities
state_color: true
show_header_toggle: false
entities:
- entity: switch.cuarto_principal
secondary_info: last-changed
- entity: switch.cuarto_milena
secondary_info: last-changed
- entity: switch.cuarto_flor
secondary_info: last-changed
- entity: automation.todo
ui-lovelace.yaml
#################################################
# #
# VARDAGSRUM #
# #
#################################################
- type: grid
title: Cuartos
view_layout:
grid-area: vardagsrum
columns: 2
cards:
- type: custom:button-card
entity: switch.cuarto_principal
name: Cuarto Principal
hold_action:
!include popup/vardagsrum_balkong.yaml
template:
- base
- icon_hue
- type: custom:button-card
entity: switch.cuarto_milena
name: Cuarto Milena
hold_action:
!include popup/vardagsrum_balkong.yaml
template:
- base
- icon_hue
#- loader
switch.yaml
- platform: mqtt
name: Cuarto Milena
icon: mdi:power-socket-de
command_topic: cmnd/tecla_touch_723A/POWER
payload_on: 'ON'
payload_off: 'OFF'
availability_topic: tele/tecla_touch_723A/LWT
payload_available: Online
payload_not_available: Offline
state_topic: stat/tecla_touch_723A/POWER
qos: 0
retain: true
- platform: mqtt
name: Cuarto Principal
icon: mdi:power-socket-de
command_topic: cmnd/tecla_touch_6DFF/POWER
payload_on: 'ON'
payload_off: 'OFF'
availability_topic: tele/tecla_touch_6DFF/POWER
payload_available: Online
payload_not_available: Offline
state_topic: stat/tecla_touch_6DFF/POWER
qos: 0
retain: true
vardagsrum_balkong.yaml
action: fire-dom-event
browser_mod:
command: popup
title: Balkong
style:
hui-grid-card:
$: |
#root {
grid-gap: 0 !important;
}
card:
type: grid
columns: 1
square: false
cards:
- type: entities
state_color: true
show_header_toggle: false
entities:
- entity: switch.cuarto_principal
secondary_info: last-changed
- entity: switch.cuarto_milena
secondary_info: last-changed
- entity: switch.cuarto_flor
secondary_info: last-changed
- entity: automation.todo
Ich love your design !
Would you mind sharing your code?
It would be awesome. Thank you.
above is the git link
Every file I open amazes me. The code you wrote is impressive. I admire you for what you did and for sharing it.
1 Like
Wonderful dashboard! I am slowly translating it and tweaking for my purposes, but for some reason I can’t get the fonts to show correctly:
The font.css file and the fonts themselves are accessible through the browser if I check direct links.
When I inspect elements on the page I can see:
font-family: SF Text
for example, but the fonts are not showing.
To make it even stranger when I tried the dashboard as main one, with lovelace mode yaml, I could see the fonts.
Now I want to have some standard UI-editable dashboards as well so I use your in the following way:
lovelace:
mode: storage
resources:
[ resources listed]
dashboards:
lovelace-tablet:
mode: yaml
title: Tablet
icon: mdi:tablet-dashboard
show_in_sidebar: true
filename: ui-lovelace-tablet.yaml
Does anyone have any idea what am I missing to get the fonts to show correctly? What else to check?
try adding from the ui or rename the file to make sure it’s not cache related
@Mattias_Persson How do I find out the device name?
I have a lot of mistakes and I still don’t understand some things.
Thank you
browser_mod:
devices:
c2080cea-6627150a:
name: galaxy_tab_a
disable:
- all
I tried to read it but the language is difficult for me and there are things that I do not understand from the translation. I’ll keep trying. Thank you
browser_mod.debug
Browser_mod.debug triggered it from a service right?
Now. When you are loading browser_mod.js
The service does not appear
lovelace:
mode: yaml
resources:
[ { url: /hacsfiles/bar-card/bar-card.js, type: module },
{ url: /hacsfiles/button-card/button-card.js, type: module },
{ url: /hacsfiles/kiosk-mode/kiosk-mode.js, type: module },
{ url: /hacsfiles/light-entity-card/light-entity-card.js, type: module },
{ url: /hacsfiles/light-popup-card/light-popup-card.js, type: module },
{ url: /hacsfiles/lovelace-card-mod/card-mod.js, type: module },
{ url: /hacsfiles/lovelace-hui-element/hui-element.js, type: module },
{ url: /hacsfiles/lovelace-layout-card/layout-card.js, type: module },
{ url: /hacsfiles/lovelace-slider-entity-row/slider-entity-row.js, type: module },
{ url: /hacsfiles/lovelace-valetudo-map-card/valetudo-map-card.js, type: module },
{ url: /hacsfiles/mini-graph-card/mini-graph-card-bundle.js, type: module },
{ url: /hacsfiles/swipe-card/swipe-card.js,