[Styling Module] Scene Card

[afxok]

Module post template

Scene Card

Version: v2025.09.30
Creator: -> afxok

Important

Unsupported cards:

• Cover
• Climate
• Horizontal buttons stack
• Media player
• Pop-up
• Select
• Separator

This module creates a Minimalist UI style "scene card". The notable elements of this style are a horizontal row of buttons with the name of each scene below it.

To use this module, card layout styling options must be set to "Large with sub-buttons in a grid (Layout: min. 2 rows)" with at least 2 rows. One scene button is created for each sub button configured on the bubble card. The main button for the card will be hidden so it's best if this is set to the "Name/Text" button type.

---

🧩 Get this Module

To use this module, simply copy and paste the following configuration into your /www/bubble/bubble-modules.yaml file.

scene_card:
  name: Scene Card
  version: 'v2025.09.30'
  creator: 'afxok'
  link: 'https://github.com/Clooos/Bubble-Card/discussions/1702'
  supported:
    - button
  unsupported:
    - cover
    - climate
    - horizontal-buttons-stack
    - media-player
    - select
    - separator
    - calendar
    - pop-up
    - empty
  description: |
      This module creates a Minimalist UI style "scene card". The notable elements of this style are a horizontal
      row of buttons with the name of each scene below it.

      To use this module, card layout styling options must be set to "Large with sub-buttons in a grid (Layout: min. 2 rows)"
      with at least 2 rows. One scene button is created for each sub button configured on the bubble card. The main button for
      the card will be hidden so it's best if this is set to the "Name/Text" button type.
  code: |2-
    .bubble-content-container {
      display: none;
    }
    .bubble-sub-button-container {
      width: 100%;
      justify-content: space-evenly;
      right: 0px;
      gap: 0px;
    }
    .bubble-sub-button {
      display: grid;
      grid-template-areas: 'item1' 'item2';
      grid-template-columns: min-content;
      grid-template-rows: auto;
      justify-items: center;
      padding: 0px;
      min-height: 62px;
      border-radius: 0px;
    }
    .bubble-sub-button-name-container {
      font-size: 12px;
      font-weight: 600;
    }
    .bubble-sub-button-icon {
      grid-area: item1;
    }

    .large .bubble-icon-container {
      margin: 0px;
    }
    .background-off, .background-on  {
       background-color: rgba(0,0,0,0);
    }
    .background-on .icon-with-state {
       background-color: var(--bubble-sub-button-light-background-color, var(--bubble-accent-color, var(--bubble-default-color)));
    }
    .background-off .icon-with-state {
       background-color: var(--bubble-sub-button-background-color, var(--bubble-icon-background-color, var(--bubble-secondary-background-color, var(--card-background-color, var(--ha-card-background)))));
    }
    .icon-with-state {
       margin: 0px;
       --mdc-icon-size: 20px;
       min-height: 42px;
       min-width: 42px;
       align-content: center;
       justify-content: center;
       flex-wrap: wrap;
       border-radius: var(--bubble-sub-button-border-radius, var(--bubble-border-radius, 42px));
    }

---

Screenshot:

Before posting your module

• I've replaced all lines starting with ->
• I've updated the unsupported cards above the description and under the unsupported property
• I've added a screenshot
• I've chosen a unique your_module_key
• I really enjoyed working on this module ❤️

[Clooos]

Hi! I really like this module, would you mind if I use some parts of it for a new card type in an upcoming release? This could be a good candidate for a "Sub-buttons card" or something like that 😄

Edit: And also a good base card for some upcoming modules.

[afxok]

Don't mind at all! And I definitely think using it as a base card or building in some support for it within the main Bubble Card release would be a good idea. This module was a bit of a "kludge" insofar as I had to work with the existing element containers and getting the CSS to do what I wanted was a little hackish. A "sub-buttons card" would greatly simplify it.

[misterdaan]

@Clooos Any update on this "Sub-bottons card"?

[Clooos]

Hi! This card is now available in v3.1.0 (this version is still a pre-release).

https://github.com/Clooos/Bubble-Card/releases/tag/v3.1.0-rc.2

[kr3ator]

Hi, thanks for the module. Could You please advice why I'm not getting output as in your example above?
With this config:

type: custom:bubble-card
card_type: button
button_type: name
modules:
  - scene_card
rows: "2"
sub_button:
  - show_background: true
    state_background: true
    show_icon: true
    show_name: true
    show_last_changed: false
    show_state: false
    show_last_updated: false
    show_attribute: false
    name: Papier
    entity: input_boolean.smieci_papier_wystawione
    hide_when_parent_unavailable: true
  - entity: input_boolean.smieci_zmieszane_wystawione
    name: Zmieszane
    show_name: true
    hide_when_parent_unavailable: true
show_icon: true
scrolling_effect: false
icon_container_color:
  color: amber

, I get:

Changing the entities ON/OFF doesn't change anything. When I change the layout to "Large with sub-buttons in a grid (Layout: min. 2 rows)" it is even worse:

[Aurel004]

Same issue

and worse with "Large with sub-buttons in a grid (Layout: min. 2 rows)"

[afxok]

Hi, I haven't been able to recreate the problem you're both getting. I suspect this might have something to do with styles from other modules you may have active. As a workaround, you can play with the sizes of the icons, height/width, and the border radius by adding this stylesheet to the "Custom styles & JS templates" Styling Options for that bubble card:

    .icon-with-state {
      --mdc-icon-size: 20px;
      min-height: 42px;
      min-width: 42px;
      border-radius: var(--bubble-sub-button-border-radius, var(--bubble-border-radius, 12px));
    }

In particular, I think you want to increase the height/width of each icon as well as the border radius.

[tiduch]

Hi afxok,
I used for the first time extra modules in the bubble card magic system.
I'm already very satisfied thanks to your module. I found a way to select (1 tap) easily mine scene and event be able to make some changes directly (double tap).

The only issue i'm facing is : i don't have any changes by ticking or not Show background when entity is on. Any idea how to fix that?

i have almost the same bubble card without your module, and it's working :

NB : as mentioned about by Aurel004, card layout styling options set in Large and Not "Large with sub-buttons in a grid (Layout: min. 2 rows)" .

[afxok]

@tiduch What type of entities are you using in the scene card module? If you're using actual "scene" (entity name begins with 'scene.') then scenes don't have an on/off state. Their state is just a timestamp of when it was last invoked so there is no way to know if it is off or on.

[afxok]

@tiduch I just posted an update to the module that should handle your entities.

[tiduch]

@tiduch I just posted an update to the module that should handle your entities.

Thanks it does work. BTW, after a few days on it, i've seen that it does not appear the same way on different browser. I'm using more specific one (NSPanel > Android, Tesla > Chromium behind).