I found this on another post and adapted and customized to my dashboard, it is not bubble card but stack of different cards together. Hope it is useful
type: custom:button-card
aspect_ratio: 10/1.5
grid_options:
columns: 6
rows: 1
custom_fields:
value:
card:
type: custom:button-card
entity: sensor.temperature_sensor_main_bedroom_temperature
show_icon: false
show_state: true
show_name: true
name: Temperature
styles:
name:
- position: absolute
- left: "-7px"
- top: 31px
- padding-left: 65px
- justify-self: start
- font-size: 0.28cm
- font-weight: bold
- color: rgba(200,58,92,0.7)
state:
- position: absolute
- left: "-9px"
- top: 11px
- padding-left: 67px
- justify-self: start
- font-size: 0.45cm
- font-weight: bold
card:
- background: >-
linear-gradient(90deg, rgba(66, 61, 76,1.0) 0%, rgba(66, 61,
76,0.0) 100%)
- width: 160px
- height: 64px
- border: none
- z-index: 1
tap_action:
action: none
hold_action:
action: none
graph:
card:
type: custom:mini-graph-card
entities:
- entity: sensor.temperature_sensor_main_bedroom_temperature
color: rgba(220,58,92,1.0)
hours_to_show: 24
hour24: true
points_per_hour: 1
animate: true
update_interval: 30
aggregate_func: avg
line_width: 3
bar_spacing: 5
height: 141
group: true
show:
labels: false
fill: fade
state: false
name: false
icon: false
icon:
card:
type: custom:button-card
size: 55%
icon: mdi:thermometer
show_name: false
styles:
icon:
- position: absolute
- left: 9px
- top: 8.5px
- color: rgba(200,200,200,1.0)
- width: 22px
- height: 22px
- color: rgba(155,155,155,1.0)
card:
- position: absolute
- left: 2px
- top: "-2px"
- border: none
- border-radius: 50%
- background-color: rgba(40,40,40,1.0)
- width: 40px
- height: 40px
- z-index: 1
tap_action:
action: none
hold_action:
action: none
styles:
card:
- background-color: rgba(0, 0, 0, 0.0)
- border: none
- width: 214px
- height: 56px
custom_fields:
graph:
- position: absolute
- left: "-1px"
- top: "-1px"
- width: 50
icon:
- position: absolute
- left: 3%
- top: 18%
value:
- position: absolute
- left: 0%
- top: 0%
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
border-radius: 38px;
}
For the card preview:
