[Example] Square Room Summery Cards

[MrBearPresident]

type: custom:bubble-card
card_type: button
layout_options:
  grid_columns: 2
  grid_rows: 3
entity: input_number.temperature
show_attribute: false
show_name: true
show_icon: true
scrolling_effect: true
show_state: true
hold_action:
  action: navigate
  navigation_path: plan
card_layout: large-2-rows
button_action:
  tap_action:
    action: navigate
    navigation_path: plan
tap_action:
  action: navigate
  navigation_path: plan
button_type: state
name: Family Room
icon: mdi:television
sub_button:
  - entity: input_boolean.help_house_testboolean
    show_last_changed: false
    show_attribute: false
    show_state: false
    tap_action:
      action: toggle
    show_background: true
    hold_action:
      action: call-service
      service: input_select.select_option
      data:
        option: family_room_lights
      target:
        entity_id: input_select.help_gf_lr_sceneselector
    double_tap_action:
      action: call-service
      service: input_select.select_option
      data:
        option: family_room_lights
      target:
        entity_id: input_select.help_gf_lr_sceneselector
  - entity: input_boolean.help_house_testboolean2
    tap_action:
      action: toggle
    double_tap_action:
      action: more-info
    hold_action:
      action: more-info
  - entity: input_boolean.help_house_testboolean3
    show_last_changed: false
    show_state: false
    show_name: false
    tap_action:
      action: toggle
  - entity: input_boolean.help_house_testboolean4
    tap_action:
      action: toggle
    double_tap_action:
      action: more-info
    hold_action:
      action: more-info
styles: >
  :host{
      --icon-Background-Color: #FF595E ;
      --color-yellow: 255, 202, 58 ;
      --color-blue: 25, 130, 196 ;
      --color-green: 138, 201, 38 ;
      --color-purple: 106, 76, 147 ;
  }


  .card-content {
    width: 100%;
    margin: 0 !important;
  }


  .large .bubble-button-card-container {
    height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )) !important;
    overflow: hidden !important;
  }


  .bubble-button-card {
    display: grid;
    grid-template-areas:
      'n n n b'
      'l l l b'
      'i i . b'
      'i i . b';
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1.5fr 0.5fr 1fr 1fr;
    justify-items: center;
  }


  .bubble-icon-container {
    grid-area: i;
    border-radius: 50% !important;
    width: 150% !important;
    height: 150% !important;
    max-width: none !important;
    max-height: none !important;
    position: absolute !important;
    place-self: center !important;
    margin: 0px 0px 0px 0px !important;
    padding: 0px, 0px, 0px, 0px !important;
    background-color: var(--icon-Background-Color);
  }


  .bubble-icon {
    width: 40%;
    position: relative !important;
    --mdc-icon-size: 100px !important;
    opacity: 0.5 !important;
  }


  .bubble-name-container {
    grid-area: n;
    justify-self: start;
    margin-left: 20px;
    max-width: calc(100% -(12px + 0px));
  }


  .bubble-name {
    font-weight: bold;
    font-size: 16px;
  }


  .bubble-state {
    font-weight: bold;
    font-size: 14px;
  }


  .rows-2 .bubble-sub-button-container {
    grid-area: b;
    display: flex !important;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-start;
    width: auto !important;
    padding-right: 0px;
    height: 100% !important;
    margin-top: 25px;
  }


  .rows-2 .bubble-sub-button {
    height: 36px !important;  
  }


  .bubble-sub-button {
    min-width: 36px !important;
  }

  .bubble-sub-button-1 {
    color: rgba(var(${hass.states['input_boolean.help_house_testboolean'].state === 'on' ? '--color-yellow' : ''}), 1) !important;
    background-color: rgba(var(${hass.states['input_boolean.help_house_testboolean'].state === 'on' ? '--color-yellow' : ''}), 0.3) !important;
  }

  .bubble-sub-button-2 {
    color: rgba(var(${hass.states['input_boolean.help_house_testboolean2'].state === 'on' ? '--color-blue' : ''}), 1) !important;
    background-color: rgba(var(${hass.states['input_boolean.help_house_testboolean2'].state === 'on' ? '--color-blue' : ''}), 0.3) !important;
  }


  .bubble-sub-button-2 .bubble-sub-button-icon {
    animation: ${hass.states['input_boolean.help_house_testboolean2'].state === 'on' ? 'slow-rotate 2s linear infinite' : ''};
  }

  @keyframes slow-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }


  .bubble-sub-button-3 {
    color: rgba(var(${hass.states['input_boolean.help_house_testboolean3'].state != 'on' ? '' : '--color-green'}), 1) !important;
    background-color: rgba(var(${hass.states['input_boolean.help_house_testboolean3'].state != 'on' ? '' : '--color-green'}), 0.3) !important;
  }

  .bubble-sub-button-3 .bubble-sub-button-icon{
    animation: ${hass.states['input_boolean.help_house_testboolean3'].state === 'on' ? 'sound 0.8s' : ''} !important;
    animation-iteration-count: infinite  !important;
  }


  @keyframes sound {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
  }


  .bubble-sub-button-4 {
    color: rgba(var(${hass.states['input_boolean.help_house_testboolean4'].state === 'on' ? '--color-purple' : ''}), 1) !important;
    background-color: rgba(var(${hass.states['input_boolean.help_house_testboolean4'].state === 'on' ? '--color-purple' : ''}), 0.3) !important;
  }

  .bubble-sub-button-4 .bubble-sub-button-icon{
    animation: ${hass.states['input_boolean.help_house_testboolean4'].state === 'on' ? 'shake 10s' : ''} !important;
    animation-iteration-count: infinite  !important;
  }


  @keyframes shake {
    0% { transform: translate(0px, 5px) rotate(0deg); }
    25% { transform: translate(-5px, 0px) rotate(-45deg); }
    50% { transform: translate(0px, -5px) rotate(0deg); }
    75% { transform: translate(5px, 0px) rotate(45deg); }
    100% { transform: translate(0px, 5px) rotate(0deg); }
  }



  #Place all the icon changing stuff on the bottom

  ${subButtonIcon[0].setAttribute("icon",
  hass.states['input_boolean.help_house_testboolean'].state === 'on' ?
  'mdi:lightbulb-group' : 'mdi:lightbulb-off')}

  ${subButtonIcon[1].setAttribute("icon",
  hass.states['input_boolean.help_house_testboolean2'].state === 'on' ?
  'mdi:fan' : 'mdi:fan-off')}

  ${subButtonIcon[2].setAttribute("icon",
  hass.states['input_boolean.help_house_testboolean3'].state === 'on' ?
  'mdi:speaker' : 'mdi:speaker-off')}

  ${subButtonIcon[3].setAttribute("icon",
  hass.states['input_boolean.help_house_testboolean4'].state === 'on' ?
  'mdi:robot-vacuum' : 'mdi:robot-vacuum-off')}

Only Square style

type: custom:bubble-card
card_type: button
entity: sun.sun
show_attribute: false
show_name: true
show_icon: true
scrolling_effect: true
show_state: true
hold_action:
  action: navigate
  navigation_path: plan
card_layout: large-2-rows
button_action:
  tap_action:
    action: navigate
    navigation_path: plan
tap_action:
  action: navigate
  navigation_path: plan
button_type: state
name: Family Room
icon: mdi:television
sub_button:
  - entity: sun.sun
  - entity: sun.sun
  - entity: sun.sun
  - entity: sun.sun
