@Burningstone is spot-on - just adding another custom card that I use a lot - it let’s you do almost anything you want within the card: GitHub - custom-cards/button-card: Lovelace button-card for home assistant. You can set up templates and then re-use them. I tried several others, but this is the most flexible one that I can find - you can add templated information via JavaScript. Here’s an example of how I display a timer
using the custom button card. First I set up a template that I can re-use:
timer_status:
template: name_bold_label_gray <---- This is another template...
color_type: icon
icon: 'mdi:'
show_state: true
state:
- color: 'rgb(0, 102, 204)' <---- customize the color depending on the `state` of the entity
value: 'idle'
icon: 'mdi:timer-off' <----- Custom icon for an idle state
- color: 'rgb(255, 153, 51)'
value: 'active'
icon: 'mdi:timer' <----- Different icon for an active state value
Note that it also uses another template that I set up (name_bold_label_gray
). That one is:
# This sets formatting for the name, label, and state displays on the card so
# that the look of my interface is somewhat consistent throughout
name_bold_label_gray:
styles:
name:
- text-transform: uppercase
- color: black
- justify-self: center
- font-weight: bold
- font-size: 12px
label:
- color: gray
- font-size: 12px
- justify-self: center
- padding: 0px 5px 0px 5px
- font-weight: bold
state:
- font-size: 10px
- justify-self: center
- padding: 0px 0px 0px 0px
Between the two of these, I’ve now described a ton of features that will display on the card. Then here’s an example of how I use those to actually display three timers with very little code (because most of it is in the templates above):
- cards:
- type: 'custom:button-card'
template: timer_status <--- This says to use all the formatting, etc, from the template
entity: timer.mbr_vaporizer_startup_timer
name: Startup Timer
- type: 'custom:button-card'
template: timer_status
entity: timer.mbr_vaporizer_run_timer
name: Run Timer
- type: 'custom:button-card'
template: timer_status
entity: timer.mbr_vaporizer_pause_timer
name: Pause Timer
type: horizontal-stack
The display looks like this:
You can do other things, too, like this - showing how to use the JavaScript feature under the tap_action
section:
- type: 'custom:button-card'
template: light_name_bright
entity: switch.inovelli_unknown_type_c000_id_c001_switch
name: Wreath
icon: 'mdi:lightbulb'
tap_action:
action: >
[[[ return (states['binary_sensor.christmas_lights'].state == 'on' ? 'toggle': 'more-info'); ]]]
The GitHub page has a ton of examples.