{"id":14985182,"url":"https://github.com/clooos/bubble-card","last_synced_at":"2026-01-02T00:25:16.825Z","repository":{"id":189135753,"uuid":"680112919","full_name":"Clooos/Bubble-Card","owner":"Clooos","description":"Bubble Card is a minimalist card collection for Home Assistant with a nice pop-up touch.","archived":false,"fork":false,"pushed_at":"2025-12-22T14:42:58.000Z","size":9456,"stargazers_count":3521,"open_issues_count":99,"forks_count":132,"subscribers_count":32,"default_branch":"main","last_synced_at":"2025-12-24T00:49:52.393Z","etag":null,"topics":["button","card","cards","custom-card","custom-cards","dashboard","frontend","hacktoberfest","hacs","home-assistant","home-assistant-custom","homeassistant","lovelace","lovelace-custom-card","media-player","minimalist","mobile-first","pop-up","popup","slider"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Clooos.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":["Clooos"],"patreon":"Clooos","buy_me_a_coffee":"Clooos","custom":["paypal.com/donate/?business=MRVBV9PLT9ZPL\u0026no_recurring=0\u0026item_name=Hi%2C+I%27m+Clooos+the+creator+of+Bubble+Card.+Thank+you+for+supporting+me+and+my+passion.+You+are+awesome%21+%F0%9F%8D%BB\u0026currency_code=EUR"]}},"created_at":"2023-08-18T11:22:10.000Z","updated_at":"2025-12-23T22:25:24.000Z","dependencies_parsed_at":"2023-12-31T03:44:12.664Z","dependency_job_id":"64382d41-04eb-4814-915d-563c372280a9","html_url":"https://github.com/Clooos/Bubble-Card","commit_stats":{"total_commits":408,"total_committers":26,"mean_commits":"15.692307692307692","dds":"0.18137254901960786","last_synced_commit":"b693e9f75f624c87f2e032d0f0bb9205f5fa1c84"},"previous_names":["clooos/bubble-card"],"tags_count":135,"template":false,"template_full_name":null,"purl":"pkg:github/Clooos/Bubble-Card","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Clooos%2FBubble-Card","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Clooos%2FBubble-Card/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Clooos%2FBubble-Card/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Clooos%2FBubble-Card/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Clooos","download_url":"https://codeload.github.com/Clooos/Bubble-Card/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Clooos%2FBubble-Card/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28121156,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-12-29T02:00:07.021Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["button","card","cards","custom-card","custom-cards","dashboard","frontend","hacktoberfest","hacs","home-assistant","home-assistant-custom","homeassistant","lovelace","lovelace-custom-card","media-player","minimalist","mobile-first","pop-up","popup","slider"],"created_at":"2024-09-24T14:10:26.970Z","updated_at":"2025-12-29T21:04:45.445Z","avatar_url":"https://github.com/Clooos.png","language":"JavaScript","funding_links":["https://github.com/sponsors/Clooos","https://patreon.com/Clooos","https://buymeacoffee.com/Clooos","paypal.com/donate/?business=MRVBV9PLT9ZPL\u0026no_recurring=0\u0026item_name=Hi%2C+I%27m+Clooos+the+creator+of+Bubble+Card.+Thank+you+for+supporting+me+and+my+passion.+You+are+awesome%21+%F0%9F%8D%BB\u0026currency_code=EUR","https://www.buymeacoffee.com/clooos","https://www.paypal.com/donate/?business=MRVBV9PLT9ZPL\u0026no_recurring=0\u0026item_name=Hi%2C+I%27m+Clooos+the+creator+of+Bubble+Card.+Thank+you+for+supporting+me+and+my+passion.+You+are+awesome%21+%F0%9F%8D%BB\u0026currency_code=EUR","https://www.patreon.com/Clooos","https://www.patreon.com/c/Clooos","https://www.patreon.com/posts/adding-home-like-116764324","https://www.patreon.com/posts/showing-date-and-116766943","https://www.patreon.com/posts/showing-sub-on-116808854","https://www.patreon.com/posts/customizing-and-116753941","https://www.patreon.com/posts/119701174"],"categories":[],"sub_categories":[],"readme":"# Bubble Card\n\n![readme-images-bubble-card](https://github.com/Clooos/Bubble-Card/assets/36499953/c763bdad-ce71-46b0-aa9e-4ff0017072fe)\n\nBubble Card is a minimalist and customizable card collection for Home Assistant with a nice pop-up touch... and a Module Store!\n\n[![Stars](https://img.shields.io/github/stars/clooos/Bubble-Card)](#) [![Last commit](https://img.shields.io/github/last-commit/clooos/Bubble-Card)](#) [![YouTube](https://img.shields.io/badge/YouTube-My%20channel-red?logo=youtube)](https://www.youtube.com/@cloooos) [![Reddit Page](https://img.shields.io/badge/Reddit-r/BubbleCard-orange?logo=reddit)](https://www.reddit.com/r/BubbleCard/) [![Reddit Profile](https://img.shields.io/badge/Reddit-My%20stuff-orange?logo=reddit)](https://www.reddit.com/user/Clooooos/submitted/) [![Home Assistant Community Forum](https://img.shields.io/badge/Home%20Assistant-Community%20Forum-blue?logo=home-assistant)](https://community.home-assistant.io/t/bubble-card-a-minimalist-card-collection-for-home-assistant-with-a-nice-pop-up-touch/609678) [![Buy me a beer](https://img.shields.io/badge/Donate-Buy%20me%20a%20beer-yellow?logo=buy-me-a-coffee)](https://www.buymeacoffee.com/clooos) [![PayPal](https://img.shields.io/badge/Donate-PayPal-blue?logo=paypal)](https://www.paypal.com/donate/?business=MRVBV9PLT9ZPL\u0026no_recurring=0\u0026item_name=Hi%2C+I%27m+Clooos+the+creator+of+Bubble+Card.+Thank+you+for+supporting+me+and+my+passion.+You+are+awesome%21+%F0%9F%8D%BB\u0026currency_code=EUR) [![Patreon Clooos](https://img.shields.io/badge/Patreon-Clooos-orange?logo=patreon)](https://www.patreon.com/Clooos)\n\n\n\u003cbr\u003e\n\n## Table of contents\n\n**[`Installation`](#installation)** **[`Configuration`](#configuration)** **[`Pop-up`](#pop-up)** **[`Horizontal buttons stack`](#horizontal-buttons-stack)** **[`Button`](#button)** **[`Media player`](#media-player)** **[`Cover`](#cover)** **[`Select`](#select)** **[`Climate`](#climate)** **[`Calendar`](#calendar)** **[`Separator`](#separator)** **[`Empty column`](#empty-column)** **[`Sub-buttons`](#sub-buttons)** **[`Card layouts`](#card-layouts)** **[`Actions`](#tap-double-tap-and-hold-actions)** **[`Styling`](#styling)** **[`Templates`](#templates)** **[`Modules`](#modules)** **[`Help`](#help)** **[`Donate`](#donate)**\n\n\u003cbr\u003e\n\n## Installation\n\n**Home Assistant lowest supported version:** 2023.9.0\n\n\u003cdetails\u003e\n\n\u003csummary\u003eWithout HACS\u003c/summary\u003e\n\n\u003cbr\u003e\n\n1. Download these files: [bubble-card.js](https://raw.githubusercontent.com/Clooos/Bubble-Card/main/dist/bubble-card.js) and [bubble-pop-up-fix.js](https://raw.githubusercontent.com/Clooos/Bubble-Card/main/dist/bubble-pop-up-fix.js)\n2. Add these files to your `\u003cconfig\u003e/www` folder\n3. On your dashboard click on the icon at the right top corner then on `Edit dashboard`\n4. Click again on that icon and then click on `Manage resources`\n5. Click on `Add resource`\n6. Copy and paste this: `/local/bubble-card.js?v=1`\n7. Click on `JavaScript Module` then `Create`\n8. Go back and refresh your page\n9. You can now click on `Add card` in the bottom right corner and search for `Bubble Card`\n10. 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\n\nIf it's not working, just try to clear your browser cache.`\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eWith HACS (Recommended)\u003c/summary\u003e\n\n\u003cbr\u003e\n\nThis method allows you to get updates directly on the HACS main page\n\n1. If HACS is not installed yet, download it following the instructions on [https://hacs.xyz/docs/setup/download/](https://hacs.xyz/docs/use/download/download/)\n2. Proceed to the HACS initial configuration following the instructions on [https://hacs.xyz/docs/configuration/basic](https://hacs.xyz/docs/configuration/basic)\n3. On your sidebar go to `HACS` \u003e `Frontend`\n4. Click on the `+` button at the bottom right corner\n5. Now search for `Bubble Card` and then click on the button at the bottom right corner to download it\n6. Go back on your dashboard and click on the icon at the right top corner then on `Edit dashboard`\n7. You can now click on `Add card` in the bottom right corner and search for `Bubble Card`\n\nIf it's not working, try to clear your browser cache.\n\n#### Videos\n\nYou can also take a look at my YouTube channel for step by step videos.\n\n[![YouTube](https://img.shields.io/badge/YouTube-My%20channel-red?logo=youtube)](https://www.youtube.com/@cloooos)\n\n\u003c/details\u003e\n\n\u003cbr\u003e\n\n[![Open Bubble Card on Home Assistant Community Store (HACS).](https://my.home-assistant.io/badges/hacs_repository.svg)](https://my.home-assistant.io/redirect/hacs_repository/?owner=clooos\u0026repository=Bubble-Card\u0026category=frontend)\n\n\u003cbr\u003e\n\n## Configuration\n\nAll options can be configured in the Home Assistant editor. But you can find more details and the YAML in the documentation below.\n\n\u003cdetails\u003e\n\n**\u003csummary\u003eMain options (YAML + description)\u003c/summary\u003e**\n\n| Name | Type | Requirement | Supported options | Description |\n| --- | --- | --- | --- | --- |\n| `type` | string | **Required** | `custom:bubble-card` | Type of the card |\n| `card_type` | string | **Required** | `button`, `cover`, `empty-column`, `horizontal-buttons-stack`, `media-player`, `pop-up`, `select` or `separator` | Type of the Bubble Card, see below |\n| `styles` | object list | Optional | Any CSS stylesheets | Allows you to customize your Bubble Card CSS, see [styling](#styling) |\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n**\u003csummary\u003eGlobal CSS variables (see [Styling](#styling))\u003c/summary\u003e**\n\n| Variable | Expected value | Description |\n| --- | --- | --- |\n| `--bubble-border-radius` | `px` | Border radius for all supported elements |\n| `--bubble-main-background-color` | `color` | Main background color for all supported elements |\n| `--bubble-secondary-background-color` | `color` | Secondary background color for all supported elements |\n| `--bubble-accent-color` | `color` | Accent color for all supported elements |\n| `--bubble-icon-border-radius` | `px` | Icon border radius for all supported elements |\n| `--bubble-icon-background-color` | `color` | Icon background color for all supported elements |\n| `--bubble-sub-button-border-radius` | `px` | Border radius for all sub-buttons |\n| `--bubble-sub-button-background-color` | `color` | Background color for all sub-buttons |\n| `--bubble-box-shadow` | see [box shadow](https://developer.mozilla.org/fr/docs/Web/CSS/box-shadow) | Box shadow for all supported elements |\n| `--bubble-border` | see [border](https://developer.mozilla.org/fr/docs/Web/CSS/border) | Border for all supported cards |\n\n\u003c/details\u003e\n\n\u003cbr\u003e\n\n---\n\n\u003cbr\u003e\n\n[![Bubble-Card---Youtube-github](https://github.com/user-attachments/assets/643aa16a-3fc9-4770-8269-62ec01db49b3)](https://www.youtube.com/watch?v=0hSQOlBxKKI)\n\n**Check out this [video](https://www.youtube.com/watch?v=0hSQOlBxKKI) 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!\n\n\u003cbr\u003e\n\n---\n\n\u003cbr\u003e\n\n## Pop-up\n\n![readme-pop-up](https://github.com/Clooos/Bubble-Card/assets/36499953/086bdcc4-62aa-445b-b265-b57c4e38b8a0)\n\nThis card allows you to convert any vertical stack into a pop-up. 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](#tap-double-tap-and-hold-actions), or with the [horizontal buttons stack](#horizontal-buttons-stack) that is included.\n\n\u003e [!IMPORTANT] \n\u003e To avoid misalignment with your view, place this card after all other dashboard cards. You can't trigger it from a different view.\n\u003e\n\u003e **For YAML only users:** This card must be placed within a [vertical stack](https://www.home-assistant.io/dashboards/vertical-stack/) card at the topmost position to function properly. See example below.\n\u003e\n\u003e **You can also watch [this step by step video](https://www.youtube.com/watch?v=7mOV7BfWoFc).** This video is bit outdated, you don't need to create a vertical stack anymore, it will be added automatically.\n\n\u003e [!TIP]\n\u003e ### Pop-up trigger \n\u003e 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.\n\u003e \u003cdetails\u003e\n\u003e \u003csummary\u003eOpening a pop-up when a \u003ccode\u003ebinary_sensor\u003c/code\u003e is \u003ccode\u003eon\u003c/code\u003e\u003c/summary\u003e\n\u003e \u003cbr\u003e\n\u003e\n\u003e ```yaml\n\u003e type: custom:bubble-card\n\u003e card_type: pop-up\n\u003e hash: '#kitchen'\n\u003e name: Security\n\u003e icon: mdi:video\n\u003e trigger_entity: binary_sensor.front_door_motion\n\u003e trigger_state: 'on'\n\u003e trigger_close: true\n\u003e ```\n\u003e \n\u003e \u003c/details\u003e\n\u003e\n\u003e ### Different ways to close a pop-up \n\u003e 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.\n\u003e\n\u003e ### Pop-up initialization fix\n\u003e If you notice that pop-up content appears upon page load, consider installing this fix as an additional module.\n\u003e \u003cdetails\u003e\n\u003e \u003csummary\u003eInstallation\u003c/summary\u003e\n\u003e \u003cbr\u003e\n\u003e\n\u003e You can do this by adding `bubble-pop-up-fix.js` to your `configuration.yaml` like so:\n\u003e ```yaml\n\u003e frontend:\n\u003e extra_module_url:\n\u003e - /hacsfiles/Bubble-Card/bubble-pop-up-fix.js\n\u003e ```\n\u003e If you didn't install it with HACS, change the path accordingly. Then, clear your browser cache.\n\u003e \n\u003e For Android Home Assistant Companion App users, you can close the app, then clear the app cache. If it's still not working, you can close and restart the app again.\n\u003e \n\u003e For iOS Home Assistant Companion App users, you can go to your Home Assistant settings, then navigate to Companion App \u003e Debug \u003e Clear Frontend Cache (or something similar), then refresh the page or restart the app.\n\u003e \n\u003e \u003c/details\u003e\n\n### Pop-up options\n\n\u003cdetails\u003e\n\n**\u003csummary\u003eOptions (YAML + descriptions)\u003c/summary\u003e**\n\n| Name | Type | Requirement | Supported options | Description |\n| --- | --- | --- | --- | --- |\n| `hash` | string | **Required** | Any unique hash (e.g. `'#kitchen'`) with ' ' | This is how you will open your pop-up |\n| `auto_close` | string | Optional | A timeout in milliseconds (e.g. `10000` for 10s) | Auto close the pop-up after a timeout |\n| `close_on_click` | boolean | Optional | `true` or `false` (default) | Automatically close the pop-up after any interaction |\n| `close_by_clicking_outside` | boolean | Optional | `true` (default) or `false` | Close the pop-up by clicking outside of it |\n| `width_desktop` | string | Optional | Any CSS value | Width on desktop (`100%` by default on mobile) |\n| `margin` | string | Optional | Any CSS value | Use this **only** if your pop-up is not well centered on mobile (e.g. `13px`) |\n| `margin_top_mobile` | string | Optional | Any CSS value | Top margin on mobile (e.g. `-56px` if your header is hidden) |\n| `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`) |\n| `bg_color` | string | Optional | Any hex, rgb or rgba value | The background color of your pop-up (e.g. `#ffffff` for a white background) |\n| `bg_opacity` | string | Optional | Any value from `0` to `100` | The background opacity of your pop-up (e.g. `100` for no transparency) |\n| `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)|\n| `shadow_opacity` | string | Optional | Any value from `0` to `100` | The shadow opacity of your pop-up (e.g. `0` to hide it) |\n| `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. |\n| `background_update` | boolean | Optional | `true` or `false` (default) | Update pop-up content in background (not recommended) |\n| `trigger_entity` | string | Optional | Any entity | Open this pop-up based on the state of any entity |\n| `trigger_state` | string | Optional (**Required** if `trigger_entity` is defined) | Any entity state | Entity state to open the pop-up |\n| `trigger_close` | boolean | Optional | `true` or `false` (default) | Close the pop-up when `trigger_state` is different |\n| `open_action` | object | Optional | See [actions](#tap-double-tap-and-hold-actions) | Trigger an action when the pop-up is opening |\n| `close_action` | object | Optional | See [actions](#tap-double-tap-and-hold-actions) | Trigger an action when the pop-up is closing |\n| `show_header` | boolean | Optional | `true` or `false` (default) | Show/Hide the pop-up header fully |\n| You also have access to [all the button settings](#button) for the header of the pop-up. | | Optional | | If undefined no header will be shown |\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n**\u003csummary\u003eCSS variables (see [Styling](#styling))\u003c/summary\u003e**\n\n| Variable | Expected value | Description |\n| --- | --- | --- |\n| `--bubble-pop-up-border-radius` | `px` | Border radius for the pop-up |\n| `--bubble-pop-up-main-background-color` | `color` | Main background color for supported elements of the pop-up |\n| `--bubble-pop-up-background-color` | `color` | Background color of the pop-up |\n| `--bubble-backdrop-background-color` | `color` | Background color for the backdrop |\n| You also have access to [all the button CSS variables](#button-options) for the header of the pop-up. | | |\n\n\u003c/details\u003e\n\n\n#### Examples\n\n\u003cdetails\u003e\n\n\u003csummary\u003eA pop-up\u003c/summary\u003e\n\n\u003cbr\u003e\n\n```yaml\ntype: vertical-stack\ncards:\n - type: custom:bubble-card\n card_type: pop-up\n hash: '#kitchen'\n name: Kitchen\n icon: mdi:fridge\n entity: light.kitchen\n```\n\n\u003c/details\u003e\n\u003cdetails\u003e\n\n\u003csummary\u003eA button to open the pop-up\u003c/summary\u003e\n\n\u003cbr\u003e\n\n```yaml\ntype: custom:bubble-card\ncard_type: button\nbutton_type: name\nname: Kitchen\nicon: mdi:fridge\nbutton_action:\n tap_action:\n action: navigate\n navigation_path: '#kitchen'\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eA pop-up with a fixed height\u003c/summary\u003e\n\n\u003cbr\u003e\n\nReplace `400px` with the size you need.\n\n```yaml\ntype: vertical-stack\ncards:\n - type: custom:bubble-card\n card_type: pop-up\n hash: '#kitchen'\n name: Kitchen\n icon: mdi:fridge\n entity: light.kitchen\n margin_top_mobile: calc(100vh - 400px)\n margin_top_desktop: calc(100vh - 400px)\n```\n\n\u003c/details\u003e\n\n\u003cbr\u003e\n\n---\n\n\u003cbr\u003e\n\n## Horizontal buttons stack\n\n![readme-horizontal-buttons-stack](https://github.com/Clooos/Bubble-Card/assets/36499953/8fe89ade-c77a-469b-891f-577e0bb2f46b)\n\nThis card is a good companion to the pop-up card, allowing you to open the corresponding pop-ups. It also allows you to open any page of your dashboard. In addition, you can add your motion/occupancy sensors so that the order of the buttons adapts according to the room you just entered. This card is scrollable, remains visible, and acts as a footer.\n\n\u003e [!IMPORTANT] \n\u003e This card has to be the last one in your view (after every card and pop-up). It can't be inside any stack.\n\n### Horizontal buttons stack options\n\n\u003cdetails\u003e\n\n**\u003csummary\u003eOptions (YAML + descriptions)\u003c/summary\u003e**\n\n| Name | Type | Requirement | Supported options | Description |\n| --- | --- | --- | --- | --- |\n| `1_link` | string | **Required** | The pop-up hash (e.g. `'#kitchen'`) with ' ' or any link | A link to open |\n| `1_name` | string | Optional | Any string | A name for your button |\n| `1_icon` | string | Optional | Any `mdi:` icon | An icon for your button |\n| `1_entity` | string | Optional | Any light or light group | Display the color of that light in background |\n| `1_pir_sensor` | string | Optional | Any binary sensor | At least one pir sensor or more for `auto_order`, in fact it also works with any entity type, for example you can add light groups and the order will change based on the last changed states. |\n| `auto_order` | boolean | Optional | `true` or `false` (default) | Change the order of the buttons according to the `_pir_sensor` last changed time, **it needs to be `false` if you don't have any `_pir_sensor` in your code** |\n| `margin` | string | Optional | Any CSS value | Use this **only** if your `horizontal-buttons-stack` is not well centered on mobile (e.g. `13px`) |\n| `width_desktop` | string | Optional | Any CSS value | Width on desktop (`100%` by default on mobile) |\n| `is_sidebar_hidden` | boolean | Optional | `true` or `false` (default) | Fix the horizontal buttons stack position if the sidebar is hidden on the desktop (only if you have made a modification to hide it yourself) |\n| `rise_animation` | boolean | Optional | `true` (default) or `false` | Set this to `false` to disable the animation that activates once the page has loaded |\n| `highlight_current_view` | boolean | Optional | `true` or `false` (default) | Highlight current hash / view with a smooth animation |\n| `hide_gradient` | boolean | Optional | `true` or `false` (default) | Set this to `false` to hide the gradient |\n\n\u003e [!IMPORTANT] \n\u003e The variables starting with a number define your buttons, just change this number to add more buttons (see example below).\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n**\u003csummary\u003eCSS variables (see [Styling](#styling))\u003c/summary\u003e**\n\n| Variable | Expected value | Description |\n| --- | --- | --- |\n| `--bubble-horizontal-buttons-stack-border-radius` | `px` | Border radius for horizontal button stack buttons |\n| `--bubble-horizontal-buttons-stack-background-color` | `color` | Background color for horizontal button stack buttons |\n\n\u003c/details\u003e\n\n\n#### Example\n\n\u003cdetails\u003e\n\n\u003csummary\u003eAn horizontal buttons stack that reorganize itself based on occupancy sensors\u003c/summary\u003e\n\n\u003cbr\u003e\n\n```yaml\ntype: custom:bubble-card\ncard_type: horizontal-buttons-stack\nauto_order: true\n1_name: Living room\n1_icon: mdi:sofa\n1_link: '#living-room'\n1_entity: light.living_room\n1_pir_sensor: binary_sensor.living_room_motion\n2_name: Kitchen\n2_icon: mdi:fridge\n2_link: '#kitchen'\n2_entity: light.kitchen\n2_pir_sensor: binary_sensor.kitchen_motion\n3_name: Dining room\n3_icon: mdi:silverware-fork-knife\n3_link: '#dining-room'\n3_entity: light.dining_room\n3_pir_sensor: binary_sensor.dining_room_motion\n```\n\n\u003c/details\u003e\n\n\u003cbr\u003e\n\n---\n\n\u003cbr\u003e\n\n## Button\n\n![readme-button-without-sub-buttons](https://github.com/Clooos/Bubble-Card/assets/36499953/790cbe3c-bdcc-4242-81ac-48e6ca2f1d46)\n\nThis card is very versatile. It can be used as a **switch**, a **slider**, a **state** or a **name/text** button.\n\n\u003e [!TIP]\n\u003e ### What are the differences between all the button types?\n\u003e\n\u003e - **Switch button:** This is the default button type. By default, it toggles an entity and its background color changes based on the entity's state or the color of a light. You can change its action in the **Tap action on card** section.\n\u003e\n\u003e - **Slider button:** This button type lets you control entities with adjustable ranges. It's ideal for dimming lights, and its fill color will adapt to the light's color. You can also use it to display values, such as a battery level.\n\u003e Supported entities for sliders:\n\u003e - Light (brightness)\n\u003e - Media player (volume)\n\u003e - Cover (position)\n\u003e - Fan (percentage)\n\u003e - Climate (temperature)\n\u003e - Input number and number (value)\n\u003e - Battery sensor (percentage, read only)\n\u003e\n\u003e You can also use any entity with a numeric state by disabling the entity filter in **Slider settings**, then define the `min` and `max` values. This option is read only.\n\u003e\n\u003e - **State button:** Perfect for displaying information from a sensor or any entity. When you press it, it will show the \"More info\" panel of the entity. Its background color does not change.\n\u003e\n\u003e - **Name/Text button:** The only button type that doesn't need an entity. It allows you to display a short text, a name or a title. You can also add actions to it. Its background color does not change.\n\n### Button options\n\n\u003cdetails\u003e\n\n**\u003csummary\u003eOptions (YAML + descriptions)\u003c/summary\u003e**\n\n| Name | Type | Requirement | Supported options | Description |\n| --- | --- | --- | --- | --- |\n| `entity` | string | **Required** | Any entity | An entity to control |\n| `button_type` | string | Optional | `switch` (default), `slider`, `state` or `name` | The behavior of your button |\n| `name` | string | Optional | Any string | A name for your button, if not defined it will display the entity name |\n| `icon` | string | Optional | Any `mdi:` icon | An icon for your button, if not defined it will display the entity icon or the `entity-picture` |\n| `force_icon` | boolean | Optional | `true` or `false` (default) | Give the priority to the icon instead of the `entity-picture` |\n| `use_accent_color` | boolean | Optional (`false` default) | **For lights only.** Use the theme's accent color instead of the light's color. |\n| `show_state` | boolean | Optional | `true` or `false` (default) | Show or hide the state of your `entity` |\n| `show_name` | boolean | Optional | `true` (default) or `false` | Show or hide the name |\n| `show_icon` | boolean | Optional | `true` (default) or `false` | Show or hide the icon |\n| `show_last_changed` | boolean | Optional | `true` or `false` (default) | Show the last changed time of your `entity` |\n| `show_last_updated` | boolean | Optional | `true` or `false` (default) | Show the last updated time of your `entity` |\n| `show_attribute` | boolean | Optional | `true` or `false` (default) | Show an attribute of your `entity` below its `name` |\n| `attribute` | string | Optional (required if `show_attribute` is set to `true`) | An attribute from your `entity` | The attribute to show (e.g. `brightness`) |\n| `scrolling_effect` | boolean | Optional | `true` (default) or `false` | Allow text to scroll when the content exceeds the size of their container |\n| `button_action` | object | Optional | `tap_action`, `double_tap_action` or `hold_action`, see below | Allow to change the default actions on button click. |\n| `tap_action` | object | Optional | See [actions](#tap-double-tap-and-hold-actions) | Define the type of action on icon click, if undefined, `more-info` will be used |\n| `double_tap_action` | object | Optional | See [actions](#tap-double-tap-and-hold-actions) | Define the type of action on icon double click, if undefined, `none` will be used |\n| `hold_action` | object | Optional | See [actions](#tap-double-tap-and-hold-actions) | Define the type of action on icon hold, if undefined, `more-info` will be used |\n| `card_layout` | string | Optional | `normal` (default if not in section view), `large` (default if in section view), `large-2-rows`, `large-sub-buttons-grid` | Styling layout of the card, see [card layouts](#card-layouts) |\n| `rows` | number | Optional | Any number | Number of rows (height) (e.g. `2`) |\n| `sub_button` | object | Optional | See [sub-buttons](#sub-buttons) | Add customized buttons fixed to the right |\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n**\u003csummary\u003eCSS variables (see [Styling](#styling))\u003c/summary\u003e**\n\n| Variable | Expected value | Description |\n| --- | --- | --- |\n| `--bubble-button-main-background-color` | `color` | Main background color for supported elements in the button |\n| `--bubble-button-border-radius` | `px` | Border radius for the button |\n| `--bubble-button-icon-border-radius` | `px` | Border radius for the button icon container |\n| `--bubble-button-icon-background-color` | `color` | Background color for the button icon container |\n| `--bubble-light-white-color` | `color` | Replace the default white color of light buttons/sliders |\n| `--bubble-light-color` | `color` | Replace the color of light buttons/sliders (even RGB lights) |\n| `--bubble-button-box-shadow` | See [box shadow](https://developer.mozilla.org/fr/docs/Web/CSS/box-shadow) | Box shadow for the button |\n\n\u003c/details\u003e\n\nThese options are only available when `button_type` is set to `slider`.\n\n\u003cdetails\u003e\n\n**\u003csummary\u003eSlider options (YAML + descriptions)\u003c/summary\u003e**\n\n| Name | Type | Requirement | Description |\n| --------------------- | ------- | ------------------------------- | ------------------------------------------------------------------------------------------------------- |\n| `min_value` | number | Optional | The minimum value of the slider. For custom sliders. |\n| `max_value` | number | Optional | The maximum value of the slider. For custom sliders. |\n| `step` | number | Optional | The step value of the slider. |\n| `tap_to_slide` | boolean | Optional (`false` default) | Enable the previous slider behavior where you tap to activate the slider, instead of holding it. |\n| `relative_slide` | boolean | Optional (`false` default ) | Update value relative to the starting value, rather than the starting touch point. |\n| `read_only_slider` | boolean | Optional (`false` default) | Make the slider read-only. Automatically enabled for some entities like sensors. |\n| `slider_live_update` | boolean | Optional (`false` default) | The entity state is updated while sliding. **This feature is not recommended for all entities.** |\n| `allow_light_slider_to_0` | boolean | Optional (`false` default) | **For lights only.** Allows the slider to reach 0%, which turns off the light. Not available with `tap_to_slide`. |\n| `light_transition` | boolean | Optional (`false` default) | **For lights only.** Enable smooth brightness transitions for supported lights. |\n| `light_transition_time` | number | Optional (`500` default) | **For lights only.** The transition time in milliseconds. Requires `light_transition: true`. |\n\n\u003c/details\u003e\n\n#### Examples\n\n\u003cdetails\u003e\n\n\u003csummary\u003eA slider button that can control the brightness of a light\u003c/summary\u003e\n\n\u003cbr\u003e\n\n```yaml\ntype: custom:bubble-card\ncard_type: button\nbutton_type: slider\nentity: light.kitchen_led\nname: Kitchen LED\nicon: mdi:led-strip-variant\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eA button with more options\u003c/summary\u003e\n\n\u003cbr\u003e\n\n```yaml\ntype: custom:bubble-card\ncard_type: button\nentity: light.your_light\nbutton_type: switch\nshow_icon: true\nforce_icon: true\nshow_name: true\nshow_last_changed: true\nshow_state: true\nshow_last_updated: true\nshow_attribute: true\nattribute: brightness\nscrolling_effect: true\ncard_layout: large\nbutton_action:\n tap_action:\n action: toggle\ntap_action:\n action: more-info\nsub_button:\n - entity: light.your_light\n icon: ''\n show_state: false\n show_attribute: true\n attribute: brightness\n show_icon: false\n show_background: false\n show_name: false\n```\n\n\u003c/details\u003e\n\n\u003cbr\u003e\n\n---\n\n\u003cbr\u003e\n\n## Media player\n\n![readme-media-player](https://github.com/Clooos/Bubble-Card/assets/36499953/c7ee0752-00e3-4edf-8e1c-983fbd29b5f3)\n\nThis card allows you to control a media player entity.\n\n### Media player options\n\n\u003cdetails\u003e\n\n**\u003csummary\u003eOptions (YAML + descriptions)\u003c/summary\u003e**\n\n| Name | Type | Requirement | Supported options | Description |\n| --- | --- | --- | --- | --- |\n| `entity` | string | **Required** | Any media player | The media player to control |\n| `name` | string | Optional | Any string | A name for your media player, if not defined it will display the entity name |\n| `icon` | string | Optional | Any `mdi:` icon | An icon for your media player, if not defined it will display the entity icon or the `entity-picture` |\n| `force_icon` | boolean | Optional | `true` or `false` (default) | Give the priority to the icon instead of the `entity-picture` |\n| `show_state` | boolean | Optional | `true` or `false` (default) | Show or hide the state of your `entity` |\n| `show_name` | boolean | Optional | `true` (default) or `false` | Show or hide the name |\n| `show_icon` | boolean | Optional | `true` (default) or `false` | Show or hide the icon |\n| `show_last_changed` | boolean | Optional | `true` or `false` (default) | Show the last changed time of your `entity` |\n| `show_last_updated` | boolean | Optional | `true` or `false` (default) | Show the last updated time of your `entity` |\n| `show_attribute` | boolean | Optional | `true` or `false` (default) | Show an attribute of your `entity` below its `name` |\n| `attribute` | string | Optional (required if `show_attribute` is set to `true`) | An attribute from your `entity` | The attribute to show (e.g. `brightness`) |\n| `scrolling_effect` | boolean | Optional | `true` (default) or `false` | Allow text to scroll when the content exceeds the size of their container |\n| `min_volume` | number | Optional | Any number | The minimum value of the volume slider. |\n| `max_volume` | number | Optional | Any number | The maximum value of the volume slider. |\n| `cover_background` | boolean | Optional | `true` or `false` (default) | Use a blurred media cover as the card background. |\n| `button_action` | object | Optional | `tap_action`, `double_tap_action` or `hold_action`, see [actions](#tap-double-tap-and-hold-actions) | Allow to change the default actions on button click. |\n| `tap_action` | object | Optional | See [actions](#tap-double-tap-and-hold-actions) | Define the type of action on icon click, if undefined, `more-info` will be used. |\n| `double_tap_action` | object | Optional | See [actions](#tap-double-tap-and-hold-actions) | Define the type of action on icon double click, if undefined, `none` will be used. |\n| `hold_action` | object | Optional | See [actions](#tap-double-tap-and-hold-actions) | Define the type of action on icon hold, if undefined, `more-info` will be used. |\n| `card_layout` | string | Optional | `normal` (default if not in section view), `large` (default if in section view), `large-2-rows`, `large-sub-buttons-grid` | Styling layout of the card, see [card layouts](#card-layouts) |\n| `rows` | number | Optional | Any number | Number of rows (height) (e.g. `2`) |\n| `sub_button` | object | Optional | See [sub-buttons](#sub-buttons) | Add customized buttons fixed to the right |\n| `hide` | object | Optional | See below | Hide buttons from the card |\n\n#### Hide options\n\n| Name | Type | Requirement | Supported options | Description |\n| --- | --- | --- | --- | --- |\n| `play_pause_button` | boolean | Optional | `true` or `false` (default) | Hide the play/pause button |\n| `volume_button` | boolean | Optional | `true` or `false` (default) | Hide the volume button |\n| `previous_button` | boolean | Optional | `true` or `false` (default) | Hide the previous button |\n| `next_button` | boolean | Optional | `true` or `false` (default) | Hide the next button |\n| `power_button` | boolean | Optional | `true` or `false` (default) | Hide the power button |\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n**\u003csummary\u003eCSS variables (see [Styling](#styling))\u003c/summary\u003e**\n\n| Variable | Expected value | Description |\n| --- | --- | --- |\n| `--bubble-media-player-main-background-color` | `color` | Main background color for the media player |\n| `--bubble-media-player-border-radius` | `px` | Border radius for the media player |\n| `--bubble-media-player-buttons-border-radius` | `px` | Border radius for the media player buttons |\n| `--bubble-media-player-slider-background-color` | `color` | Background color for the volume slider |\n| `--bubble-media-player-icon-border-radius` | `px` | Border radius for the media player icon container |\n| `--bubble-media-player-icon-background-color` | `color` | Background color for the media player icon container |\n| `--bubble-media-player-box-shadow` | See [box shadow](https://developer.mozilla.org/fr/docs/Web/CSS/box-shadow) | Box shadow for the media player |\n\n\u003c/details\u003e\n\n\n#### Examples\n\n\u003cdetails\u003e\n\n\u003csummary\u003eA media player with all the options\u003c/summary\u003e\n\n\u003cbr\u003e\n\n```yaml\ntype: custom:bubble-card\ncard_type: media-player\nname: Media player\nentity: media_player.your_media_player\nshow_state: true\nshow_last_updated: true\nshow_attribute: true\nattribute: assumed_state\ncard_layout: large\nscrolling_effect: false\nshow_icon: false\nforce_icon: true\nshow_name: false\nshow_last_changed: true\ncolumns: 2\nrows: 1\nmin_volume: 10\nmax_volume: 80\ncover_background: true\ntap_action:\n action: toggle\nhide:\n play_pause_button: true\n volume_button: true\n previous_button: true\n next_button: true\n power_button: true\nsub_button:\n - entity: media_player.salon_2\n icon: mdi:volume-high\n name: Volume level\n tap_action:\n action: more-info\n show_name: false\n show_state: false\n show_last_updated: false\n show_attribute: true\n show_background: false\n attribute: volume_level\n```\n\n\u003c/details\u003e\n\n\u003cbr\u003e\n\n---\n\n\u003cbr\u003e\n\n## Cover\n\n![readme-cover-bubble-card](https://github.com/user-attachments/assets/9eb46c69-ee40-4dc7-88c7-9073f9deda12)\n\nThis card allows you to control your `cover` entities.\n\n### Cover options\n\n\u003cdetails\u003e\n\n**\u003csummary\u003eOptions (YAML + descriptions)\u003c/summary\u003e**\n\n| Name | Type | Requirement | Supported options | Description |\n| --- | --- | --- | --- | --- |\n| `entity` | string | **Required** | Any cover | A cover to control |\n| `name` | string | Optional | Any string | A name for your cover, if not defined it will display the entity name |\n| `force_icon` | boolean | Optional | `true` or `false` (default) | Give the priority to the icon instead of the `entity-picture` |\n| `show_state` | boolean | Optional | `true` or `false` (default) | Show or hide the state of your `entity` |\n| `show_name` | boolean | Optional | `true` (default) or `false` | Show or hide the name |\n| `show_icon` | boolean | Optional | `true` (default) or `false` | Show or hide the icon |\n| `show_last_changed` | boolean | Optional | `true` or `false` (default) | Show the last changed time of your `entity` |\n| `show_last_updated` | boolean | Optional | `true` or `false` (default) | Show the last updated time of your `entity` |\n| `show_attribute` | boolean | Optional | `true` or `false` (default) | Show an attribute of your `entity` below its `name` |\n| `attribute` | string | Optional (required if `show_attribute` is set to `true`) | An attribute from your `entity` | The attribute to show (e.g. `brightness`) |\n| `scrolling_effect` | boolean | Optional | `true` (default) or `false` | Allow text to scroll when the content exceeds the size of their container |\n| `icon_open` | string | Optional | Any `mdi:` icon | An icon for your open cover, if not defined it will display the default open cover icon |\n| `icon_close` | string | Optional | Any `mdi:` icon | An icon for your closed cover, if not defined it will display the default closed cover icon |\n| `icon_up` | string | Optional | Any `mdi:` icon | An icon for your open cover button, if not defined it will display the default open cover icon |\n| `icon_down` | string | Optional | Any `mdi:` icon | An icon for your close cover button, if not defined it will display the default close cover icon |\n| `open_service` | string | Optional | Any service or script | A service to open your cover, default to `cover.open_cover` |\n| `stop_service` | string | Optional | Any service or script | A service to stop your cover, default to `cover.stop_cover` |\n| `close_service` | string | Optional | Any service or script | A service to close your cover, default to `cover.close_cover` |\n| `button_action` | object | Optional | `tap_action`, `double_tap_action` or `hold_action`, see [actions](#tap-double-tap-and-hold-actions) | Allow to change the default actions on button click. |\n| `tap_action` | object | Optional | See [actions](#tap-double-tap-and-hold-actions) | Define the type of action on icon click, if undefined, `more-info` will be used. |\n| `double_tap_action` | object | Optional | See [actions](#tap-double-tap-and-hold-actions) | Define the type of action on icon double click, if undefined, `none` will be used. |\n| `hold_action` | object | Optional | See [actions](#tap-double-tap-and-hold-actions) | Define the type of action on icon hold, if undefined, `more-info` will be used. |\n| `card_layout` | string | Optional | `normal` (default if not in section view), `large` (default if in section view), `large-2-rows`, `large-sub-buttons-grid` | Styling layout of the card, see [card layouts](#card-layouts) |\n| `rows` | number | Optional | Any number | Number of rows (height) (e.g. `2`) |\n| `sub_button` | object | Optional | See [sub-buttons](#sub-buttons) | Add customized buttons fixed to the right |\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n**\u003csummary\u003eCSS variables (see [Styling](#styling))\u003c/summary\u003e**\n\n| Variable | Expected value | Description |\n| --- | --- | --- |\n| `--bubble-cover-main-background-color` | `color` | Main background color for supported elements in the cover card |\n| `--bubble-cover-border-radius` | `px` | Border radius for the cover card |\n| `--bubble-cover-icon-border-radius` | `px` | Border radius for the cover card icon container |\n| `--bubble-cover-icon-background-color` | `color` | Background color for the cover card icon container |\n| `--bubble-cover-box-shadow` | See [box shadow](https://developer.mozilla.org/fr/docs/Web/CSS/box-shadow) | Box shadow for the cover card |\n| `--bubble-button-box-shadow` | See [box shadow](https://developer.mozilla.org/fr/docs/Web/CSS/box-shadow) | Box shadow for buttons in the cover card |\n\n\u003c/details\u003e\n\n\n#### Example\n\n\u003cdetails\u003e\n\n\u003csummary\u003eA card that can control a roller shade\u003c/summary\u003e\n\n\u003cbr\u003e\n\n```yaml\ntype: custom:bubble-card\ncard_type: cover\nentity: cover.kitchen\nname: Kitchen\nicon_open: mdi:roller-shade\nicon_close: mdi:roller-shade-closed\n```\n\n\u003c/details\u003e\n\n\u003cbr\u003e\n\n---\n\n\u003cbr\u003e\n\n## Select\n\n![readme-select-card](https://github.com/user-attachments/assets/f1220aaf-da5a-4ec0-b74e-31905264ae0a)\n\nThis card allows you to add a dropdown menu for your `input_select` / `select` entities. This card also supports the sub-buttons and all the common Bubble Card features.\n\n\u003e [!TIP]\n\u003e You can also have select sub-buttons if you want, this feature is available in all the cards that support the sub-buttons.\n\n### Select options\n\n\u003cdetails\u003e\n\n**\u003csummary\u003eOptions (YAML + descriptions)\u003c/summary\u003e**\n\n| Name | Type | Requirement | Supported options | Description |\n| --- | --- | --- | --- | --- |\n| `entity` | string | **Required** | Any entity | An entity to control |\n| `name` | string | Optional | Any string | A name for your select, if not defined it will display the entity name |\n| `icon` | string | Optional | Any `mdi:` icon | An icon for your select, if not defined it will display the entity icon or the `entity-picture` |\n| `force_icon` | boolean | Optional | `true` or `false` (default) | Give the priority to the icon instead of the `entity-picture` |\n| `show_state` | boolean | Optional | `true` or `false` (default) | Show or hide the state of your `entity` |\n| `show_name` | boolean | Optional | `true` (default) or `false` | Show or hide the name |\n| `show_icon` | boolean | Optional | `true` (default) or `false` | Show or hide the icon |\n| `show_last_changed` | boolean | Optional | `true` or `false` (default) | Show the last changed time of your `entity` |\n| `show_last_updated` | boolean | Optional | `true` or `false` (default) | Show the last updated time of your `entity` |\n| `show_attribute` | boolean | Optional | `true` or `false` (default) | Show an attribute of your `entity` below its `name` |\n| `attribute` | string | Optional (required if `show_attribute` is set to `true`) | An attribute from your `entity` | The attribute to show (e.g. `brightness`) |\n| `scrolling_effect` | boolean | Optional | `true` (default) or `false` | Allow text to scroll when the content exceeds the size of their container |\n| `tap_action` | object | Optional | See [actions](#tap-double-tap-and-hold-actions) | Define the type of action on icon click, if undefined, `more-info` will be used. |\n| `double_tap_action` | object | Optional | See [actions](#tap-double-tap-and-hold-actions) | Define the type of action on icon double click, if undefined, `none` will be used. |\n| `hold_action` | object | Optional | See [actions](#tap-double-tap-and-hold-actions) | Define the type of action on icon hold, if undefined, `more-info` will be used. |\n| `card_layout` | string | Optional | `normal` (default if not in section view), `large` (default if in section view), `large-2-rows`, `large-sub-buttons-grid` | Styling layout of the card, see [card layouts](#card-layouts) |\n| `rows` | number | Optional | Any number | Number of rows (height) (e.g. `2`) |\n| `sub_button` | object | Optional | See [sub-buttons](#sub-buttons) | Add customized buttons fixed to the right |\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n**\u003csummary\u003eCSS variables (see [Styling](#styling))\u003c/summary\u003e**\n\n| Variable | Expected value | Description |\n| --- | --- | --- |\n| `--bubble-select-main-background-color` | `color` | Main background color for supported elements in the select card |\n| `--bubble-select-background-color` | `color` | Background color for select card |\n| `--bubble-select-list-border-radius` | `px` | Border radius for the dropdown menu in the card |\n| `--bubble-select-list-item-accent-color` | `color` | Accent color for the selected item |\n| `--bubble-select-list-background-color` | `color` | Background color for the dropdown menu in the card |\n| `--bubble-select-list-width` | `px` | Width of the dropdown menu in the card |\n| `--bubble-select-arrow-background-color` | `color` | Background color for dropdown arrow |\n| `--bubble-select-button-border-radius` | `px` | Border radius for select button |\n| `--bubble-select-border-radius` | `px` | Border radius for the select card |\n| `--bubble-select-icon-border-radius` | `px` | Border radius for the select card icon container |\n| `--bubble-select-icon-background-color` | `color` | Background color for the select card icon container |\n| `--bubble-select-box-shadow` | See [box shadow](https://developer.mozilla.org/fr/docs/Web/CSS/box-shadow) | Box shadow for the select card |\n\n\u003c/details\u003e\n\n\n#### Examples\n\n\u003cdetails\u003e\n\n\u003csummary\u003eA select card with a list of scenes\u003c/summary\u003e\n\n\u003cbr\u003e\n\n```yaml\ntype: custom:bubble-card\ncard_type: select\nname: Scene\nentity: input_select.scenes\nicon: mdi:brightness-4\nshow_state: true\n```\n\n\u003c/details\u003e\n\n\u003cbr\u003e\n\n---\n\n\u003cbr\u003e\n\n## Climate\n\n![readme-climate-card](https://github.com/user-attachments/assets/59145c69-2f85-4ee7-a290-e848971e1925)\n\nThis card allows you to control your `climate` entities.\n\n\u003e [!TIP]\n\u003e The mode selection menu is a [sub-button](#sub-buttons) that is added automatically when creating the card. You can then modify or remove it as you wish.\n\n### Climate options\n\n\u003cdetails\u003e\n\n**\u003csummary\u003eOptions (YAML + descriptions)\u003c/summary\u003e**\n\n| Name | Type | Requirement | Supported options | Description |\n|--------------------------|---------|-------------------------------------|--------------------------------------------------|-----------------------------------------------------------------------------------------------------------------|\n| `entity` | string | **Required** | Climate entity | The entity to control (e.g., `climate.living_room`). |\n| `name` | string | Optional | Any string | A custom name for the card. If not defined, it will display the entity name. |\n| `icon` | string | Optional | Any `mdi:` icon | A custom icon for the card. If not defined, the entity icon or `entity-picture` will be used. |\n| `force_icon` | boolean | Optional | `true` or `false` (default) | Gives priority to the icon over the `entity-picture`. |\n| `show_state` | boolean | Optional | `true` or `false` (default) | Show or hide the current state of the `entity`. |\n| `show_name` | boolean | Optional | `true` (default) or `false` | Show or hide the name of the entity. |\n| `show_icon` | boolean | Optional | `true` (default) or `false` | Show or hide the icon. |\n| `hide_target_temp_low` | boolean | Optional (only for entities supporting `target_temp_low`) | `true` or `false` (default) | Hides the low target temperature control if supported by the `entity`. |\n| `hide_target_temp_high` | boolean | Optional (only for entities supporting `target_temp_high`)| `true` or `false` (default) | Hides the high target temperature control if supported by the `entity`. |\n| `state_color` | boolean | Optional | `true` or `false` (default) | Applies a constant background color when the climate entity is ON. |\n| `step` | number | Optional | Any number | The temperature step. |\n| `min_temp` | number | Optional | Any number | The minimum temperature. |\n| `max_temp` | number | Optional | Any number | The maximum temperature. |\n| `button_action` | object | Optional | `tap_action`, `double_tap_action` or `hold_action`, see [actions](#tap-double-tap-and-hold-actions) | Allow to change the default actions on button click. |\n| `tap_action` | object | Optional | See [actions](#tap-double-tap-and-hold-actions) | Define the type of action on icon click, if undefined, `more-info` will be used. |\n| `double_tap_action` | object | Optional | See [actions](#tap-double-tap-and-hold-actions) | Define the type of action on icon double click, if undefined, `none` will be used. |\n| `hold_action` | object | Optional | See [actions](#tap-double-tap-and-hold-actions) | Define the type of action on icon hold, if undefined, `more-info` will be used. | |\n| `card_layout` | string | Optional | `normal` (default if not in section view), `large` (default if in section view), `large-2-rows`, `large-sub-buttons-grid` | Styling layout of the card, see [card layouts](#card-layouts) |\n| `rows` | number | Optional | Any number | Number of rows (height) (e.g. `2`) |\n| `sub_button` | object | Optional | See [sub-buttons](#sub-buttons) | Adds custom buttons fixed to the right. Useful for a climate mode select menu. |\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n**\u003csummary\u003eCSS variables (see [Styling](#styling))\u003c/summary\u003e**\n\n| Variable | Expected value | Description |\n| --- | --- | --- |\n| `--bubble-climate-main-background-color` | `color` | Main background color for supported elements in the climate card |\n| `--bubble-climate-border-radius` | `px` | Border radius for supported elements in the climate card elements |\n| `--bubble-climate-button-background-color` | `color` | Background color for the climate card buttons |\n| `--bubble-climate-icon-border-radius` | `px` | Border radius for the climate card icon container |\n| `--bubble-state-climate-fan-only-color` | `color` | Overlay color for the fan-only state |\n| `--bubble-state-climate-dry-color` | `color` | Overlay color for the dry state |\n| `--bubble-state-climate-cool-color` | `color` | Overlay color for the cool state |\n| `--bubble-state-climate-heat-color` | `color` | Overlay color for the heat state |\n| `--bubble-state-climate-auto-color` | `color` | Overlay color for the auto state |\n| `--bubble-state-climate-heat-cool-color` | `color` | Overlay color for the heat-cool state |\n| `--bubble-climate-accent-color` | `color` | Accent color for the climate card |\n| `--bubble-climate-box-shadow` | See [box shadow](https://developer.mozilla.org/fr/docs/Web/CSS/box-shadow) | Box shadow for climate container. |\n\n\u003c/details\u003e\n\n\n#### Examples\n\n\u003cdetails\u003e\n\n\u003csummary\u003eA climate card with an HVAC modes dropdown menu\u003c/summary\u003e\n\n\u003cbr\u003e\n\n```yaml\ntype: custom:bubble-card\ncard_type: climate\nentity: climate.test_climate\nsub_button:\n - name: HVAC modes menu\n select_attribute: hvac_modes\n show_arrow: false\n state_background: false\n```\n\n\u003c/details\u003e\n\n\u003cbr\u003e\n\n---\n\n\u003cbr\u003e\n\n## Calendar\n\n![readme-calendar-bubble-card](https://github.com/user-attachments/assets/8b6a231c-c99b-4d7a-8197-b7fd49952f62)\n\nThis card allows you to display your calendar entities. Its content is scrollable, so you can easily browse upcoming events.\n\n### Calendar options\n\n\u003cdetails\u003e\n\n**\u003csummary\u003eOptions (YAML + descriptions)\u003c/summary\u003e**\n\n| Name | Type | Requirement | Supported options | Description |\n|---------------------|---------|--------------|-------------------------------------------------|-----------------------------------------------------------------------------------------|\n| `days` | number | Optional | Any number (minimum: 1) | Number of calendar days to fetch events for, from now until the end of the Nth day (default: 7) |\n| `entities` | object | **Required** | A calendar entity object (see below) | The entity to control (e.g., `calendar.main_calendar`). |\n| `entities.entity` | string | **Required** | A calendar entity | The calendar entity to display |\n| `entities.color` | string | Optional | A color | A custom color for the calendar chip. If not defined, an automatic color will be picked |\n| `days` | number | Optional | Any number (minimum: 1) | Number of calendar days to fetch events for, from now until the end of the Nth day (default: 7) |\n| `limit` | number | Optional | A number | The amont of events that will be displayed on the card |\n| `show_end` | boolean | Optional | `true` or `false` (default) | Show or hide the end time for events |\n| `show_progress` | boolean | Optional | `true` (default) or `false` | Show or hide the event progress bar |\n| `scrolling_effect` | boolean | Optional | `true` (default) or `false` | Allow text to scroll when the content exceeds the size of their container |\n| `event_action` | object | Optional | `tap_action`, `double_tap_action` or `hold_action`, see [actions](#tap-double-tap-and-hold-actions) | Allow to add actions on event click. |\n| `tap_action` | object | Optional | See [actions](#tap-double-tap-and-hold-actions) | Define the type of action on day click, if undefined, `none` will be used. |\n| `double_tap_action` | object | Optional | See [actions](#tap-double-tap-and-hold-actions) | Define the type of action on day double click, if undefined, `none` will be used. |\n| `hold_action` | object | Optional | See [actions](#tap-double-tap-and-hold-actions) | Define the type of action on day hold, if undefined, `none` will be used. |\n| `card_layout` | string | Optional | `normal` (default if not in section view), `large` (default if in section view), `large-2-rows`, `large-sub-buttons-grid` | Styling layout of the card, see [card layouts](#card-layouts) |\n| `rows` | number | Optional | Any number | Number of rows (height) (e.g. `2`) |\n| `sub_button` | object | Optional | See [sub-buttons](#sub-buttons) | Add customized buttons fixed to the right |\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n**\u003csummary\u003eCSS variables (see [Styling](#styling))\u003c/summary\u003e**\n\n| Variable | Expected value | Description |\n| ----------------------------------------- | -------------- | ------------------------------------------------------------------ |\n| `--bubble-calendar-main-background-color` | `color` | Main background color for supported elements in the calendar card |\n| `--bubble-calendar-border-radius` | `px` | Border radius for supported elements in the calendar card elements |\n| `--bubble-calendar-height` | `px` | Height for the calendar card |\n\n\u003c/details\u003e\n\n#### Examples\n\n\u003cdetails\u003e\n\n\u003csummary\u003eA calendar card with a limited amount of events\u003c/summary\u003e\n\n\u003cbr\u003e\n\n```yaml\ntype: custom:bubble-card\ncard_type: calendar\nentities:\n - entity: calendar.main_calendar\n color: '#ffb010'\nlimit: 1\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eA calendar card with an end time and a progress bar\u003c/summary\u003e\n\n\u003cbr\u003e\n\n```yaml\ntype: custom:bubble-card\ncard_type: calendar\nentities:\n - entity: calendar.main_calendar\n color: '#ffb010'\nshow_end: true\nshow_progress: true\n```\n\n\u003c/details\u003e\n\n\u003cbr\u003e\n\n---\n\n\u003cbr\u003e\n\n\n## Separator\n\n![readme-separator](https://github.com/Clooos/Bubble-Card/assets/36499953/7e416a34-b95e-4a03-a200-4b3aa04f560d)\n\nThis card is a simple separator for dividing your pop-up into categories / sections. e.g. Lights, Devices, Covers, Settings, Automations...\n\n### Separator options\n\n\u003cdetails\u003e\n\n**\u003csummary\u003eOptions (YAML + descriptions)\u003c/summary\u003e**\n\n| Name | Type | Requirement | Supported options | Description |\n| --- | --- | --- | --- | --- |\n| `name` | string | Optional but recommended | Any string | A name for your separator |\n| `icon` | string | Optional but recommended | Any `mdi:` icon | An icon for your separator |\n| `card_layout` | string | Optional | `normal` (default if not in section view), `large` (default if in section view), `large-2-rows`, `large-sub-buttons-grid` | Styling layout of the card, see [card layouts](#card-layouts) |\n| `rows` | number | Optional | Any number | Number of rows (height) (e.g. `2`) |\n| `sub_button` | object | Optional | See [sub-buttons](#sub-buttons) | Add customized buttons fixed to the right |\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n**\u003csummary\u003eCSS variables (see [Styling](#styling))\u003c/summary\u003e**\n\n| Variable | Expected value | Description |\n| --- | --- | --- |\n| `--bubble-line-background-color` | `color` | Background color for the line in the separator |\n\n\u003c/details\u003e\n\n#### Example\n\n\u003cdetails\u003e\n\n\u003csummary\u003eA separator/divider for a \"Covers\" section\u003c/summary\u003e\n\n\u003cbr\u003e\n\n```yaml\ntype: custom:bubble-card\ncard_type: separator\nname: Covers\nicon: mdi:window-shutter\n```\n\n\u003c/details\u003e\n\n\u003cbr\u003e\n\n---\n\n\u003cbr\u003e\n\n## Empty column\n\n![readme-empty-column](https://github.com/Clooos/Bubble-Card/assets/36499953/a97fa8df-8360-4613-8bb7-e8a269cb1913)\n\nThis card is here to fill an empty column. This is useful if you have a `horizontal-stack` in your pop-up with only one card. Take a look at the bottom right corner of this screenshot to (not) see it.\n\n### Empty column options\n\nThis card has no options and doesn’t support [styling](#styling), though it does support layout options for HA sections.\n\n#### Example\n\n\u003cdetails\u003e\n\n\u003csummary\u003eAn empty column in an horizontal stack\u003c/summary\u003e\n\n\u003cbr\u003e\n\n```yaml\ntype: horizontal-stack\ncards:\n - type: custom:bubble-card\n card_type: button\n ...\n - type: custom:bubble-card\n card_type: empty-column\n```\n\n\u003c/details\u003e\n\n\u003cbr\u003e\n\n---\n\n\u003cbr\u003e\n\n## Sub-buttons\n\n![readme-button](https://github.com/Clooos/Bubble-Card/assets/36499953/c7bfda91-943e-42f3-a963-4847e57c6b97)\n\nIn every card that supports that option, you can add sub-buttons to customize your cards even more. You can, for example, create a button that can control a vacuum, a weather card, or almost anything that you can come up with. These sub-buttons support the tap actions and most of the button options.\n\nThese sub-buttons can also display dropdown menus if combined with selectable entities like:\n\n- Input Select entities\n- Select entities\n- Media players with **source list**\n- Media players with **sound mode list**\n- Climate entities with **hvac modes**\n- Climate/Fan entities with **fan modes**\n- Climate entities with **swing modes**\n- Climate entities with **preset modes**\n- Light entities with **effect list**\n\n### Sub-buttons options\n\n\u003cdetails\u003e\n\n**\u003csummary\u003eOptions (YAML + description)\u003c/summary\u003e**\n\n| Name | Type | Requirement | Supported options | Description |\n| --- | --- | --- | --- | --- |\n| `entity` | string | Optional | Any entity | An entity to control |\n| `name` | string | Optional | Any string | A name for your sub-button, if not defined it will display the entity name |\n| `icon` | string | Optional | Any `mdi:` icon | An icon for your sub-button, if not defined it will display the entity icon |\n| `show_background` | boolean | Optional | `true` (default) or `false` | Show a background for your sub-button, it will change its color based on your entity state |\n| `show_state` | boolean | Optional | `true` or `false` (default) | Show or hide the state of your `entity` |\n| `show_name` | boolean | Optional | `true` or `false` (default) | Show or hide the name |\n| `show_icon` | boolean | Optional | `true` (default) or `false` | Show or hide the icon |\n| `show_last_changed` | boolean | Optional | `true` or `false` (default) | Show the last changed time of your `entity` |\n| `show_last_updated` | boolean | Optional | `true` or `false` (default) | Show the last updated time of your `entity` |\n| `show_attribute` | boolean | Optional | `true` or `false` (default) | Show an attribute of your `entity` below its `name` |\n| `attribute` | string | Optional (required if `show_attribute` is set to `true`) | An attribute from your `entity` | The attribute to show (e.g. `brightness`) |\n| `select_attribute` | string | Optional | An attribute list from your `entity` (see supported options above) | This attribute list will open a dropdown if clicked (e.g. `effect_list`) |\n| `tap_action` | object | Optional | See [actions](#tap-double-tap-and-hold-actions) | Define the type of action on sub-button click, if undefined, `more-info` will be used. |\n| `double_tap_action` | object | Optional | See [actions](#tap-double-tap-and-hold-actions) | Define the type of action on sub-button double click, if undefined, `none` will be used. |\n| `hold_action` | object | Optional | See [actions](#tap-double-tap-and-hold-actions) | Define the type of action on sub-button hold, if undefined, `more-info` will be used. |\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n**\u003csummary\u003eCSS variables (see [Styling](#styling))\u003c/summary\u003e**\n\n| Variable | Expected value | Description |\n| --- | --- | --- |\n| `--bubble-sub-button-border-radius` | `px` | Border radius for the sub-buttons |\n| `--bubble-sub-button-background-color` | `color` | Background color for the sub-buttons |\n\n\u003c/details\u003e\n\n#### Examples\n\n\u003cdetails\u003e\n\n\u003csummary\u003eA button with some sub-buttons to make a vacuum card (like on the screenshot)\u003c/summary\u003e\n\n\u003cbr\u003e\n\n```yaml\ntype: custom:bubble-card\ncard_type: button\nbutton_type: switch\nname: Vacuum\nentity: vacuum.downstairs\nicon: mdi:robot-vacuum\nshow_state: true\nshow_last_changed: true\ntap_action:\n action: more-info\nbutton_action:\n tap_action:\n action: more-info\nsub_button:\n - name: Battery\n icon: mdi:battery\n show_name: false\n show_icon: true\n show_background: false\n show_attribute: true\n attribute: battery_level\n - name: Return to dock\n icon: mdi:home\n show_background: false\n tap_action:\n action: call-service\n service: vacuum.return_to_base\n target:\n entity_id: vacuum.downstairs\n - name: Pause\n icon: mdi:pause\n show_background: false\n tap_action:\n action: call-service\n service: vacuum.pause\n target:\n entity_id: vacuum.downstairs\n - name: Start\n icon: mdi:play\n tap_action:\n action: call-service\n service: vacuum.start\n target:\n entity_id: vacuum.downstairs\nstyles: \u003e-\n .bubble-button-card-container {\n /* Change the background color when the vacuum get an error (optional), more details in the styles template section */\n background: ${state === 'error' ? 'rgb(200, 80, 40)' : ''} !important;\n }\n /* Change the first sub-button battery icon based on the battery_icon attribute, more details in the styles template section */\n ${subButtonIcon[0].setAttribute(\"icon\", hass.states['vacuum.downstairs'].attributes.battery_icon)}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eA button slider with a sub-button that shows the brightness and one that toggle the light (like on the screenshot)\u003c/summary\u003e\n\n\u003cbr\u003e\n\n```yaml\ntype: custom:bubble-card\ncard_type: button\nbutton_type: slider\nname: Kitchen\nentity: light.kitchen\nicon: mdi:fridge-outline\nshow_last_updated: true\nsub_button:\n - name: Brightness\n icon: mdi:fridge-outline\n show_icon: false\n show_background: false\n show_attribute: true\n attribute: brightness\n - name: Toggle button\n icon: mdi:lightbulb\n tap_action:\n action: toggle\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eA button that shows the inside and outside temperature with the weather for today and tomorrow (screenshot included)\u003c/summary\u003e\n\n\u003cbr\u003e\n\n\u003cimg width=\"591\" alt=\"image\" src=\"https://github.com/Clooos/Bubble-Card/assets/36499953/360312de-db08-47bf-9b46-92afeb435edd\"\u003e\n\n\u003e Bad luck for me it's cloudy all the time but all the icons are changing based on the weather.\n\n```yaml\ntype: custom:bubble-card\ncard_type: button\nbutton_type: state\nentity: weather.openweathermap\nname: Weather\nshow_state: true\ncard_layout: large-2-rows\nsub_button:\n - name: Home temperature\n icon: mdi:home-thermometer-outline\n entity: sensor.home_temperature\n show_state: true\n show_icon: true\n show_background: false\n - name: Outside temperature\n entity: sensor.outside_temperature\n show_state: true\n show_background: false\n - name: Today\n entity: sensor.home_realfeel_temperature_max_0d\n show_name: true\n show_state: true\n tap_action:\n action: more-info\n - name: Tomorrow\n entity: sensor.home_realfeel_temperature_max_1d\n show_name: true\n show_state: true\n show_background: false\nstyles: \u003e-\n /* Change the third and fourth sub-button icon based on the forecast.condition attribute, more details in the styles template section */\n ${subButtonIcon[2].setAttribute(\"icon\", getWeatherIcon(hass.states['sensor.weather_forecast_daily'].attributes.forecast[0]?.condition))}\n ${subButtonIcon[3].setAttribute(\"icon\", getWeatherIcon(hass.states['sensor.weather_forecast_daily'].attributes.forecast[1]?.condition))}\n```\n\n\u003c/details\u003e\n\n\u003cbr\u003e\n\n---\n\n\u003cbr\u003e\n\n## Card layouts\n\n![My-Bubble-Card-dashboard](https://github.com/Clooos/Bubble-Card/assets/36499953/0c049498-969b-4939-959e-fc49fb08d0a1)\n\nBubble Card fully supports the Home Assistant section view, you can change the card layout to make the card bigger and also change the number of columns or rows the card should occupy in your section view (only on the cards that support that option). These layouts are also supported in all other view types.\n\n\u003cdetails\u003e\n\n**\u003csummary\u003eAvailable card layouts\u003c/summary\u003e**\n\n| Layout | Description |\n| --- | --- |\n| `normal` | The regular layout (not optimized for the section view) |\n| `large` | A larger layout that will resize to the selected rows in the section view (optimized for the section view) |\n| `large-2-rows` | A larger layout with 2 rows of sub-buttons that will resize to the selected rows in the section view (optimized for the section view) |\n| `large-sub-buttons-grid` | This layout will displays sub-buttons in a grid, `rows` must be set to at least `2`.\n\n\u003c/details\u003e\n\n#### Examples\n\n\u003cdetails\u003e\n\n\u003csummary\u003eA large button that shows energy statistics with 2 rows of sub-buttons (screenshot included)\u003c/summary\u003e\n\n\u003cbr\u003e\n\n\u003cimg width=\"547\" alt=\"image\" src=\"https://github.com/Clooos/Bubble-Card/assets/36499953/faa643d5-5d1e-488d-b4a5-6bedd043c747\"\u003e\n\n```yaml\ntype: custom:bubble-card\ncard_type: button\nbutton_type: state\ncard_layout: large-2-rows\nname: Energy\nentity: sensor.current_power_production\nicon: mdi:home-lightning-bolt-outline\nshow_state: true\nbutton_action:\n tap_action:\n action: navigate\n navigation_path: '#energy'\nsub_button:\n - entity: sensor.electricity_counter\n icon: mdi:counter\n show_background: false\n show_state: true\n tap_action:\n action: more-info\n - entity: sensor.today_s_energy_production\n show_state: true\n show_background: false\n - entity: sensor.average_daily_consumption\n show_background: false\n show_state: true\n - entity: sensor.this_week_production\n show_state: true\n show_background: false\n icon: mdi:calendar-week\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eA large button with multiple rows with 12 sub-buttons\u003c/summary\u003e\n\n\u003cbr\u003e\n\n\u003cimg width=\"547\" alt=\"image\" src=\"/img/Example_Layout_Large_multi-row.png\"\u003e\n\n```yaml\ntype: custom:bubble-card\ncard_type: button\nbutton_type: state\nentity: sun.sun\ncard_layout: large-sub-buttons-grid\ngrid_options:\n rows: 3\nsub_button:\n - entity: sun.sun\n icon: mdi:numeric-0\n - entity: sun.sun\n icon: mdi:numeric-1\n - entity: sun.sun\n icon: mdi:numeric-2\n - entity: sun.sun\n icon: mdi:numeric-3\n - entity: sun.sun\n icon: mdi:numeric-4\n - entity: sun.sun\n icon: mdi:numeric-5\n - entity: sun.sun\n icon: mdi:numeric-6\n - entity: sun.sun\n icon: mdi:numeric-7\n - entity: sun.sun\n icon: mdi:numeric-8\n - entity: sun.sun\n icon: mdi:numeric-9\n - entity: sun.sun\n icon: mdi:numeric-10\n - entity: sun.sun\n icon: mdi:numeric-negative-1\n```\n\n\u003c/details\u003e\n\n\u003cbr\u003e\n\n---\n\n\u003cbr\u003e\n\n## Tap, double tap and hold actions\n\nYou can also use Home Assistant default tap actions, double tap actions and hold actions on the cards that supports this option. For example, this allows you to display the “more info” window by holding a button icon or running a service when a sub-button is pressed.\n\n**Note: When a `double_tap_action` is configured, the regular `tap_action` will have a delay of 200ms to allow detection\nof a double tap. If this delay is undesirable, set `double_tap_action` to `none` to disable double tap handling.**\n\n### Action options\n\n\u003cdetails\u003e\n\n**\u003csummary\u003eOptions (YAML + description)\u003c/summary\u003e**\n\n| Name | Type | Supported options | Description |\n| --- | --- | --- | --- |\n| `action` | string | `more-info`, `toggle`, `call-service`, `navigate`, `url`, `fire-dom-event`, `none` | Action to perform |\n| `target` | object | | Only works with `call-service`. Follows the [home-assistant syntax](https://www.home-assistant.io/docs/scripts/service-calls/#targeting-areas-and-devices) |\n| `navigation_path` | string | Any path of your dashboard | Path to navigate to (e.g. `'#kitchen'` for opening a pop-up) when action defined as navigate |\n| `url_path` | string | Any link | URL to open on click (e.g. `https://www.google.com`) when action is `url` |\n| `service` | string | Any service | Service to call (e.g. `media_player.media_play_pause`) when `action` defined as `call-service` |\n| `data` or `service_data` | object | Any service data | Service data to include (e.g. `entity_id: media_player.kitchen`) when `action` defined as `call-service` |\n| `confirmation` | object | See [confirmation](https://www.home-assistant.io/dashboards/actions/#options-for-confirmation) | Display a confirmation pop-up (not a Bubble Card one), overrides the default `confirmation` object |\n\n\u003c/details\u003e\n\n#### Example\n\n\u003cdetails\u003e\n\n\u003csummary\u003eA button to open a pop-up\u003c/summary\u003e\n\n\u003cbr\u003e\n\n```yaml\ntype: custom:bubble-card\ncard_type: button\nbutton_type: name\nname: Kitchen\nicon: mdi:fridge\nbutton_action:\n tap_action:\n action: navigate\n navigation_path: '#kitchen'\n```\n\n\u003c/details\u003e\n\n\u003cbr\u003e\n\n---\n\n\u003cbr\u003e\n\n## Styling\n\nYou can add custom styles to modify the CSS of all cards **without using card-mod** in four ways:\n\n- In the editor, go to the card you want to modify, then navigate to _Styling options \u003e Custom styles \u0026 JS templates_, and add your custom styles (check the tips and examples below).\n- In the editor (or in [YAML](#modules)), go to the card you want to modify, then navigate to _Modules_, then create a new module (it will be available to all cards), or go to the **Module Store** to install any available Module (more details about modules can be found [below](#modules)).\n- In a [theme](https://www.home-assistant.io/integrations/frontend/#defining-themes) file by adding CSS variables in YAML (these are available in each card's documentation above). This allows for global modifications.\n\n \u003cdetails\u003e\n \n \u003csummary\u003eExample\u003c/a\u003e\u003c/summary\u003e\n \n \u003cbr\u003e\n\n Don't copy the `Bubble:` line, this is the name of the theme you use. You also need to remove the `--` from the variables.\n\n You need to run the [`frontend.reload_themes`](https://www.home-assistant.io/integrations/frontend/#setting-themes) action to refresh the theme after any modifications.\n\n ```yaml\n Bubble: \n # Bubble Card variables test\n bubble-border-radius: \"8px\"\n bubble-main-background-color: \"rgb(50,70,90)\"\n bubble-secondary-background-color: \"rgb(0,70,90)\"\n bubble-pop-up-main-background-color: \"rgba(200,200,200,0.5)\"\n bubble-accent-color: \"rgb(100,140,180)\"\n bubble-icon-background-color: \"rgb(50,80,100)\"\n bubble-select-list-width: \"200px\"\n bubble-select-list-background-color: \"rgb(100,140,180)\"\n ```\n \n \u003c/details\u003e\n \n- In YAML by adding `styles: |` followed by your custom styles (check the tips and examples below).\n\n\u003e [!TIP] \n\u003e **To understand which style classes can be modified**, you can take a look at the [`src/cards`](https://github.com/Clooos/Bubble-Card/tree/main/src/cards) folder in this repository. In each card folder, you will find a file named `styles.css`. These files contain all the applied styles. This allows for a lot more possibilities than CSS variables, but it needs to be added individually to each card.\n\u003e \n\u003e You can also find a lot of [examples from the community](https://github.com/Clooos/Bubble-Card/discussions/categories/share-your-custom-styles-templates-and-dashboards), or some from the [Home Assistant forum](https://community.home-assistant.io/t/bubble-card-a-minimalist-card-collection-for-home-assistant-with-a-nice-pop-up-touch/) by doing a bit of searching.\n\u003e\n\u003e The Bubble theme for Home Assistant (like on the screenshots) can be found [here](https://github.com/Clooos/Bubble).\n\u003e\n\u003e A tutorial video is coming soon on my [YouTube channel](https://www.youtube.com/@cloooos)!\n\n\u003e [!IMPORTANT] \n\u003e Please note that you might have to add `!important;` to some CSS styles that are already defined (see examples below).\n\n#### Examples\n\n\u003cdetails\u003e\n\n\u003csummary\u003eChanging the font size of any Bubble Card\u003c/summary\u003e\n\n\u003cbr\u003e\n\n```yaml\nstyles: |\n * { \n font-size: 16px !important;\n }\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eChanging the background color of a single button in an horizontal buttons stack\u003c/summary\u003e\n\n\u003cbr\u003e\n\n```yaml\nstyles: \u003e\n /* Selector for the '#kitchen' button */\n .kitchen \u003e .bubble-background-color {\n background-color: blue !important;\n }\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eChanging the background color of a card\u003c/summary\u003e\n\n\u003cbr\u003e\n\nThis one works on all Bubble Card types (except for the pop-ups):\n\n```yaml\nstyles: | \n ha-card {\n --bubble-main-background-color: rgba(12,120,50,0.5) !important;\n }\n```\n\nThis one is doing the same in a button card only (it works for the pop-up header): \n\n```yaml\nstyles: | \n .bubble-button-card-container {\n background: rgba(12,120,50,0.5) !important;\n }\n```\n\nTo change the color when it's `on` take a look at the style templates below.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eChanging the color of a button slider\u003c/summary\u003e\n\n\u003cbr\u003e\n\n```yaml\nstyles: |\n .bubble-range-fill { \n background: rgba(79, 69, 87, 1) !important;\n opacity: 1 !important;\n }\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eChanging the line color of a separator\u003c/summary\u003e\n\n\u003cbr\u003e\n\n```yaml\nstyles: |\n .bubble-line {\n background: var(--primary-text-color);\n opacity: 0.1;\n }\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eChanging the color of an icon\u003c/summary\u003e\n\n\u003cbr\u003e\n\n```yaml\nstyles: |\n .bubble-icon {\n color: white !important;\n }\n```\n\nFor an horizontal buttons stack icon.\n```yaml\n.kitchen \u003e .bubble-icon {\n color: grey !important\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eChanging the background color of an icon container\u003c/summary\u003e\n\n\u003cbr\u003e\n\nThis one works on all Bubble Card types (except for the pop-ups):\n\n```yaml\nstyles: | \n ha-card {\n --bubble-icon-background-color: rgb(230, 128, 41) !important;\n }\n```\n\nThis one is doing the same for the pop-up header: \n\n```yaml\nstyles: |\n .bubble-icon-container {\n background: rgb(230, 128, 41) !important;\n }\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eChanging the size of the sub-buttons (perfect for the large layout)\u003c/summary\u003e\n\n\u003cbr\u003e\n\n```yaml\nstyles: |\n .bubble-sub-button {\n height: 48px !important;\n min-width: 48px !important;\n }\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eChanging the background color of the second sub-button\u003c/summary\u003e\n\n\u003cbr\u003e\n\n```yaml\nstyles: |\n .bubble-sub-button-2 {\n background-color: blue !important;\n }\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eChanging the size of an icon\u003c/summary\u003e\n\n\u003cbr\u003e\n\nFor the main icon.\n\n```yaml\nstyles: |\n .bubble-icon {\n --mdc-icon-size: 26px !important;\n }\n```\n\nFor the sub-button icons.\n\n```yaml\nstyles: |\n .bubble-sub-button-icon {\n --mdc-icon-size: 26px !important;\n }\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eUsing a picture rather than an icon in a sub button\u003c/summary\u003e\n\n\u003cbr\u003e\n\n```yaml\nsub_button:\n - icon: none\nstyles: |-\n .bubble-sub-button-1 {\n background-image: url(\"/local/pictures/your_picture.jpg\");\n background-size: cover;\n }\n```\n\nJust upload this picture in a “pictures” folder (or the name you want) in the Home Assistant “www” folder.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eAdvanced example: Creating an horizontal row of sub-buttons (screenshot included)\u003c/summary\u003e\n\n\u003cbr\u003e\n\n\u003cimg width=\"556\" alt=\"image\" src=\"https://github.com/Clooos/Bubble-Card/assets/36499953/b9be2bcf-93fc-4b06-8eae-ecac97dfb5e2\"\u003e\n\n\u003e I really love this one, I use it as a header on my dashboard.\n\n```yaml\ntype: custom:bubble-card\ncard_type: button\ncard_layout: large\nbutton_type: name\nshow_icon: false\nshow_name: false\nsub_button:\n - name: Mute\n icon: mdi:volume-off\n tap_action:\n action: toggle\n service: input_boolean.toggle\n entity: input_boolean.silent_mode\n - name: Covers\n entity: cover.all_group\n show_background: false\n tap_action:\n action: navigate\n navigation_path: '#cover'\n - name: Shopping list\n icon: mdi:cart-outline\n show_background: false\n tap_action:\n action: navigate\n navigation_path: '#shopping-list'\n - name: Security\n icon: mdi:video-outline\n show_background: false\n tap_action:\n action: navigate\n navigation_path: '#security'\n - name: Settings\n icon: mdi:cog\n show_background: false\n tap_action:\n action: navigate\n navigation_path: '#configuration'\nstyles: |\n .card-content {\n width: 100%;\n margin: 0 !important;\n }\n .bubble-button-card-container {\n background: none;\n border: none;\n }\n .bubble-sub-button {\n height: 46px !important;\n width: 46px !important;\n }\n .bubble-sub-button-container {\n display: flex !important;\n width: 100%;\n justify-content: space-between !important;\n }\n .bubble-sub-button-icon {\n --mdc-icon-size: inherit !important;\n }\n .bubble-name-container {\n margin-right: 0px !important;\n }\n```\n\n![Sub-buttons-everywhere](https://github.com/Clooos/Bubble-Card/assets/36499953/3bf04969-e00d-4755-89df-481e8f7d73b2)\n\n\u003c/details\u003e\n\n\u003cbr\u003e\n\n## Templates\n\n**Bubble Card doesn’t support Jinja templates** but advanced users can add templates in JS directly in their [custom styles](#styling). For example, this allows you to dynamically change an icon, the texts or the colors of an element, to show or hide an element conditionally (like a sub-button), or almost anything based on a state, an attribute and more.\n\n\u003e [!TIP] \n\u003e More information about JS templates [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals). My advice is to **always take a look at your browser console** to be sure that everything is working correctly.\n\n\u003e [!IMPORTANT] \n\u003e **All templates that are not modifying a CSS property must be placed at the end! Like modifying an icon, a text or any element.**\n\n#### Available variables and functions\n\n\u003cdetails\u003e\n\n\u003csummary\u003eVariables\u003c/summary\u003e\n\n\u003cbr\u003e\n\nYou have access to these variables in most cards:\n\n- `state` will return the state of your defined `entity`.\n \n- `entity` will return your entity you defined like `switch.test` in this example.\n \n- `icon` can be used like this to change the icon `icon.setAttribute(\"icon\", \"mdi:lightbulb\")`.\n\n- `subButtonState[0]` will return the state of your first sub-button defined `entity`, `[0]` is the first sub-button state, `[1]` the second...\n \n- `subButtonIcon[0]` can be used like this to change the first sub-button icon `subButtonIcon[0].setAttribute(\"icon\", \"mdi:lightbulb\")`, `[0]` is the first sub-button icon, `[1]` the second...\n \n- `card` will return the card element in the DOM.\n \n- `hass` is an advanced variable that allows you even more control, for example you can return the state of `light.kitchen` like this `hass.states['light.kitchen'].state` or an attribute like this `hass.states[entity].attributes.brightness`.\n\n- `this` will return a lot of usefull informations about your setup and dashboard, only use this if you know what you are doing.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eFunctions\u003c/summary\u003e\n\n\u003cbr\u003e\n\nYou have access to all the global JS functions, but you have also access to:\n\n- `getWeatherIcon` can be used to return a weather icon based on a state that return the weather. For example, you can can do this `${subButtonIcon[2].setAttribute(\"icon\", getWeatherIcon(hass.states['sensor.weather_forecast_daily'].attributes.forecast[0]?.condition))}` to change the third sub-button icon to today's weather icon, `.forecast[1]?.condition` is for tomorrow...\n\n You will have to create a template sensor for that. Here is what you can add in your `configuration.yaml`:\n ```yaml\n - trigger:\n - platform: time_pattern\n hours: /2\n action:\n - service: weather.get_forecasts\n data:\n type: daily\n target:\n entity_id: weather.home\n response_variable: daily\n sensor:\n - name: Weather Forecast Daily\n unique_id: weather_forecast_daily\n state: \"{{ now().isoformat() }}\"\n attributes:\n forecast: \"{{ daily['weather.home'].forecast }}\"\n ```\n- `hass.formatEntityState(state)` can be used to transtale a state (Can also be used to get a state unit, without the need to add it manually).\n- `hass.formatEntityAttributeValue(state, \"attribute\")` can be used to translate an attribute (Can also be used to get a state unit, without the need to add it manually).\n\n\u003c/details\u003e\n\n#### Examples\n\nYou can find a lot of examples below, but you can also find very advanced templates on my [Patreon page](https://www.patreon.com/c/Clooos), like one (my favorite) that allows up to four conditional badges placed around the card’s icons. It’s also a great way to learn about all the possibilities of Bubble Card custom styles and templates!\n\n\u003cdetails\u003e\n\u003csummary\u003eExamples from my Patreon page\u003c/summary\u003e\n\n\u003cp align=\"center\"\u003e\u003cbr\u003e\n \u003cimg src=\"https://github.com/user-attachments/assets/e95ab7f8-f5a3-4fca-b3fd-61479540b723\" alt=\"Example 2\" /\u003e\n \u003cbr\u003e\n \u003ca href=\"https://www.patreon.com/posts/adding-home-like-116764324\"\u003eAdding Home Assistant like badges to any card\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\u003cbr\u003e\n \u003cimg src=\"https://github.com/user-attachments/assets/24ad619b-2a98-49c0-bc9d-a59f00541731\" alt=\"Example 4\" /\u003e\n \u003cbr\u003e\n \u003ca href=\"https://www.patreon.com/posts/showing-date-and-116766943\"\u003eShowing formatted date and time in a separator without using any entity\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\u003cbr\u003e\n \u003cimg src=\"https://github.com/user-attachments/assets/0c8891a8-ca96-45a9-ada6-fc91268cb815\" alt=\"Example 1\" /\u003e\n \u003cbr\u003e\n \u003ca href=\"https://www.patreon.com/posts/showing-sub-on-116808854\"\u003eShowing a sub-button state on two lines\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\u003cbr\u003e\n \u003cimg src=\"https://github.com/user-attachments/assets/c90d561c-ab6a-4e4e-bd00-fe8676c2bf5b\" alt=\"Example 3\" /\u003e\n \u003cbr\u003e\n \u003ca href=\"https://www.patreon.com/posts/customizing-and-116753941\"\u003eCustomizing labels and icons inside a select sub-button\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\u003cbr\u003e\n \u003cimg src=\"https://github.com/user-attachments/assets/02782c6b-12e7-40bf-ad23-2bacf8016392\" alt=\"Example 5\" /\u003e\n \u003cbr\u003e\n \u003ca href=\"https://www.patreon.com/posts/119701174\"\u003eAdding a persistent reminder pop-up that shows up only when needed\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr\u003e\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eChanging the background color of a button that is red when it's \u003ccode\u003eoff\u003c/code\u003e and blue when it's \u003ccode\u003eon\u003c/code\u003e\u003c/summary\u003e\n\n\u003cbr\u003e\n\n```yaml\ntype: custom:bubble-card\ncard_type: button\nentity: switch.test\nname: Test\nstyles: |\n .bubble-button-background {\n opacity: 1 !important;\n background-color: ${state === 'on' ? 'blue' : 'red'} !important;\n }\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eChanging the background color of a button based on an entity for the horizontal buttons stack\u003c/summary\u003e\n\n\u003cbr\u003e\n\n```yaml\nstyles: |\n .kitchen \u003e .color-background {\n background-color: ${hass.states['light.kitchen'].state === 'on' ? 'blue' : 'red'} !important;\n }\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eShowing/Hiding a sub-button conditionally\u003c/summary\u003e\n\n\u003cbr\u003e\n\nThis one is showing the first sub-button only when my vacuum is stuck.\n```yaml\nstyles: |\n .bubble-sub-button-1 {\n display: ${hass.states['vacuum.downstairs'].state === 'error' ? '' : 'none'} !important;\n }\n```\n\nThis one is showing a sub-button when the battery is below 10%. Usefull with a sub-button that shows \"Low battery\".\n```yaml\nstyles: |\n .bubble-sub-button-1 {\n display: ${hass.states['vacuum.downstairs'].attributes.battery_level \u003c= 10 ? '' : 'none'} !important;\n }\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eChanging an icon or sub-button icon conditionally\u003c/summary\u003e\n\n\u003cbr\u003e\n\nThis one is changing a button icon only when a vacuum is stuck.\n```yaml\nstyles: |\n ${icon.setAttribute(\"icon\", hass.states['vacuum.downstairs'].state === 'error' ? 'mdi:alert' : 'mdi:robot-vacuum')}\n```\n\nThis one is changing the first sub-button icon only when a vacuum is stuck.\n```yaml\nstyles: |\n ${subButtonIcon[0].setAttribute(\"icon\", hass.states['vacuum.downstairs'].state === 'error' ? 'mdi:alert' : 'mdi:robot-vacuum')}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eChanging an icon or sub-button icon color conditionally\u003c/summary\u003e\n\n\u003cbr\u003e\n\nThis one is changing a button icon color based on its state.\n```yaml\nstyles: |\n .bubble-icon {\n color: ${hass.states['light.your_light'].state === 'on' ? 'green' : 'red'} !important;\n }\n```\n\nThis one is changing a sub-button icon color based on its state. `.bubble-sub-button-1` is the first sub-button, replace `1` if you want to change another sub-button icon.\n```yaml\nstyles: |\n .bubble-sub-button-1 \u003e ha-icon {\n color: ${hass.states['light.your_light'].state === 'on' ? 'green' : 'red'} !important;\n }\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eAnimating a fan icon conditionally\u003c/summary\u003e\n\n\u003cbr\u003e\n\nThis one is rotating a button icon when a fan is `on`.\n```yaml\nstyles: |-\n .bubble-icon {\n animation: ${hass.states['fan.you_fan'].state === 'on' ? 'slow-rotate 2s linear infinite' : ''};\n }\n @keyframes slow-rotate {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eTemplating texts (like name or state)\u003c/summary\u003e\n\n\u003cbr\u003e\n\nThis one is changing a button name/state with \"It's currently sunny\" depending on your weather.\n```yaml\nstyles: |\n ${card.querySelector('.bubble-name').innerText = \"It's currently \" + hass.states['weather.home'].state}\n```\n\nIf you want to template the state (`.bubble-state`) don't toggle `show_state: true` just toggle `show_attribute: true` without any attribute.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eAdvanced example: Changing the color of a sub-button when a pop-up is open\u003c/summary\u003e\n\n\u003cbr\u003e\n\n```yaml\nstyles: |\n ${window.addEventListener('location-changed', () =\u003e { \n card.querySelector('.bubble-sub-button-1').style.backgroundColor = this.location.href.includes('#kitchen') ? 'blue' : '';\n })}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eAdvanced example: Templating a separator name based on a state translated to your language\u003c/summary\u003e\n\n\u003cbr\u003e\n\nYou can use `hass.formatEntityState(state)` to transtale a state and `hass.formatEntityAttributeValue(state, \"attribute\")` to translate an attribute.\n\nThis one is changing the name and the icon based on the weather, \"Nuageux\" means \"Cloudy\" in French.\n\n![image](https://github.com/Clooos/Bubble-Card/assets/36499953/35ac9d0f-c3b8-4c09-9c15-fe6954011d55)\n\n```yaml\ntype: custom:bubble-card\ncard_type: separator\nicon: mdi:weather-cloudy\nsub_button:\n - entity: sensor.outside_temperature\n icon: mdi:thermometer\n name: Temperature\n show_state: true\n show_background: false\nstyles: \u003e\n .bubble-line {\n background: white;\n opacity: 1;\n }\n\n ${card.querySelector('.bubble-name').innerText =\n hass.formatEntityState(hass.states['weather.maison'])}\n\n ${icon.setAttribute(\"icon\",\n getWeatherIcon(hass.states['weather.maison'].state))}\n```\n\n\u003c/details\u003e\n\n\u003cbr\u003e\n\n## Modules\n\nModules are a powerful feature that allows you to save, reuse, and share your custom styles and templates across all of your Bubble Cards. Instead of copying and pasting the same code into multiple cards, you can create a Module and apply it wherever you need it. This makes managing your dashboard's look and feel much easier and more efficient.\n\nBut this feature is so much more powerful than that, it lets you add actual features yourself in the Bubble Card editor, using all the default [Home Assistant form](https://github.com/Clooos/Bubble-Card/blob/main/src/modules/editor-schema-docs.md) options!\n\nYou can also browse the **Module Store** to find and install [modules created by the community](https://github.com/Clooos/Bubble-Card/discussions/categories/share-your-modules), or share your own creations!\n\n\u003e [!TIP]\n\u003e A Module's code works exactly the same way as the code in the `styles` section of a card. All the same variables and functions from the [Templates](#templates) section are available.\n\n\u003cbr\u003e\n\n### Initial Setup\n\n\u003e [!IMPORTANT]\n\u003e Before you can use Modules, you need to configure storage for them. There are two methods depending on whether you use the **editor** or **YAML-only configuration**.\n\n#### Method 1: With editor support (Recommended)\n\nThis method allows you to use the Module Editor and the Module Store.\n\n\u003cdetails\u003e\n\n\u003csummary\u003eClick to expand\u003c/summary\u003e\n\n\u003cbr\u003e\n\n1. Add the following template sensor to your `configuration.yaml` file:\n\n```yaml\n# Storage for Bubble Card Modules\ntemplate:\n - trigger:\n - trigger: event\n event_type: bubble_card_update_modules\n sensor:\n - name: \"Bubble Card Modules\"\n state: \"saved\"\n icon: \"mdi:puzzle\"\n attributes:\n modules: \"{{ trigger.event.data.modules }}\"\n last_updated: \"{{ trigger.event.data.last_updated }}\"\n```\n\n2. Save the file and restart Home Assistant.\n3. You can now access the Module Editor and Module Store from any Bubble Card!\n\n\u003cbr\u003e\n\n\u003c/details\u003e\n\n#### Method 2: YAML-only configuration\n\nThis method is for users who prefer to work exclusively in YAML without using the visual editor.\n\n\u003cdetails\u003e\n\n\u003csummary\u003eClick to expand\u003c/summary\u003e\n\n\u003cbr\u003e\n\n1. Create a file called `bubble-modules.yaml` in a newly created `/www/bubble/` folder.\n2. Structure your modules in the file like in this [example](https://github.com/Clooos/Bubble-Card/blob/main/dist/bubble-modules-example.yaml), check the last module for more details.\n\n\n\u003cbr\u003e\n\n\u003c/details\u003e\n\n\u003cbr\u003e\n\n### The Module Editor\n\nYou can access the Module Editor from any card's settings, under the **Modules** section. The editor provides two main tabs:\n\n#### My Modules tab\n\n![module-editor-preview](https://github.com/user-attachments/assets/94b4b481-2d51-4f7b-8c02-1a65391d78ca)\n\nThis tab shows all your installed modules and allows you to:\n\n- **Apply** existing modules to the current card\n- **Create** a new module from scratch\n- **Edit** existing modules with live preview\n- **Delete** modules you no longer need\n- **Set global status** to make a module apply to all cards automatically\n- **Import/Export** modules for backup or sharing\n\n#### Module Store tab\n\n![update-module-store-s](https://github.com/user-attachments/assets/c7249c0c-8f8c-4ffc-835f-701c9dfcadaf)\n\nThis tab will display [all available modules from the community](https://github.com/Clooos/Bubble-Card/discussions/categories/share-your-modules), and allows you to:\n\n- **Browse** all community-created modules\n- **Search** and filter modules by name, compatibility, or keywords\n- **Install** modules with one click\n- **Update** installed modules when new versions are available\n\n\u003cbr\u003e\n\n### How to use modules\n\n#### Creating a new module\n\n\u003cdetails\u003e\n\n\u003csummary\u003eClick to expand\u003c/summary\u003e\n\n\u003cbr\u003e\n\n![module-preview](https://github.com/user-attachments/assets/4670b486-5a48-4476-a868-2ec4d42226a5)\n\n1. Go to any card's editor and expand the **Modules** section.\n2. Click on **Create new module**.\n3. Fill in the module information.\n4. Write your CSS and/or JavaScript template code in the **Code** editor.\n5. (Optional) Create a custom configuration UI in the **Editor** section (like the color picker in the screenshot above, full documentation available [here](https://github.com/Clooos/Bubble-Card/blob/main/src/modules/editor-schema-docs.md)).\n6. Click **Save**.\n\nYour module is now available to be used on any of your cards!\n\n\u003cbr\u003e\n\n\u003c/details\u003e\n\n#### Applying a module to a card\n\n\u003cdetails\u003e\n\n\u003csummary\u003eClick to expand\u003c/summary\u003e\n\n\u003cbr\u003e\n\n- **Via the editor:**\n\n - Go to the editor of the card you want to apply the module to.\n - Expand the **Modules** section.\n - Click on the module you want to apply from the list.\n - Under \"Apply to\", click on \"This card\". The module is now active. You can apply multiple modules to the same card.\n\n- **Via YAML:**\n\n ```yaml\n type: custom:bubble-card\n card_type: button\n entity: light.example\n modules:\n - module_id_1\n - module_id_2\n ```\n\n\u003cbr\u003e\n\n\u003c/details\u003e\n\n#### Applying a module globally\n\n\u003cdetails\u003e\n\n\u003csummary\u003eClick to expand\u003c/summary\u003e\n\n\u003cbr\u003e\n\nYou can set a module to apply automatically to all Bubble Cards:\n\n**This is not available for modules with an editor, as those require a specific configuration to work.**\n\n- **Via the editor:**\n\n - In the Module editor, find your module in the **My Modules** tab.\n - Toggle the **All cards** button next to the module name.\n - The module will now be applied to all cards automatically.\n \n- **Via YAML:**\n\n In your module YAML configuration (in `bubble-modules.yaml`), just add `is_global: true`.\n\n\u003cbr\u003e\n\n\u003c/details\u003e\n\n#### Excluding a single card from a global module\n\n\u003cdetails\u003e\n\n\u003csummary\u003eClick to expand\u003c/summary\u003e\n\n\u003cbr\u003e\n\nIf you have a global module but want to exclude it from a specific card:\n\n- **Via the editor:**\n \n - In the card's **Modules** section, you'll see global modules listed.\n - Click on a global module, disable \"This card\" to exclude it from this specific card.\n\n- **Via YAML:**\n \n ```yaml\n type: custom:bubble-card\n card_type: button\n entity: light.example\n modules:\n - !global_module_id # The ! prefix excludes this global module\n ```\n\n\u003cbr\u003e\n\n\u003c/details\u003e\n\n#### Sharing your module to the Module Store\n\n\u003cdetails\u003e\n\n\u003csummary\u003eClick to expand\u003c/summary\u003e\n\n\u003cbr\u003e\n\nTo share your Module to the Module Store, in the Module Editor, at the bottom in \"Export Module\", click on \"Copy for GitHub\" and paste the content in a new discussion in the [Share your Modules](https://github.com/Clooos/Bubble-Card/discussions/categories/share-your-modules) category. **Edit the description** (if needed), **the example** (for YAML users), and remember to **include at least one screenshot** for the Module Store.\n\n**Your Module becomes available right after that** (after a Store refresh), so double-check that everything is correctly written and the Module is working as expected. You can of course edit/update the Module after it is shared.\n\n\u003cbr\u003e\n\n\u003c/details\u003e\n\n#### Version management\n\n\u003cdetails\u003e\n\n\u003csummary\u003eClick to expand\u003c/summary\u003e\n\n\u003cbr\u003e\n\nThe Module Store automatically checks for updates to installed modules. When updates are available:\n\n1. You'll see an update indicator in the **Module Store** tab.\n2. Click **Update** in modules with available updates.\n3. Confirm the update in the Module Store.\n\n\u003cbr\u003e\n\n\u003c/details\u003e\n\n#### Defining supported card types\n\n\u003cdetails\u003e\n\n\u003csummary\u003eClick to expand\u003c/summary\u003e\n\n\u003cbr\u003e\n\nSome modules may not be compatible with all card types. You can specify which cards a module support:\n\n```yaml\nmy_module:\n name: \"Button Only Module\"\n supported:\n - button\n code: |\n /* Your module code here */\n```\n\n\u003c/details\u003e\n\n\u003cbr\u003e\n\n### Examples\n\n\u003cdetails\u003e\n\u003csummary\u003eBasic styling module\u003c/summary\u003e\n\n\u003cbr\u003e\n\n```yaml\nblue_cards:\n name: \"Blue Cards Theme\"\n version: \"1.0\"\n creator: \"Your Name\"\n description: \"Makes all cards backgrounds blue\"\n code: |\n ha-card {\n --bubble-main-background-color: #007acc;\n }\n```\n\n\u003cbr\u003e\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eModule with custom configuration\u003c/summary\u003e\n\n\u003cbr\u003e\n\nThis module is available [here](https://github.com/Clooos/Bubble-Card/discussions/1231).\n\n```yaml\nicon_container_color:\n name: 'Example: Customize the icon container color'\n version: v1.2\n creator: Clooos\n supported:\n - calendar\n - pop-up\n - cover\n - button\n - media-player\n - climate\n - select\n description: |\n A list of predefined colors to customize the icon container color.\n Configure this module via the editor or in YAML, for example:\n \u003cbr\u003e\u003cbr\u003e\n \u003ccode-block\u003e\u003cpre\u003e\n icon_container_color: \n color: light-blue\n \u003c/pre\u003e\u003c/code-block\u003e\n code: |\n .bubble-icon-container,\n .bubble-day-chip {\n opacity: 1 !important;\n --bubble-icon-background-color: var(--${this.config.icon_container_color?.color}-color) !important;\n }\n editor:\n - name: color\n label: Color\n selector:\n ui_color:\n include_none: true\n```\n\n\u003cbr\u003e\n\n\u003c/details\u003e\n\nMore examples can be found in the Module Store, or [here](https://github.com/Clooos/Bubble-Card/discussions/categories/share-your-modules).\n\n\u003cbr\u003e\n\n---\n\n\u003cbr\u003e\n\n## Help\n\nFeel free to open an issue if something is not working as expected. \n\n[![GitHub Issues](https://img.shields.io/badge/GitHub-Issues-green?logo=github)](https://github.com/Clooos/Bubble-Card/issues)\n\nGot questions or thoughts about Bubble Card? Want to share your dashboards or discoveries? You can go on the Home Assistant forum, on the Bubble Card subreddit or on the GitHub Discussions section.\n\n[![Home Assistant Community Forum](https://img.shields.io/badge/Home%20Assistant-Community%20Forum-blue?logo=home-assistant)](https://community.home-assistant.io/t/bubble-card-a-minimalist-card-collection-for-home-assistant-with-a-nice-pop-up-touch/609678) [![Reddit Page](https://img.shields.io/badge/Reddit-r/BubbleCard-orange?logo=reddit)](https://www.reddit.com/r/BubbleCard/) [![GitHub Discussions](https://img.shields.io/badge/GitHub-Discussions-lightgrey?logo=github)](https://github.com/Clooos/Bubble-Card/discussions)\n\n\n\u003cbr\u003e\n\n---\n\n\u003cbr\u003e\n\n## Donate\n\nI dedicate most of my spare time to making this project the best it can be. So if you appreciate my work, any donation would be a great way to show your support 🍻\n\n[![Buy me a beer](https://img.shields.io/badge/Donate-Buy%20me%20a%20beer-yellow?logo=buy-me-a-coffee)](https://www.buymeacoffee.com/clooos) [![PayPal](https://img.shields.io/badge/Donate-PayPal-blue?logo=paypal)](https://www.paypal.com/donate/?business=MRVBV9PLT9ZPL\u0026no_recurring=0\u0026item_name=Hi%2C+I%27m+Clooos+the+creator+of+Bubble+Card.+Thank+you+for+supporting+me+and+my+passion.+You+are+awesome%21+%F0%9F%8D%BB\u0026currency_code=EUR) [![Patreon Clooos](https://img.shields.io/badge/Patreon-Clooos-orange?logo=patreon)](https://www.patreon.com/Clooos)\n\n\u003cbr\u003e\n\nThank you everyone for your support, you all are my greatest motivation!\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#top\"\u003e\u003cimg src=\"https://cdn-icons-png.flaticon.com/512/892/892692.png\" height=\"50px\"\u003e\u003c/a\u003e\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclooos%2Fbubble-card","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fclooos%2Fbubble-card","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclooos%2Fbubble-card/lists"}