Room Card

type: custom:button-card
name: Living Room
icon: mdi:sofa-outline
grid_options:
  columns: 6
entity: sensor.thermostat_temperature
show_state: true
state_display: |
  [[[
    const temperature = states['sensor.thermostat_temperature'] ? states['sensor.thermostat_temperature'].state : null;
    return temperature ? (parseFloat(temperature).toFixed(1) + "°C") : 'N/A';
  ]]]
custom_fields:
  actions_container:
    card:
      type: horizontal-stack
      cards:
        - type: custom:mushroom-chips-card
          chips:
            - type: entity
              entity: media_player.sonos_move
              content_info: none
              tap_action:
                action: navigate
                navigation_path: "#music"
        - type: custom:mushroom-chips-card
          chips:
            - type: light
              entity: light.luz_living_room
              tap_action:
                action: toggle
              content_info: none
              use_light_color: false
            - type: template
              entity: climate.living_room
              icon_color: >-
                {{ '#F97316' if is_state_attr('climate.living_room', 'hvac_action',
                'heating') }}
              icon: >-
                {{ 'mdi:radiator' if is_state_attr('climate.living_room',
                'hvac_action', 'heating') else 'mdi:radiator-disabled' }}
              content_info: none
              tap_action:
                action: more-info
            - type: entity
              entity: cover.persianas_living_room
              content_info: none
styles:
  grid:
    - grid-template-areas: "\"n actions_container\" \"s actions_container\" \"i actions_container\""
    - grid-template-columns: 1fr min-content
    - grid-template-rows: min-content min-content 1fr
  card:
    - padding: 10px
    - background: var(--card-background-color)
  custom_fields:
    actions_container:
      - background: var(--primary-background-color)
      - border-radius: 14px
      - padding: 5px
  name:
    - justify-self: start
    - font-size: 19px
    - font-weight: 600
    - color: var(--primary-color)
  state:
    - justify-self: start
    - font-size: 12px
    - font-weight: 500
    - color: rgba(96,114,116,0.7)
  img_cell:
    - position: absolute
    - width: 100px
    - height: 100px
    - left: "-20px"
    - bottom: "-20px"
    - border-radius: 100%
    - background: "#FCD34D"
  icon:
    - width: 55px
    - opacity: "0.8"
    - color: "#92400E"