styles: |
  :host{
      --icon-Background-Color: #FF595E ;
      --color-yellow: 255, 202, 58 ;
      --color-blue: 25, 130, 196 ;
      --color-green: 138, 201, 38 ;
      --color-purple: 106, 76, 147 ;
  }

  .card-content {
    width: 100%;
    margin: 0 !important;
  }

  .large .bubble-button-card-container {
    height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )) !important;
    overflow: hidden !important;
  }

  .bubble-button-card {
    display: grid;
    grid-template-areas:
      'n n n b'
      'l l l b'
      'i i . b'
      'i i . b';
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1.5fr 0.5fr 1fr 1fr;
    justify-items: center;
  }

  .bubble-icon-container {
    grid-area: i;
    border-radius: 50% !important;
    width: 150% !important;
    height: 150% !important;
    max-width: none !important;
    max-height: none !important;
    position: absolute !important;
    place-self: center !important;
    margin: 0px 0px 0px 0px !important;
    padding: 0px, 0px, 0px, 0px !important;
    background-color: var(--icon-Background-Color);
  }

  .bubble-icon {
    width: 40%;
    position: relative !important;
    --mdc-icon-size: 100px !important;
    opacity: 0.5 !important;
  }

  .bubble-name-container {
    grid-area: n;
    justify-self: start;
    margin-left: 20px;
    max-width: calc(100% -(12px + 0px));
  }

  .bubble-name {
    font-weight: bold;
    font-size: 16px;
  }

  .bubble-state {
    font-weight: bold;
    font-size: 14px;
  }

  .large .bubble-sub-button-container {
    grid-area: b;
    display: flex !important;
    flex-wrap: wrap;
    flex-direction: column;
    gap: calc((100% - 4 * 36px)/5) !important;
    justify-content: flex-start;
    width: auto !important;
    right: 0px !important;
    padding-right: 0px !important;
    height: 100% !important;
    top: calc((100% - 4 * 36px)/5) !important;
    
  }

  .large .bubble-sub-button {
    height: 36px !important;  
  }
grid_options:
  columns: 6
  rows: 3

Extra Features:

• Rotation of the fan icon
• Moving of the box icon
• Moving of the vacuum robot

Disclamer: I did not make this, but revised what @ddewar posted.

• https://community.home-assistant.io/t/bubble-card-a-minimalist-card-collection-for-home-assistant-with-a-nice-pop-up-touch/609678/1669?u=mrbearpresident
• https://community.home-assistant.io/t/bubble-card-a-minimalist-card-collection-for-home-assistant-with-a-nice-pop-up-touch/609678/1659

[ddewar]

This is really awesome, I'm bringing some of your changes into mine! Thanks!

[MrBearPresident]

I've enlarged the card somewhat to fit with the sections-view.

[Clooos]

This one is insane! I really love the vacuum animation 👌

[LoznOz]

Love the ideas and resulting card in this thanks for sharing

[kdober]

This looks very nice!
Do you know if it is possible to define the color variables in general so they apply to all the Room bubble cards?
For example, I tried to place the
styles: >
:host{
--icon-Background-Color: #FF595E ;
--color-yellow: 255, 202, 58 ;
--color-blue: 25, 130, 196 ;
--color-green: 138, 201, 38 ;
--color-purple: 106, 76, 147 ;
}

directly on the dashboard level (yaml mode in the Raw configuration editor), but color variables saved there are not working when I reference them in the bubble card.

[MinnesotaMean]

I cannot for the life of me get this button to work on my dashboard. Could anyone please help guide me on how to set it up?

[MrBearPresident]

What did you try, what didn't work?
What do you want to achieve?

[MinnesotaMean]

I created a bubble card button, cleared the yaml and pasted in your template. I then went back into the visual editor and chose my input booleans and input for temp. But when I save the button is empty and I don't get a preview of it while modifying.

[richsimpson]

worked for me but lots of info to change to match your inputs in the code. changed all the input boolean one at a time. first one, went through and made it a light. second something else.

Remember if you change entity or button no.1 to your light, then its also in the style code later that you need to change items, not just up at the top of the yaml code.

Will need to change all 4 of the items to something you have or remove items etc.

[MrBearPresident]

On the bottom of the original post I made a "Only Square style" part.
Can you try and copy paste that? Maybe that is easier to start from.

[amstermk]

How do I adapt this to the bubble icon? I tried to implement it into .bubble-icon … but that didn‘t work

edit: forget the question... works as intended. made another mistake why it initially did not work...

[DerHerzog7]

So with the latest beta, this button broke. The icon and coloured circle has now shifted to the right of the button and I'm not sure why...

[Clooos]

I will check that!

[Clooos]

This is already fixed in v2.5.0-beta.2!

https://github.com/Clooos/Bubble-Card/releases/tag/v2.5.0-beta.2

[DerHerzog7]

Brilliant!

[DerHerzog7]

Actually any chance you can turn this into a module to use with the new beta?

[DerHerzog7]

Any update?

[ddewar]

