I have a really simple button showing the status and I want to display a custom field underneath but as you see the text is aligning right. Can anyone suggestion how I can make it centre, underneath the name?
type: custom:button-card
size: 80px
tap_action:
action: call-service
service: automation.trigger
service_data:
entity_id: automation.heating_on_if_temp_low_in_morning_duplicate
show_name: true
show_label: false
name: |
[[[
var sta = states['climate.hall'].attributes.hvac_action;
return 'Status: ' + "" + sta + "" ;
]]]
icon: mdi:fire
styles:
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 100%
- grid-template-rows: min-content min-content 1fr
card:
- background-color: '#fff'
- border-radius: 10%
name:
- font-size: 14px
- color: black
icon:
- color: |
[[[
if (states['climate.hall'].attributes.hvac_action == 'off') return 'blue';
else return 'orange';
]]]
custom_fields:
boost:
- color: black
- justify-self: end
custom_fields:
boost: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width: 12px; height: 12px; color: yellow;text-align:center">
</ha-icon><span>${states['sensor.timer_60minutes_remaining'].state}</span>`
]]]