⚪ Bubble Card - A minimalist card collection for Home Assistant with a nice pop-up touch

Freshhat · February 19, 2026, 2:05pm

Seems Copilot is not that bad on this. This style section is working for me:


    styles: |
      /* Ensure all pop-up layers are transparent */
      .bubble-pop-up-container {
        background: transparent !important;
        box-shadow: none !important;
      }
      .bubble-pop-up-inner {
        background: transparent !important;
        box-shadow: none !important;
      }
      .bubble-pop-up-background {
        background: transparent !important;
        box-shadow: none !important;
      }
      .bubble-card-container {
        background: transparent !important;
        box-shadow: none !important;
      }

As well setting Opacity & Blu to 0


bg_opacity: "0" 
bg_blur: "0"

Hope this is also helpful for others

Nic0205 · February 21, 2026, 7:52am

Hey there,

going forward and hitting new issues

Could you guys tell me, why my sub-buttons in this header of the pop-up does not appear in a second row under the title?

type: custom:bubble-card
card_type: pop-up
hash: "#livingroom"
name: Wohnzimmer
icon: phu:living-room
entity: light.living_room_light
state: sensor.living_room_temperature
state_unit: °C
width_desktop: 600px
margin_top_mobile: 18px
margin_top_desktop: 74px
auto_close: 15000
trigger_entity: binary_sensor.living_room_motion_occupancy
button_type: name
sub_button:
  main: []
  bottom:
    - name: Automatically grouped
      buttons_layout: inline
      group:
        - entity: sensor.heizung_wohnzimmer_heizung_1_temperatur
          show_name: false
          show_last_changed: false
          show_state: true
        - entity: sensor.heizung_wohnzimmer_heizung_1_luftfeuchtigkeit
          show_state: true
        - entity: sensor.alle_wohnzimmerfenster
          show_name: false
          show_state: false
          show_attribute: true
          attribute: offene_fenster
        - entity: sensor.alle_wohnzimmerrollos
          show_attribute: true
          attribute: geoeffnete_rollos
          show_state: false
