⚪ Bubble Card - A minimalist card collection for Home Assistant with a nice pop-up touch

Share your Projects! Dashboards & Frontend
,
2563

I promised in the thread linked below, to share the YAML for my bubble card based room header here:

Dashboard
Dashboard1720×1088 309 KB

So here you go:

type: custom:bubble-card
card_type: button
button_type: state
# We only use the sub buttons, so this dummy entity is just to avoid card errors
entity: sun.sun
show_icon: false
show_state: false
show_name: false
# Use grid layout with full width for sub-buttons
card_layout: large-sub-buttons-grid
grid_options:
  columns: 48
  rows: 3
# No actions for the card itself
tap_action:
  action: none
double_tap_action:
  action: none
hold_action:
  action: none
button_action:
  tap_action:
    action: none
  double_tap_action:
    action: none
  hold_action:
    action: none
# Sub buttons are entered in the correct order here. Alignment is impacted by the custom CSS below
sub_button:
  - entity: input_number.offene_fenster
    icon: mdi:lock
    state_background: false
    show_state: true
  - entity: input_number.eingeschaltete_lampen
    icon: mdi:lightbulb
    state_background: false
    show_state: true
  - entity: sun.sun # Dummy as I don't use a third icon in the first column so far
    icon: ""
    state_background: false
    show_state: true
    show_background: false
    show_icon: false
    show_attribute: false
    tap_action:
      action: none
  - entity: sensor.total_dc_power
    icon: m3rf:solar-power
    show_icon: true
    state_background: false
    show_background: true
    show_last_changed: false
    show_state: true
  - entity: sensor.battery_level
    state_background: false
    show_state: true
  - entity: sensor.energy_production_today_remaining # This one is spanned over 2 columns in the CSS below
    icon: mdi:calendar-month-outline
    state_background: false
    show_state: true
  - entity: sensor.load_power
    icon: mdi:home-lightning-bolt
    show_background: true
    state_background: false
    show_state: true
  - entity: sensor.meter_active_power_raw
    icon: mdi:transmission-tower
    state_background: false
    show_state: true
styles: >-
  ha-card {
    --bubble-sub-button-background-color: rgba(46, 43, 56, 0.7); # Add transparency
  }

  .bubble-button-card-container {
    background-image: url("/local/image/dashboard/essbereich.jpg");
    background-size: cover;
    border-radius: 28px;
    background-position: center;
  }
  
  .bubble-sub-button-container {
    width: 100%; # Span the container over the full width 
  }

  .bubble-sub-button-1 ha-icon {
    color: #06d8d0;
  }

  .bubble-sub-button-2 ha-icon {
    color: #fcc93d;
  }
  
  .bubble-sub-button-3 {
    opacity: 0.0; # Hide unused button
  }

  .bubble-sub-button-6 {
    grid-column: span 2; # Larger button over 2 columns
  }

  # Format text for large sub-button
  ${card.querySelector('.bubble-sub-button-6 .bubble-sub-button-name-container').innerText = "~" + Math.round(subButtonState[5]*10)/10 + "kWh Solarertrag verbleibend"}

I added some comments to make it easier to understand.
You might have to remove them in case they cause some parsing errors when pasting in your dashboard.

15 Likes