Here is a quick one that will just apply the styles to make the squares I have currently, working on making some editor options. @MrBearPresident new addition in the newest beta might make things even easier. Hoping to mess with that soon.

  name: Room Cards Styling
  version: "v0.10"
  creator: "ddewar"
  link: "https://github.com/ddewar/"
  description: This module applies room card styling to Bubble Card.

  unsupported:
    - horizontal-buttons-stack
    - separator
    - pop-up
    - empty-column

  code: |
    .card-content {
      width: 100%;
      margin: 0 !important;
    }

    .large .bubble-button-card-container {
      height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )) !important;
      overflow: hidden !important;
    }

    .bubble-button-card {
      display: grid;
      grid-template-areas:
        'n n n b'
        'l l l b'
        'i i . b'
        'i i . b';
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: 1.5fr 0.5fr 1fr 1fr;
      justify-items: center;
    }

    .bubble-icon-container {
      grid-area: i;
      border-radius: 50% !important;
      width: 150% !important;
      height: 150% !important;
      max-width: none !important;
      max-height: none !important;
      position: absolute !important;
      place-self: center !important;
      margin: 0px 0px 0px 0px !important;
      padding: 0px, 0px, 0px, 0px !important;
      background-color: var(--icon-Background-Color);
    }

    .bubble-icon {
      width: 40%;
      position: relative !important;
      --mdc-icon-size: 100px !important;
      opacity: 0.5 !important;
    }

    .bubble-name-container {
      grid-area: n;
      justify-self: start;
      margin-left: 20px;
      max-width: calc(100% -(12px + 0px));
    }

    .bubble-name {
      font-weight: bold;
      font-size: 16px;
    }

    .bubble-state {
      font-weight: bold;
      font-size: 14px;
    }

    .rows-2 .bubble-sub-button-container {
      grid-area: b;
      display: flex !important;
      flex-wrap: wrap;
      flex-direction: column;
      justify-content: flex-start;
      width: auto !important;
      padding-right: 0px;
      height: 100% !important;
      margin-top: 25px;
    }

    .rows-2 .bubble-sub-button {
      height: 36px !important;
    }

    .bubble-sub-button {
      min-width: 36px !important;
    }```

[DerHerzog7]

AH yes I saw that. Awesome. I think it would be cool to quickly make the icons and lighting adapatable like you have in this card. Keen to see what you do.

[ddewar]

@DerHerzog7 another step from this post is a module now: #1281

[DerHerzog7]

Amazing!

[400HPMustang]

Is this card broken? Tried to use the sample code, recreated all of the sample helpers just for the sake of testing and the card does not render at all

[400HPMustang]

@MrBearPresident ok for some reason I had to create a new dashboard for this to work and now both examples work just fine.

[ddewar]

On the bottom of the original post I made a "Only Square style" part. That works for me in an instant.

Same idea, but was adding editor options for the colors and animations

[DerHerzog7]

On the bottom of the original post I made a "Only Square style" part. That works for me in an instant.

Same idea, but was adding editor options for the colors and animations

Have you posted this module yet for the editor options? Would love that ability.

[Harry-1976]

Has there been any updates on this?

[MonsterBandit]

is there an easy way to make the large icon background change color with the state of the entity?

someone else, made something similar using stack cards. here's a link to his reddit thread. Thoughts on adapting his style to this style?

[MonsterBandit]

Not sure what, if anything, I'm doing wrong or if there's some type of conflict that I'm missing. But, the button color is blue and I can't figure out how to change it. EDIT: if i change it to state, i get the desired appearance, however the background of the icon is a mix of red & blue.

Further, is there a way to add that the main button icon changes with the state of the entity? And add secondary sensors to where the "attribute or show state" goes under the name of the card?

type: custom:bubble-card
card_type: button
entity: switch.living_room_switch
show_attribute: false
show_name: true
show_icon: true
scrolling_effect: true
show_state: false
hold_action:
  action: navigate
  navigation_path: plan
card_layout: large-2-rows
button_action:
  tap_action:
    action: navigate
    navigation_path: plan
tap_action:
  action: navigate
  navigation_path: plan
button_type: switch
name: Family Room
icon: mdi:television
sub_button:
  - entity: switch.christmas_tree
    name: Christmas Tree
    icon: mdi:pine-tree-variant-outline
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    visibility:
      - condition: state
        entity: switch.christmas_tree
        state_not: unavailable
  - entity: switch.living_room_ac
    name: Living Room AC
    icon: mdi:fan
    tap_action:
      action: toggle
    hold_action:
      action: more-info
  - entity: script.clean_living_room
    name: Room Clean
    icon: mdi:robot-vacuum
    tap_action:
      action: toggle
    hold_action:
      action: more-info
styles: |
  :host{
      --icon-Background-Color: #FF595E ;
  }

  .card-content {
    width: 100%;
    margin: 0 !important;
  }

  .large .bubble-button-card-container {
    height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )) !important;
    overflow: hidden !important;
  }

  .bubble-button-card {
    display: grid;
    grid-template-areas:
      'n n n b'
      'l l l b'
      'i i . b'
      'i i . b';
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1.5fr 0.5fr 1fr 1fr;
    justify-items: center;
  }

  .bubble-icon-container {
    grid-area: i;
    border-radius: 50% !important;
    width: 150% !important;
    height: 150% !important;
    max-width: none !important;
    max-height: none !important;
    position: absolute !important;
    place-self: center !important;
    margin: 0px 0px 0px 0px !important;
    padding: 0px, 0px, 0px, 0px !important;
    background-color: var(--icon-Background-Color);
  }

  .bubble-icon {
    width: 60%;
    position: relative !important;
    --mdc-icon-size: 100px !important;
    opacity: 0.5 !important;
  }

  .bubble-name-container {
    grid-area: n;
    justify-self: start;
    margin-left: 20px;
    max-width: calc(100% -(12px + 0px));
  }

  .bubble-name {
    font-weight: normal;
    font-size: 16px;
  }

  .bubble-state {
    font-weight: normal;
    font-size: 14px;
  }

  .large .bubble-sub-button-container {
    grid-area: b;
    display: flex !important;
    flex-wrap: wrap;
    flex-direction: column;
    gap: calc((100% - 4 * 36px)/5) !important;
    justify-content: flex-start;
    width: auto !important;
    right: 0px !important;
    padding-right: 0px !important;
    height: 100% !important;
    top: calc((100% - 4 * 36px)/5) !important;
    
  }

  .large .bubble-sub-button {
    height: 36px !important;  
  }
grid_options:
  columns: 6
  rows: 3
modules:
  - default
  - subbutton_colors
  - subbutton_animations
subbutton_colors:
  subbutton1:
    color: green
    condition:
      - condition: state
        entity_id: switch.christmas_tree
        state: "on"
  subbutton2:
    color: blue
    condition:
      - condition: state
        entity_id: switch.living_room_ac
        state: "on"
  subbutton3:
    color: deep-purple
    condition:
      - condition: state
        entity_id: vacuum.dobby
        state: cleaning
      - condition: and
        conditions:
          - condition: state
            entity_id: script.clean_living_room
            attribute: mode
            state: single
subbutton_animations:
  subbutton2:
    animation: spin
    condition:
      - condition: state
        entity_id: switch.living_room_ac
        state: "on"
  subbutton3:
    animation: roam
    condition:
      - condition: state
        entity_id: vacuum.dobby
        state: cleaning
      - condition: and
        conditions:
          - condition: state
            entity_id: script.clean_living_room
            attribute: mode
            state: single

[Harry-1976]

You need to change two lines to make dynamic icon colors.

Under :host change --icon-Background-Color: #FF595E ; to --icon-Background-Color: ${hass.states['your entity'].state === 'on' ? 'rgba(214, 4, 53, 0.2)' : 'rgba(128,128,128,0.1)'} !important;

and add this line in the .bubble-icon section below the opacity color: ${hass.states['your entity'].state === 'on' ? 'rgb(214, 4, 53)' : 'rgba(128,128,128, 0.8)'} !important;

And change the colors to your liking off course :)

As for your second question you need to change the bubble card type from switch to state and than use the entity you need to show the state from, eg the temp sensor in that room. I don't know how to display two attributes like mushroom does.

[MonsterBandit]

Thank you kindly. I'll play around with it.