[Styling Module] Room Card

[afxok]

Module post template

Room Card

Version: v2025.07.22
Creator: -> afxok

Important

Unsupported cards:

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

This module create a Minimalist UI style "room card". The notable elements of this style are a large colored icon in the lower left corner with a white circular background that extends off the card, a column of 3-5 button on the far right vertical edge of the card, and a title in the top left corner, optionally with one or two state entities 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 3 rows.

---

🧩 Get this Module

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

room_card:
  name: Room Card
  version: 'v2025.07.22'
  creator: 'afxok'
  link: 'https://github.com/Clooos/Bubble-Card/discussions/1700'
  supported:
    - button
  unsupported:
    - cover
    - climate
    - horizontal-buttons-stack
    - media-player
    - select
    - separator
    - calendar
    - pop-up
    - empty
  description: |
      This module create a Minimalist UI style "room card". The notable elements of this style are a large
      colored icon in the lower left corner with a white circular background that extends off the card, a column
      of 3-5 button on the far right vertical edge of the card, and a title in the top left corner.

      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 3 rows.
  code: |2-
          .bubble-main-icon {
              --mdc-icon-size: 100px;
          }
          .bubble-sub-button {
            padding: 0 6px;
            height: 32px;
            width: 32px;
            min-width: 32px;
          }

          .sub-buttons-grid .bubble-sub-button-container {
            --row-size: 4;
            row-gap: calc(((var(--row-height,56px) - 46px ) * var(--row-size,1) + var(--row-gap, 4px) * ( var(--row-size,1) - 1 ) ) / ( var(--row-size,1) + 1 ));
            grid-template-rows: repeat(var(--row-size,1), 1fr);
            grid-template-columns: repeat(1, 1fr);
          }
          .bubble-sub-button .bubble-sub-button-icon {
              --mdc-icon-size: 18px;
          }
          .bubble-background {
            border-radius: 10px;
          }

          .large .bubble-container {
              border-radius: 10px;
              overflow: clip;
          }
            
          .large .bubble-icon-container {
            margin: 0px;
            z-index: 1;

            min-width: ${this.config.room_card?.square_icon ? '110px' : '160px'};
            max-width: ${this.config.room_card?.square_icon ? '110px' : '160px'};
            min-height: ${this.config.room_card?.square_icon ? '110px' : '160px'};
            max-height: ${this.config.room_card?.square_icon ? '110px' : '160px'};
            border-radius: ${this.config.room_card?.square_icon ? '0px' : '80px'};
            border-top-right-radius: ${this.config.room_card?.square_icon ? '12px' : '80px'};
            transform: ${this.config.room_card?.square_icon ? 'translate(0px,37px)' : 'translate(-20px,42px)'};
          }

          .bubble-name-container {
            position: absolute;
            width: 100px;
            transform:translate(10px,-75px);
            margin: 0px;
            overflow: visible;
          }

          .bubble-sub-button-container {
            margin-bottom: auto;
            margin-left: auto;
            padding-top: min(8px,100%);
          }

          .bubble-pop-up {
            height: auto !important;
          }
  editor:
    - name: square_icon
      label: "Square Icon"
      selector:
        boolean: {}

---

Screenshot:

Desktop:

Mobile:

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 ❤️

[DerHerzog7]

This is awesome. Thank you.

Be great if you could change the size of the icon background as well add the title size/location. Mine of squished at the top.

Can you change the background of the circle?

[afxok]

Yes, I have some more improvements in the works. Do you mean change the color of the background circle?

[DerHerzog7]

Awesome.

Yeh but I figured out how to change that using another module. Still, would be cool to do it natively in yours...

[sobchek]

This is great. Thank you.

Spotted an issue with using selector drop-downs and sub-buttons. Seems all icon containers are being rounded, and so we get this result

This is what it should look like:

[onkelbobby]

Hello,

I'm currently trying to setup my dashboard for mobile phones using this awesome Bubble Cards, but I'm struggling with some styling and dimensioning issues.

The dimensions and proportions of the test-card I have designed are looking correct on my laptop dashboard, even if the big icon and the circle around is a bit too large for my understanding.

