Consolidated Room Card for Lovelace

room_card.yaml

#################################################################
#                                                               #
#               YAML Anchors for Room Cards                     #
#                                                               #
#################################################################
---

# The following custom cards must be installed in HACS:
#  - text-element
#  - stack-in-card (or vertical-stack-in-card)
#  - mod-card

card-title: &card-title
  type: 'custom:text-element'
  style:
    top: 0%
    transform: "initial"
    white-space: nowrap
    overflow: hidden
    text-overflow: ellipsis
    color: var(--ha-card-header-color, --primary-text-color)
    font-family: var(--ha-card-header-font-family, inherit)
    font-size: var(--ha-card-header-font-size, 24px)
    letter-spacing: -0.012em
    line-height: 48px
    padding: 12px 16px 16px
    display: block
    margin-block: 0px
    font-weight: normal
sensor-style: &sensor-style
  transform: initial
  top: 0%
  right: 0%
  padding-top: 16px
  padding-bottom: 16px
glance-style: &glance-style
# Use this style to shrink down a glance card
  style: |
    .entities.no-header {
      padding-top: 0px;
      margin-top: -8px;
    }
    .entity {
      margin-bottom: 0 !important;
    }
glance-entity-row-style: &glance-entity-row-style
  style: |
    state-badge {
      margin: 0;
    }
entities-style-first: &entities-style-first
# Use this style if entities is first card below header
  style: |
    .card-content {
      padding-top: 0px;
      margin-top: -8px;
    }
entities-style: &entities-style
# Use this style if entities is NOT first card below header
  style: |
    .card-content {
      padding-top: 8px;
    }
sensor-1: &sensor-1
  type: state-icon
  style:
    <<: *sensor-style
    right: "calc(40px * 5)"
sensor-2: &sensor-2
  type: state-icon
  style:
    <<: *sensor-style
    right: "calc(40px * 4)"
sensor-3: &sensor-3
  type: state-icon
  style:
    <<: *sensor-style
    right: "calc(40px * 3)"
sensor-4: &sensor-4
  type: state-icon
  style:
    <<: *sensor-style
    right: "calc(40px * 2)"
sensor-5: &sensor-5
  type: state-label
  style:
    <<: *sensor-style
    padding-right: 8px


#################################################################
#                                                               #
#               Lovelace Room Overview Cards                    #
#                                                               #
#################################################################

type: 'custom:stack-in-card'
cards:
  - type: picture-elements
    image: /local/images/492x76.png
    elements:
      - <<: *card-title
        text: Family Room
      - <<: *sensor-1
        entity: binary_sensor.front_door
        title: Front Door
      - <<: *sensor-2
        entity: binary_sensor.back_door
        title: Back Door
      - <<: *sensor-3
        entity: binary_sensor.patio_door
        title: Patio Door
      - <<: *sensor-4
        entity: sensor.bed_sensor_temperature
        title: Bedroom Door
      - <<: *sensor-5
        entity: sensor.bed_sensor_temperature
        title: Room Temperature
  - type: glance
    <<: *glance-style
    entities:
      - entity: light.office_lamps
        <<: *glance-entity-row-style
      - entity: sensor.aqualink_battery_level
        <<: *glance-entity-row-style
      - entity: sensor.aqualink_run_mode
        <<: *glance-entity-row-style
    state_color: true
    show_name: false
  - type: entities
    <<: *entities-style
    entities:
      - sensor.bed_sensor_temperature
      - sensor.bed_sensor_temperature

sc-dashboard.yaml

#################################################################
#                                                               #
#                     Primary Dashboard                         #
#                                                               #
#################################################################

# This should be included in a Lovelace config file like:
# ---
# title: My YAML Config
# views:
#   - !include views/sc-dashboard.yaml

---
icon: 'mdi:view-dashboard'
path: sc-dashboard
title: SC Dashboard
badges: []
cards:
  - !include ../cards/room_card.yaml
  - type: glance
    title: Family Room (Lovelace Default)
    entities:
      - entity: light.office_lamps
      - entity: sensor.aqualink_battery_level
      - entity: sensor.aqualink_run_mode
    state_color: true
    show_name: false
  - type: entities
    entities:
      - sensor.bed_sensor_temperature
      - sensor.bed_sensor_temperature