HA | Office Control Panel Element

type: custom:button-card
name: Ceiling
entity: light.office_desk_lamp
icon: mdi:monitor-speaker
show_icon: true
tap_action:
  action: none
aspect_ratio: 1/1
styles:
  card:
    - background-color: '#2e3a51'
    - border-radius: 20px
    - padding: 8px
    - box-shadow: >-
        rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px
        60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  name:
    - font-weight: bold
    - font-size: 28px
    - align-self: middle
    - justify-self: start
    - padding-left: 9px
    - padding-bottom: 1px
    - letter-spacing: '-1.0px'
  icon:
    - padding: 22px
    - width: 70px
    - height: 70px
    - color: white
    - border-radius: 55px
    - background-color: '#4B5975'
    - opacity: 0
  img_cell:
    - justify-content: start
    - align-self: middle
    - margin: none
  grid:
    - grid-template-areas: '"n i1" "i i2" "i i3"'
    - grid-template-columns: 72% 28%
    - grid-template-rows: 1fr 1fr 1fr
  custom_fields:
    sub:
      - position: absolute
      - left: 9%
      - top: 23%
    logo:
      - position: absolute
      - left: '-12%'
      - top: 33%
custom_fields:
  sub:
    card:
      type: custom:button-card
      name: false
      styles:
        card:
          - background-color: transparent
          - border-style: none
        name:
          - justify-self: left
          - font-size: 12px
          - font-weight: 400
          - font-color: transparent
  logo:
    card:
      type: custom:button-card
      color: transparent
      show_name: false
      name: false
      entity_picture: >-
        https://abc,,,.ui.nabu.casa/local/officeceiling.png
      show_entity_picture: true
      styles:
        card:
          - background-color: transparent
          - border-style: none
        icon:
          - width: 110px
          - height: 110px
          - color: white
          - padding: 28px
          - align-self: start
          - text-align: start
          - background-color: '#4B5975'
          - border-radius: 95px
  i1:
    card:
      type: custom:button-card
      color: transparent
      show_name: false
      name: Power
      icon: mdi:power
      tap_action:
        action: call-service
        service: light.toggle
        data: {}
        target:
          entity_id:
            - light.office_ceiling
      styles:
        card:
          - background-color: '#4B5975'
          - border-radius: 55px
          - border-style: none
          - box-shadow: >-
              rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px
              -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset
        icon:
          - width: 30px
          - height: 30px
          - color: white
          - align-self: start
          - text-align: start
          - padding: 12px
        img_cell:
          - justify-content: middle
          - align-self: middle
          - margin: none
  i2:
    card:
      type: custom:button-card
      color: transparent
      show_name: false
      name: Power
      icon: mdi:lightbulb-on
      tap_action:
        action: call-service
        service: light.turn_on
        data:
          brightness_pct: 100
        target:
          entity_id:
            - light.office_ceiling
      styles:
        card:
          - background-color: '#4B5975'
          - border-radius: 55px
          - border-style: none
          - box-shadow: >-
              rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px
              -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset
        icon:
          - width: 28px
          - height: 28px
          - color: white
          - align-self: start
          - text-align: start
          - padding: 13px
        img_cell:
          - justify-content: middle
          - align-self: middle
          - margin: none
  i3:
    card:
      type: custom:button-card
      color: transparent
      show_name: false
      name: Power
      icon: mdi:lightbulb-on-40
      tap_action:
        action: call-service
        service: light.turn_on
        data:
          brightness_pct: 10
        target:
          entity_id:
            - light.office_ceiling
      styles:
        card:
          - background-color: '#4B5975'
          - border-radius: 55px
          - border-style: none
          - box-shadow: >-
              rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px
              -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset
        icon:
          - width: 28px
          - height: 28px
          - color: white
          - align-self: start
          - text-align: start
          - padding: 13px
        img_cell:
          - justify-content: middle
          - align-self: middle
          - margin: none