I’ve been using this card: Lovelace: Button card
to create this:
And this is the corresponding code in ui-lovelace.yaml:
- title: Radio
icon: mdi:radio
cards:
- type: vertical-stack
cards:
- type: "custom:button-card"
name: Radio Channels
style:
# - color: rgb(44, 109, 214)
- font-size: 19px
# - font-weight: bold
- type: horizontal-stack
cards:
- type: "custom:button-card"
color_type: icon
color_off: rgb(44, 109, 214)
icon: attribute
entity: script.radio_10
name: Radio 10
size: 22%
- type: "custom:button-card"
color_type: icon
color_off: rgb(44, 109, 214)
icon: attribute
name: Sky Radio
size: 22%
entity: script.radio_sky
- type: horizontal-stack
cards:
- type: "custom:button-card"
color_type: icon
color_off: rgb(44, 109, 214)
icon: attribute
name: NPO3 FM
size: 22%
entity: script.radio_npo3
- type: "custom:button-card"
color_type: icon
color_off: rgb(44, 109, 214)
icon: attribute
name: Omrop Fryslan
size: 22%
entity: script.radio_frl
- type: entities
title: Volume
show_header_toggle: false
entities:
- input_number.slider1
- type: horizontal-stack
cards:
- type: "custom:button-card"
entity: script.receiver_volume_up
color_type: icon
color_off: rgb(44, 109, 214)
icon: mdi:volume-plus
- type: "custom:button-card"
color_type: icon
color_off: rgb(44, 109, 214)
icon: mdi:volume-minus
entity: script.receiver_volume_down
- type: "custom:button-card"
color_type: icon
color_off: rgb(44, 109, 214)
icon: attribute
name: Radio OFF
size: 28%
entity: script.radio_off