In general I am still using very basic cards in my dashboard. Before a while I made some custom buttons cards which helped me to organize some views neatly.
Now I need to use this new layout in order to have more flexibility.
So I am trying to replicate something like this
I have several button cards like these
I tried several times to add them one by one in the section layout and no matter what I tried I never managed make it work mainly due to their size = they become huge.
as an example the code of one of my buttons is the following
entity: switch.sonoff_100082f95b
haptic: success
icon: mdi:car
name: garage
color: steelblue
size: 78%
confirmation:
text: >-
[[[ return `Are you sure you want to toggle
${entity.attributes.friendly_name}?` ]]]
style: null
left: 60%
top: 5%
show_name: true
show_state: false
styles:
card:
- background-color: |
[[[
if (states['binary_sensor.garage_door_d1mini_new'].state == 'on')
return "khaki";
return "white";
]]]
- border-radius: 10%
- font-size: 9px
- color: steelblue
type: custom:button-card
this is what I need to replicate in the sections layout. The particular setup I use it mainly in my phone and it fits very well, but I would like as I said Ideally to be able to move & resize each button.
What do I need to achieve this?