Hi everybody,
I’m playing with button_card and something (ok that really a detail…) annoying me…
graph_temp_hum:
variables:
entity: "sensor.xiaomi_multisensor_salon_humidite"
color: "var(--info-color)"
name: "Default name"
icon: "mdi:adjust"
styles:
card:
- padding: 0px
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr max-content
custom_fields:
item1:
card:
entity: '[[[ return variables.entity ]]]'
icon: '[[[ return variables.icon ]]]'
template:
- icon_info_vertical
style: |
ha-card {
box-shadow: none;
background: none;
border-radius: var(--border-radius);
}
styles:
card:
- top: 12px
- left: 12px
- height: 47px
type: 'custom:button-card'
item2:
card:
type: 'custom:mini-graph-card'
entities:
- entity: '[[[ return variables.entity ]]]'
line_color: '[[[ return variables.color ]]]'
line_width: 10
font_size: 55
height: 120
show:
name: false
icon: false
legend: false
state: true
style: |
ha-card {
box-shadow: none;
background: none;
border-radius: var(--border-radius);
}
styles:
card:
- top: 4px
- left: 12px
And the result:
How to reduce the tiny white gap ?
Thank you !!
It is helpful for other people that want to answer your question. By not formatting the code properly, you loose ie. the indentation, that is the reason for errors in many, many cases. Without the formatting, we just can’t see, if there is an error. Thank you! 
), I’m sure there would be a nice and compact solution in 
But have you really thought through what you’re saying? Or did you just didn’t know it better… 
