Example card for use in Lovelace Section layout with Bubble Card addon

lovelace_printer.yaml

type: grid
cards:
  - type: custom:bubble-card
    card_type: button
    button_type: state
    entity: sensor.p1s_1_print_progress
    name: 1 - Fred
    icon: mdi:printer-3d-nozzle
    show_icon: false
    force_icon: false
    show_state: true
    show_name: true
    show_attribute: false
    show_last_changed: false
    attribute: friendly_name
    sub_button:
      - icon: mdi:circle-double
        show_icon: false
        name: Slot 1
        show_name: false
        show_state: true
        show_attribute: false
        show_background: false
        show_last_changed: false
        entity: sensor.p1s_1_ams_tray_1
      - icon: mdi:circle-double
        show_icon: false
        name: Slot 2
        show_name: false
        show_state: true
        show_attribute: false
        show_background: false
        show_last_changed: false
        entity: sensor.p1s_1_ams_tray_2
      - icon: mdi:circle-double
        show_icon: false
        name: Slot 3
        show_name: false
        show_state: true
        show_attribute: false
        show_background: false
        show_last_changed: false
        entity: sensor.p1s_1_ams_tray_3
      - icon: mdi:circle-double
        show_icon: false
        name: Slot 4
        show_name: false
        show_state: true
        show_attribute: false
        show_background: false
        show_last_changed: false
        entity: sensor.p1s_1_ams_tray_4
    styles: >
      .bubble-button-card-container {
        # background: none;
        border-radius: 5px
      }


      .bubble-sub-button-1 {
        min-width: 50px;
        text-shadow: 1px 1px black;
        background: ${hass.states['sensor.p1s_1_ams_tray_1'].attributes.color} !important;
      }


      .bubble-sub-button-2 {
        min-width: 50px;
        text-shadow: 1px 1px black;
        background: ${hass.states['sensor.p1s_1_ams_tray_2'].attributes.color} !important;
      }


      .bubble-sub-button-3 {
        min-width: 50px;
        text-shadow: 1px 1px black;
        background: ${hass.states['sensor.p1s_1_ams_tray_3'].attributes.color} !important;
      }


      .bubble-sub-button-4 {
        min-width: 50px;
        text-shadow: 1px 1px black;
        background: ${hass.states['sensor.p1s_1_ams_tray_4'].attributes.color} !important;
      }


      ${card.querySelector('.bubble-sub-button-1
      .bubble-sub-button-name-container').innerText =
      hass.states['sensor.p1s_1_ams_tray_1'].attributes.remain + '%'}

      ${card.querySelector('.bubble-sub-button-2
      .bubble-sub-button-name-container').innerText =
      hass.states['sensor.p1s_1_ams_tray_2'].attributes.remain + '%'}

      ${card.querySelector('.bubble-sub-button-3
      .bubble-sub-button-name-container').innerText =
      hass.states['sensor.p1s_1_ams_tray_3'].attributes.remain + '%'}

      ${card.querySelector('.bubble-sub-button-4
      .bubble-sub-button-name-container').innerText =
      hass.states['sensor.p1s_1_ams_tray_4'].attributes.remain + '%'}


      ${card.querySelector('.bubble-name-container .bubble-state').innerText =
      `${hass.states[entity].state}% •
      ${Math.floor(hass.states['sensor.p1s_1_remaining_time'].state / 60)} hr
      ${hass.states['sensor.p1s_1_remaining_time'].state % 60} min`}
  - show_state: false
    show_name: false
    camera_view: live
    type: picture-entity
    name: 1 - Fred
    camera_image: camera.p1s_1_camera
    entity: camera.p1s_1_camera
column_span: 1