Bubble Card

Bubble Card is a minimalist and customizable card collection for Home Assistant with a nice pop-up touch... and a Module Store!

Table of contents

Installation Configuration Pop-up Horizontal buttons stack Button Media player Cover Select Climate Calendar Separator Empty column Sub-buttons only Sub-buttons Card layouts Actions Styling Templates Modules Help Contributing Donate

Installation

Home Assistant lowest supported version: 2023.9.0

Without HACS

1. Download this file: bubble-card.js
2. Add this file to your <config>/www folder
3. On your dashboard click on the icon at the right top corner then on Edit dashboard
4. Click again on that icon and then click on Manage resources
5. Click on Add resource
6. Copy and paste this: /local/bubble-card.js?v=1
7. Click on JavaScript Module then Create
8. Go back and refresh your page
9. You can now click on Add card in the bottom right corner and search for Bubble Card
10. After any update of the file you will have to edit /local/bubble-card.js?v=1 and change the version to any higher number

If it's not working, just try to clear your browser cache.`

With HACS (Recommended)

This method allows you to get updates directly on the HACS main page

1. If HACS is not installed yet, download it following the instructions on https://hacs.xyz/docs/setup/download/
2. Proceed to the HACS initial configuration following the instructions on https://hacs.xyz/docs/configuration/basic
3. On your sidebar go to HACS > Frontend
4. Click on the + button at the bottom right corner
5. Now search for Bubble Card and then click on the button at the bottom right corner to download it
6. Go back on your dashboard and click on the icon at the right top corner then on Edit dashboard
7. You can now click on Add card in the bottom right corner and search for Bubble Card

If it's not working, try to clear your browser cache.

Videos

You can also take a look at my YouTube channel for step by step videos.

Configuration

All options can be configured in the Home Assistant editor. But you can find more details and the YAML in the documentation below.

Main options (YAML + description)

Name	Type	Requirement	Supported options	Description
type	string	Required	custom:bubble-card	Type of the card
card_type	string	Required	button, calendar, climate, cover, empty-column, horizontal-buttons-stack, media-player, pop-up, select, separator or sub-buttons	Type of the Bubble Card, see below
styles	object list	Optional	Any CSS stylesheets	Allows you to customize your Bubble Card CSS, see styling

Global CSS variables (see Styling)

Variable	Expected value	Description
--bubble-border-radius	px	Border radius for all supported elements
--bubble-main-background-color	color	Main background color for all supported elements
--bubble-secondary-background-color	color	Secondary background color for all supported elements
--bubble-accent-color	color	Accent color for all supported elements
--bubble-icon-border-radius	px	Icon border radius for all supported elements
--bubble-icon-background-color	color	Icon background color for all supported elements
--bubble-sub-button-border-radius	px	Border radius for all sub-buttons
--bubble-sub-button-background-color	color	Background color for all sub-buttons
--bubble-box-shadow	see box shadow	Box shadow for all supported elements
--bubble-border	see border	Border for all supported cards

---

Check out this video to learn about Bubble Card and its capabilities. My YouTube channel is quite new and focuses on tutorials about Home Assistant and Bubble Card. Don’t hesitate to subscribe to help increase my channel’s visibility. Thank you in advance!

---

Pop-up

This card allows you to create a pop-up with any content. Each pop-up is hidden by default and can be opened by targeting its link (e.g. '#pop-up-name'), with any card that supports the navigate action, or with the horizontal buttons stack that is included.

[!TIP]

Pop-up trigger

This feature allows you to open a pop-up based on the state of any entity, for example, you can open a "Security" pop-up with a camera when a person is in front of your house. You can also create a toggle helper (input_boolean) and trigger its opening/closing in an automation.

Opening a pop-up when a binary_sensor is on

yaml type: custom:bubble-card card_type: pop-up hash: '#kitchen' name: Security icon: mdi:video trigger_entity: binary_sensor.front_door_motion trigger_state: 'on' trigger_close: true

Different ways to close a pop-up

They are many ways to close a pop-up. For instance, you can swipe from the pop-up header to the bottom, by doing a long swipe inside the pop-up to the bottom, by pressing Escape on desktop, by removing the hash in the URL or by simply pressing the close button.

