@radinsky No, you need to install custom component browser-mod 
Hi @N-l1!
Very nice design! I really like it and have already implemented multiple parts.
I want to turn your vertical buttons into toggle buttons, but cannot get it to work 
Very frustrating… They seem to be inactive.
I would like to activate my input.booleans by clicking. Can you help me spot my mistake?
type: 'custom:button-card'
- icon: 'mdi:weather-night'
show_icon: true
show_name: false
style: |
ha-card {
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
-8px -8px 8px 0 rgba(255,255,255,.5),8px 8px 8px 0 rgba(0,0,0,.03);
{% elif is_state('sun.sun', 'below_horizon') %}
-8px -8px 8px 0 rgba(50, 50, 50,.5),8px 8px 8px 0 rgba(0,0,0,.15);
{% endif %}
}
styles:
card:
- width: 80px
- height: 80px
- border-radius: 15px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action:
action: toggle
entity: input_boolean.good_night
type: 'custom:button-card'
- cards:
- content: |
# Goodnight
Thanks in advance 
Hi @Martin_Pejstrup,
Thank you! You should put the entity outside the tap_action
- icon: 'mdi:weather-night'
show_icon: true
show_name: false
style: |
ha-card {
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
-8px -8px 8px 0 rgba(255,255,255,.5),8px 8px 8px 0 rgba(0,0,0,.03);
{% elif is_state('sun.sun', 'below_horizon') %}
-8px -8px 8px 0 rgba(50, 50, 50,.5),8px 8px 8px 0 rgba(0,0,0,.15);
{% endif %}
}
styles:
card:
- width: 80px
- height: 80px
- border-radius: 15px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
############################## Like this ################
entity: input_boolean.good_night
tap_action:
action: toggle
type: 'custom:button-card'
- cards:
- content: |
# Goodnight
Hope this helps!
Hi again
That worked for 2 out of 3. I’ll have a look and see if I can figure it out 
Thanks again! And great work on the UI once more!
1 Like
Has anyone found a good way (good designed, like the whole UI here) to name the entities of the vertical stack? I would love to have the name inside the button, or over the button/under the buttons…
@dolphinxjd1203 @Klex1404 I don’t have my config posted somewhere. I’m using HA for just two months now and am learning/changing as I go. I cannot share my entire config because I have a lot of personal info there for some stuff. I am willing to share a snippet though of some of the basics. If you want let me know, then I will send you a PM.
If you are looking for a complete setup that looks similair, you might want to look into HKI and HomeKit Style Card
Thanks @ASNNetworks, in the meantime, I managed to adopt @N-l1 configuration and made some customizations inspired by the pictures of your design.
9 Likes
That looks great! Nice to see you managed to create your own version that suits your needs
1 Like
Hi! Lovely UI interface, and i’ve started to try it out myself aswell
But for someone who’s a first timer using templates, and trying to read up on the official docuements i’m still baffled of how to use it.
I’m trying to use it together with Vertical Buttons Card
together with the sensor you’ve mentioned :
{{ states | selectattr('entity_id','in', ['light.list_your_lights_here','switch.example_1','switch.example_2'] )|selectattr('state','eq','on') | list | count }}
I’ve created a light.all_mylights as a entity
Where do i add that template? And how do i write it? Do i need to add it in Configuration.yaml first or?
Hi @Ryssk,
The template is used to count how many lights are on. Which can be used directly with the card or created into a sensor like this:
# Example configuration.yaml entry
sensor:
- platform: template
sensors:
lights_on:
friendly_name: "Lights On"
value_template: "{{ states | selectattr('entity_id','in', ['light.list_your_lights_here','switch.example_1','switch.example_2'] )|selectattr('state','eq','on') | list | count }}"
Hope this helps!
does anyone have a idea to solve this ? The last tile does not appear as it should on my phone screen. On the pc it’s fine tho
Im also interested in this. To only way I handled it was removing the last tile. So I was able to use just 4 tiles. I then adjusted the size of the 4.
As @fitim mentioned, removing the last tile would be the easiest choice. There might also be some implementation of resizing the cards when the screen gets smaller using state-switch. That is however more complicated. In a future version, I might update my config for the cards to resize.
Hope this helps!
Just found this. Great idea for my Dashboard!
Will have a deeper look into this!
Thanks!
/ Ralf
1 Like
(Sorry for the self-promotion)
I took this design and made a custom card for it. It’s called Button Text Card and is now available on HACS:
Makes your Lovelace config a lot cleaner. It also has support for templating, it has a large version and you can tweak the colors.
Let me know what you guys think (and if you have suggestions) 
4 Likes
This is amazing!
Awesome! Great work! 
I’m playing around with it now … since I’m not good in javascript maybe I just don’t understand, but:
How do i configure it with a tap_action? Isn’t it possible to toggle lights with this?
The tap_action should behave like all other cards. To toggle a light, you can use:
type: 'custom:button-text-card'
icon: 'mdi:lightbulb-outline'
subtitle: Subtitle
title: Title
entity: light.dressing
tap_action:
action: toggle
Just make sure to correctly set the entity_id.
Other things are also possible, like opening another tab in Lovelace:
tap_action:
action: navigate
navigation_path: /lovelace/switches
Ok thx.
Another thing:
I use a dark theme for evening, and a white theme for the day.
Is it passive to change the shadow of the box dependent from the theme?
Actually it is just working for the white theme.