use_accent_color: false
show_icon: false
show_header: true
styles: |-
  .bubble-button-background {
    background: linear-gradient(135deg, #4FC3F7, #00F2FE);
    box-shadow: 0px 4px 8px rgba(0,0,0,0.15);
  }
card_layout: large-sub-buttons-grid
rows: 2
show_name: true
slider_fill_orientation: left
slider_value_position: right
light_slider_type: brightness

stefan1982 · February 21, 2026, 11:03pm

Am I the only one having problems to edit the bubble-cards (v 3.1: newest) in combination with HA 2026.2.3?
When editing a page - on hover - there is no submenu anymore to edit a certain card, which is quite annyoing and makes the cards uneditable and unusable.

jlockhar · February 23, 2026, 3:54pm

I think that header buttons are only able to use the main sub-buttons and not the bottom ones. There is no separate main/bottom section in the UI editor.

maurizio53 · February 24, 2026, 3:43pm

Chris_Hemmings:

    sub_button:
      - entity: input_button.go
        name: Go
        show_name: true
        tap_action:
          action: call-service
          service: script.turn_on
          target:
            entity_id: script.vacuum_room_select

Can you please post the code of the script you are using for this card?

Chris_Hemmings · February 24, 2026, 6:28pm

alias: Vacuum Room Select
sequence:

target:
entity_id: vacuum.alice
data:
command: spot_area
params:
rooms: |
{% set mapper = {
‘Tiles’ : ‘0’,
‘Bedroom’ : ‘9’,
‘Hollys’ : ‘1’,
‘Georgias’ : ‘2’,
‘Lounge’ : ‘5’,
‘Bathroom’ : ‘6’,
‘Laundry’ : ‘7’ } %}
{% set selection = states(‘input_select.room_select’) %}
{{ mapper[selection] }}
cleanings: 1
action: vacuum.send_command
description: “”
icon: mdi:robot-vacuum

maurizio53 · February 26, 2026, 2:43pm

I’d like to convert this card made with custom button-card into a bubble card, but due to my poor knowledge and my poor english. i cannot still find a way to do this. Can someone help me in this?

Here is the code:

type: custom:button-card
entity: person.maurizio
aspect_ratio: 0.1/0.1
name: Maurizio
show_entity_picture: true
show_name: false
state:
  - value: home
    styles:
      custom_fields:
        icon:
          - border-color: "#77c66e"
          - icon-color: green
  - value: not_home
    styles:
      custom_fields:
        icon:
          - border-color: "#EF4F1A"
  - value: Work
    styles:
      custom_fields:
        icon:
          - border-color: deepskyblue
styles:
  card:
    - border-radius: 5%
    - padding: 5%
    - color: gray
    - font-size: 10px
    - text-shadow: 0px 0px 0px black
    - text-transform: capitalize
    - justify-self: end
    - align-self: middle
  grid:
    - grid-template-areas: "\"icon status\" \"n n\" \"battery proximity\" \"wifi timehome\" \"sd sd\""
    - grid-template-columns: 2fr 1fr
    - grid-template-rows: 1fr min-content min-content min-content min-content
  name:
    - font-size: 15px
    - align-self: middle
    - justify-self: start
    - padding-bottom: 10px
  custom_fields:
    icon:
      - clip-path: circle()
      - width: 80%
      - pointer-events: none
      - display: grid
      - border: 5px solid
      - border-color: gray
      - border-radius: 500px
      - margin: 0 +10% 0 0
      - justify-self: end
      - opacity: 1
    status:
      - align-self: start
      - justify-self: end
    timehome:
      - padding: 0.5em 0px
      - align-self: middle
      - justify-self: start
    wifi:
      - padding: 0.5em 0px
      - align-self: middle
      - justify-self: start
      - "--text-wifi-color-sensor": >-
          [[[ if (states["sensor.sm_s908b_wi_fi_connection"].state == '<not
          connected>') return "#aaaaaa"; ]]]
    battery:
      - padding: 0.5em 0px
      - align-self: middle
      - justify-self: start
      - "--text-color-sensor": >-
          [[[ if (states["sensor.sm_s908b_battery_state"].state < 50) return
          "#EF4F1A"; ]]]
custom_fields:
  icon: >
    [[[ return entity === undefined ? null : `<img
    src="${states[entity.entity_id].attributes.entity_picture}" width="100%">`;
    ]]]
  status: |
    [[[
      if (states['person.maurizio'].state =='not_home') { 
      return `<ha-icon icon="mdi:home-export-outline"
        style="width: 20px; height: 20px; color: '#888888';">
        </ha-icon><span> Away</span>`;
      } 
      if (states['person.maurizio'].state =='home') { 
      return `<ha-icon 
        icon="mdi:home"
        style="width: 20px; height: 20px; color: 888888;">
        </ha-icon><span> ${entity.state}</span>`;
      } else {
      return `<ha-icon 
        icon="mdi:map-marker-radius"
        style="width: 20px; height: 20px; color: 888888;">
        </ha-icon><span> ${entity.state}</span>`;
      }
    ]]]
  proximity: |
    [[[
      return `<ha-icon
        icon="mdi:map-marker-distance"
        style="width: 20px; height: 20px; color: #888888;">
        </ha-icon>  <span>\<span style="color: var(--text-color-sensor);">${states['sensor.home_maurizio_distanza'].state} m</span></span>`
    ]]]                    
  battery: |
    [[[
      if (states['sensor.sm_s908b_battery_state'].state =='charging') { 
        return `<ha-icon
        icon="mdi:battery-charging"
        style="width: 20px; height: 20px; color: #888888;">
        </ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.sm_s908b_battery_level'].state}% battery</span></span>`;
      } else {
        return `<ha-icon
        icon="mdi:battery"
        style="width: 20px; height: 20px; color: #888888;">
        </ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.sm_s908b_battery_level'].state}% battery</span></span>`;
      }
    ]]]
  wifi: |
    [[[
      if (states['sensor.sm_s908b_wi_fi_connection'].state =='<not connected>') { 
        return `<ha-icon
        icon="mdi:wifi"
        style="width: 20px; height: 20px; color: var(--text-wifi-color-sensor);">
        </ha-icon> <span><span style="color: var(--text-wifi-color-sensor);">Disconnected</span></span>`; 
      } else {
        return `<ha-icon
        icon="mdi:wifi"
        style="width: 20px; height: 20px; color: #888888;">
        </ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.sm_s908b_wi_fi_connection'].state}</span></span>`;
      }
    ]]]

maurizio53 · February 27, 2026, 6:06pm

Is there a way to reduce the lenght of the pop-up screen in desktop environment?
It seems i cannot see an option to do this, maybe with styles?

Cloos · March 2, 2026, 3:47pm

Bubble Card 3

v3.1.2

Hi everyone!

Bubble Card v3.1.2 is a release mainly focused on quality improvements and performance optimizations. This update is essential if you already moved to Home Assistant 2026.3, it also makes navigation to pop-ups much easier, and it finally introduces an icon rendering approach aligned with Home Assistant so Bubble Card now displays exactly the same native HA icons.

Huge thank you again for all the feedback, bug reports, and contributions. Your reports helped me track down and fix many edge cases in this release

Here’s the full changelog:

New features and enhancements

Existing pop-up hash in navigation dropdown:
Existing pop-up hash values are now shown in the “Navigation path” dropdown. This also fixes the impossibility to add a hash since the Home Assistant 2026.2 update. #2232 #2203

image1124×1304 72.6 KB
Home Assistant icons:
Icons now match Home Assistant exactly in all cases (finally!). This means some of your icons might change after this update. #2123 #2142 (and more…)
Calendar card started events filter:
Added an option to filter started events on calendar cards. PR #2227 by @wollew, thank you!

Bug fixes and improvements

HA 2026.3 dropdown compatibility:
Fixed dropdown issues introduced by the Home Assistant 2026.3 update. This change significantly improves dropdown menus, for example they are no longer cropped in pop-ups! #2236
Bubble Card Tools migration issues:
Module IDs are now correctly normalized when needed during Bubble Card Tools migration. If you had migration issues before, remove the bubble_card folder then reload the page.
Duplicate hash warning:
A warning is now shown when a duplicated hash is detected while creating or editing a pop-up.
Pop-up opening performance (again):
Added optimizations to pop-ups so they now open smoother on slower devices.
Media series title fallback:
Added media_series_title as a fallback for media_artist. PR #2240 by @shyndman, thank you!
Icon cache for faster rendering:
Icons are now cached to improve rendering performance.
Scrolling effect refactor:
Refactored the scrolling effect to make it more stable, reliable, and less CPU intensive.
Media player picture refresh:
Fixed media player picture not updating automatically in some cases. #2136
Sub-button icon update:
Fixed a Bubble Card UI issue where sub-button icons were not updating in some cases. #2117

Bubble News

Over the past few years, I’ve been working on Bubble Card almost every day to make it the best it can be, and I still can’t believe how much it has grown in popularity. Watching the community getting this big and seeing so many people using my work has been incredibly rewarding

This is why I decided to create a Patreon as a way to offer something more for those who want to support me. A few days ago, I refreshed my Patreon with 3 new modules: Bubble Badges v2 (unlimited badges on any sub-button or the main icon), Bubble Weather (animated weather backgrounds with daily/hourly forecasts) and Bubble Neon (a dynamic theme that automatically assigns unique vibrant colors to each Bubble Card). The custom dropdown module is still there if you want full control over labels, icons, and actions on select cards and sub-buttons.

I’m also finally happy with my own dashboard (there is a short video of it in this Reddit post), built entirely with Bubble Card v3.1.0 and only new custom modules I’ve been working on for months! Like one that adds unique colors and styles to all cards, one for the weather, one for graphs, square cards, time… I’ll release more of these modules soon, with a detailed post on Patreon and a new YouTube video. I would love to know what you think!

Thank you so much for being part of this amazing community, your support always makes a huge difference!

I’ve been wanting to start my own YouTube channel for a while, focusing on tutorials around Home Assistant and Bubble Card, and I really hope you will enjoy my videos. Don’t hesitate to subscribe to help give my channel more visibility. Thank you in advance!

I want to highlight that on the GitHub page, in the Discussions section, you can share and discover some amazing YAML examples from the community. Go check it out! Some of the creations are absolutely incredible!

And if you are interested I’ve opened a Subreddit for Bubble Card where I post my progress on the project. Here it is:

Also, if you ever want to grab me a fresh beer, here are two easy ways

maurizio53 · March 2, 2026, 6:12pm

Hi, just installed it, but i am having problems with the select card as it doesn’t open anymore the list, reverted to the previous release and all is working properly…

Cloos · March 2, 2026, 6:33pm

Damn, I haven’t tried with previous versions of Home Assistant (before HA 2026.3) because I was sure it will still works. You can update to the HA 2026.3 beta or wait for the official release in a few days, but I will definitely do my best to add a working support for previous HA versions.

maurizio53 · March 2, 2026, 7:39pm

Can somebody help me to understand why this styling is not working on my side?
I have a button bubble card who shows the state of the sensor.speedrtest_download and i created this style to change the background color when the state of the sensor change:

.bubble-button {
  {% set v = states('sensor.speedtest_download') | float %}

  /* Sfondo dinamico */
  background-color:
    {% if v > 600 %}
      rgba(255, 80, 80, 0.35);   /* rosso */
    {% elif v < 200 %}
      rgba(255, 200, 0, 0.35);   /* giallo */
    {% else %}
      rgba(0, 180, 90, 0.35);    /* verde */
    {% endif %}

  /* Colore testo e icona */
  color:
    {% if v < 40 %}
      rgb(255, 80, 80);
    {% elif v < 80 %}
      rgb(255, 200, 0);
    {% else %}
      rgb(0, 180, 90);
    {% endif %};

But in my case it doesn’t work. Both the background and the icon color have always the same color lightblue which is not in the code.

Why? Where am i wrong?

robertklep · March 4, 2026, 5:52am

“Bubble Card doesn’t support Jinja templates”

15goudreau · March 6, 2026, 2:53am

I’m having an issue using a single light group to activate a popup card with 4 lights (the lights that make up the group)

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: "#master_bedroom_lights"
    button_type: name
    sub_button:
      main: []
      bottom: []
    slider_fill_orientation: left
    slider_value_position: right
  - type: horizontal-stack
    cards:
      - type: vertical-stack
        cards:
          - type: custom:bubble-card
            card_type: button
            button_type: switch
            sub_button:
              main: []
              bottom: []
            entity: light.master_bedroom_bowl_light
            name: Bowl
          - type: custom:bubble-card
            card_type: button
            button_type: switch
            sub_button:
              main: []
              bottom: []
            entity: light.ikea_of_sweden_floor_lamp_ww_light
            name: U lamp
      - type: vertical-stack
        cards:
          - type: custom:bubble-card
            card_type: button
            button_type: switch
            sub_button:
              main: []
              bottom: []
            entity: light.master_bedroom_bowl_light
            name: Bowl
          - type: custom:bubble-card
            card_type: button
            button_type: switch
            sub_button:
              main: []
              bottom: []
            entity: light.ikea_of_sweden_floor_lamp_ww_light
            name: U lamp
title: Master Bedroom Lights

Sometimes I get the animation of the popup with a slight dark tint over everything and then it’s hard to close out of. I can refresh the screen and it will load up the pop-up card improperly and then disappear.

sometimes it will briefly pop-up a card with 3 lights in a horizontal layout. I am using the pop-up fix but it doesn’t make a difference.

This is what it looks like when building it in the editor

This is what it looks like when I click on the button activating the pop-up

would love any help!

Cloos · March 6, 2026, 11:27am

Bubble Card 3

v3.1.3

Hi everyone!

Bubble Card v3.1.3 is here to fix the remaining issues introduced by the Home Assistant 2026.3 release and restore full compatibility with previous Home Assistant versions. I still strongly recommend updating Home Assistant though, the new dropdown system is much better, but this update ensures Bubble Card behaves correctly for everyone.

Huge thank you again for all your recent reports after the Home Assistant 2026.3 release. This new Home Assistant version gave me much more work than usual, but I’m now confident everything should work perfectly again

Here’s the full changelog:

Bug fixes and improvements

Dropdown behavior restored on previous HA versions:
Dropdown menus now work like before on previous Home Assistant versions (before 2026.3). #2242 #2256
Module editor compatibility with HA 2026.3:
Fixed the module editor so it now works correctly on Home Assistant 2026.3. #2249
Light slider white temperature with HA 2026.3:
Sliders now use color_temp_kelvin to support Home Assistant 2026.3. #2251
Editor style regressions after HA 2026.3:
Fixed several broken styles in the editor introduced by Home Assistant 2026.3.
Sub-button “Content layout” dropdown:
Fixed the “Content layout” dropdown menu in the sub-button editor. #2254
Unwanted scrolling in cards:
Removed unwanted scrolling for cards using dropdown menus. #2253