If I open this dashboard in the HA app on my iPhone the dimensions are messed up and the sub buttons are touching the edge of the button.

What is the right way to move the sub buttons slightly to the left that they do no longer interfere with the edge of the card itself? And how can I shrink the icon and the circle around the icon that it does not take that much space?

I know that there is possibility to modify the Code (CSS/JS template) of the Room Card Module, but can anybody tell me what variables and values need to be modified to achieve what im looking for?

thanks

[onkelbobby]

after several trials I managed to modify the CSS file accordingly and it worked on the laptop.
The changes were not instantly shown on the iPhone, but after a reboot it worked well.

[ctankep23]

Please show how you did this!

[einfall]

Is there a way to replace the icon with a picture?

[binoyanto]

Hi, Thanks for the Wonderful Mod. Can I know how to add Temp, Humidity to the setup below the Room Name and Also make the Room Name Little Bigger , I am just new to HA and settings, sharing my screens shot. Thanks ton.

[ddkedr]

Hey! Could you please share how did you make buttons with temperature and humidity charts? They look amazing

[binoyanto]

@ddkedr - this is the code I use in a plane card, as it is full code, I am still checking how to change it and make both together ie; temp and humidity, I do not have the link where I copied this as I use bubble cards--
change sensor to humidity for second card. hope this helps

---

type: custom:button-card
aspect_ratio: 10/1.5
grid_options:
  columns: 6
  rows: 1
modules:
  - izequbes_custom_colors
  - icon_animations
custom_fields:
  value:
    card:
      type: custom:button-card
      entity: sensor.bedroom_sensor_temperature
      show_icon: false
      show_state: true
      show_name: true
      name: Temperature
      styles:
        name:
          - position: absolute
          - left: "-7px"
          - top: 31px
          - padding-left: 65px
          - justify-self: start
          - font-size: 0.28cm
          - font-weight: bold
          - color: rgba(0,128,128,0.7)
        state:
          - position: absolute
          - left: "-9px"
          - top: 11px
          - padding-left: 67px
          - justify-self: start
          - font-size: 0.45cm
          - font-weight: bold
        card:
          - background: >-
              linear-gradient(90deg, rgba(87, 87, 98,1.0) 0%, rgba(66, 61,
              76,0.0) 100%)
          - width: 160px
          - height: 64px
          - border: none
          - z-index: 1
      tap_action:
        action: none
      hold_action:
        action: none
  graph:
    card:
      type: custom:mini-graph-card
      entities:
        - entity: sensor.bedroom_sensor_temperature
          color: rgba(0,128,128,1.0)
      hours_to_show: 24
      hour24: true
      points_per_hour: 2
      animate: true
      update_interval: 15
      aggregate_func: avg
      line_width: 3
      bar_spacing: 15
      height: 141
      group: true
      show:
        labels: false
        fill: fade
        state: false
        name: false
        icon: false
  icon:
    card:
      type: custom:button-card
      size: 55%
      icon: mdi:thermometer
      show_name: false
      styles:
        icon:
          - position: absolute
          - left: 9px
          - top: 8.5px
          - color: rgba(200,200,200,1.0)
          - width: 22px
          - height: 22px
          - color: rgba(155,155,155,1.0)
        card:
          - position: absolute
          - left: 2px
          - top: "-2px"
          - border: none
          - border-radius: 50%
          - background-color: rgba(40,40,40,1.0)
          - width: 40px
          - height: 40px
          - z-index: 1
      tap_action:
        action: none
      hold_action:
        action: none
styles:
  card:
    - background-color: rgba(0, 0, 0, 0.0)
    - border: none
    - width: 200px
    - height: 56px
  custom_fields:
    graph:
      - position: absolute
      - left: "-1px"
      - top: "-1px"
      - width: 50
    icon:
      - position: absolute
      - left: 3%
      - top: 18%
    value:
      - position: absolute
      - left: 0%
      - top: 0%
tap_action:
  action: none
hold_action:
  action: none
card_mod:
  style: |
    ha-card {
       border-radius: 38px;
    }

[homevictoraguiar]

@binoyanto Hello, how are you? Nice to meet you, Victor. I'm from Brazil and I'm very interested in your dashboard. Could you share the full RAW file?