Pop-up options

Options (YAML + descriptions)

Name	Type	Requirement	Supported options	Description
hash	string	Required	Any unique hash (e.g. '#kitchen') with ' '	This is how you will open your pop-up
popup_style	string	Optional	bubble (default) or classic	Define the pop-up visual style
popup_mode	string	Optional	default (default), fit-content, centered or adaptive-dialog	Define the pop-up layout mode
with_bottom_offset	boolean	Optional	true or false (default)	Only used with popup_mode: fit-content or adaptive-dialog. Applies a bottom offset on mobile, useful when your dashboard includes a footer card.
full_width_on_mobile	boolean	Optional	true or false (default)	Only used with popup_mode: centered. Expands the pop-up to full screen width on mobile, useful on smaller displays.
performance_mode	string	Optional	default (default) or performance	Optimize the pop-up open animation. performance slightly delays content rendering and background blur, also disables backdrop blur if set.
auto_close	string	Optional	A timeout in milliseconds (e.g. 10000 for 10s)	Auto close the pop-up after a timeout
close_on_click	boolean	Optional	true or false (default)	Automatically close the pop-up after any interaction
close_by_clicking_outside	boolean	Optional	true (default) or false	Close the pop-up by clicking outside of it
width_desktop	string	Optional	Any CSS value	Width on desktop (100% by default on mobile)
margin	string	Optional	Any CSS value	Use this only if your pop-up is not well centered on mobile (e.g. 13px)
margin_top_mobile	string	Optional	Any CSS value	Top margin on mobile (e.g. -56px if your header is hidden)
margin_top_desktop	string	Optional	Any CSS value	Top margin on desktop (e.g. 50vh for a half-sized pop-up or calc(100vh - 400px) for a fixed height of 400px)
bg_color	string	Optional	Any hex, rgb or rgba value	The background color of your pop-up (e.g. #ffffff for a white background)
bg_opacity	string	Optional	Any value from 0 to 100	The background opacity of your pop-up (e.g. 100 for no transparency)
bg_blur	string	Optional	Any value from 0 to 100	The background blur effect of your pop-up, this only work if bg_opacity is not set to 100 (e.g. 0 for no blur)
shadow_opacity	string	Optional	Any value from 0 to 100	The shadow opacity of your pop-up (e.g. 0 to hide it)
hide_backdrop	boolean	Optional	true or false (default)	Set this to true on the first pop-up of your main dashboard to disable the backdrop on all pop-ups.
background_update	boolean	Optional	true or false (default)	Update pop-up content in background (not recommended)
trigger_entity	string	Optional	Any entity	Open this pop-up based on the state of any entity
trigger_state	string	Optional (Required if trigger_entity is defined)	Any entity state	Entity state to open the pop-up
trigger_close	boolean	Optional	true or false (default)	Close the pop-up when trigger_state is different
open_action	object	Optional	See actions	Trigger an action when the pop-up is opening
close_action	object	Optional	See actions	Trigger an action when the pop-up is closing
show_header	boolean	Optional	true (default) or false	Show/Hide the pop-up header fully
show_previous_button	boolean	Optional	true or false (default)	Show a previous button next to the close button and navigate back to the previous pop-up when available
show_close_button	boolean	Optional	true (default) or false	Show or hide the close button while keeping the rest of the header visible
buttons_position	string	Optional	right (default) or left	Position of the close and previous buttons in the header
cards	list	Optional	Any Bubble Card, Home Assistant card or custom card	Define the content of your pop-up. See the pop-up example below.
You also have access to all the button settings for the header of the pop-up.		Optional		If undefined no header will be shown

CSS variables (see Styling)

Variable	Expected value	Description
--bubble-pop-up-border-radius	px	Border radius for the pop-up
--bubble-pop-up-main-background-color	color	Main background color for supported elements of the pop-up
--bubble-pop-up-background-color	color	Background color of the pop-up
--bubble-backdrop-background-color	color	Background color for the backdrop
You also have access to all the button CSS variables for the header of the pop-up.

Standalone pop-up format (v3.2.0+)

Since v3.2.0, pop-ups use a new standalone format where content cards are defined directly inside the pop-