Request: YAML configuration used for the new grouped Bubble Card shown in v3.1.0 patch notes

[thomasv04]

Goal

Hello 👋

First of all, thank you for the amazing work on Bubble Card and for the 3.1.0 update 🙏

I would like to reproduce the UI shown in the v3.1.0 patch notes, especially the grouped room cards layout visible in the screenshot (Living room + Kitchen cards with brightness bars and vertical action buttons).

My goal is to understand how this specific module/layout was built and how the different Bubble Cards are structured together.

I have attached the screenshot from the patch notes for reference.

Source Yaml

At the moment, I don’t have a working source YAML for this layout.
I tried to recreate it by combining bubble-card, bubble-light, and bubble-cover, but I couldn’t achieve the same structure and alignment as in the example.

Which step did you already try?

I tried:

Using multiple Bubble Cards inside a vertical-stack

Grouping entities manually per room

Adjusting card styles and layouts


However, I couldn’t reproduce:

The compact grouped room card

The vertical action icons on the right

The shared container look shown in the patch note image

Problem

I can’t figure out how the example shown in the patch notes is structured:

• Is it a single Bubble Card with a custom layout?

• A new internal module introduced in 3.1.0?

• Or a combination of Bubble Cards with custom YAML and styles?

If possible, could you:

• Share the YAML configuration used for this example
  or

• Explain which Bubble Cards and options are used to build it?

Even a simplified version would be extremely helpful 🙏

Read the documentation

• I have read the documentation

[pterhu]

Hello!

You can try the following:

• create a bubble card: button / switch
• add a main sub button (top)
• in bottom sub button section add two groups with vertical placement
  -- add one default type sub button to group1
  -- add one slider type sub button and one default type sub button to group2

type: custom:bubble-card
card_type: button
button_type: switch
entity: light.main_light
name: Living room
show_state: true
sub_button:
  main:
    - entity: light.another_light
  bottom:
    - name: Group1
      buttons_layout: inline
      group:
        - entity: light.floorlight
          fill_width: false
      justify_content: end
    - name: Group2
      buttons_layout: inline
      group:
        - entity: light.dimmable_light
          sub_button_type: slider
        - entity: light.last_light
          fill_width: false
  bottom_layout: rows
rows: 2.406

[Clooos]

Hi! I've already shared that one on Reddit, here's the link:

https://www.reddit.com/r/BubbleCard/s/JoyFsF5ka8

Enjoy! 😄