Room Card Minimalist is based on patrickfnielsen/hass-room-card but extensively redesigned with added functionality in the style of the room-card from UI Lovelace Minimalist which I've used in the past and missed ever since for "normal" Lovelace setups.

It provides a fixed size card with a room name, styled icon, and optional secondary info. You can configure up to 4 entities or templates to be displayed as buttons with icons that change based on the entity/template state.

Room Card is available in HACS (Home Assistant Community Store):

or search for "room-card-minimalist" in HACS.

1. Download room-card-minimalist.js file from the latest release.
2. Put room-card-minimalist.js file into your config/www folder.
3. Add reference to room-card-minimalist.js in your Dashboard. There's two ways to do that:
   • Using UI: Settings → Dashboards → More Options icon → Resources → Add Resource → Set Url as /local/room-card-minimalist.js → Set Resource type as JavaScript Module. Note: If you do not see the Resources menu, you will need to enable Advanced Mode in your User Profile
   • Using YAML: Add following code to lovelace section.

     resources:
       - url: /local/room-card-minimalist.js
         type: module

The editor is supported, but if you want to use yaml, here are the properties:

The card supports different background types behind the room icon:

Example configurations:

# Color background (default)
background_type: color
background_circle_color: "#FF5722"  # or leave empty for template color

# Image background
background_type: image
background_image: "/local/images/bedroom.jpg"

# Person profile picture
background_type: person
background_person: person.john
background_image_square: true # OPTIONAL: square image instead of circle

# No background
background_type: none

You can enable HTML in the secondary info text to apply custom styling like font-size, colors, bold text, etc.

⚠️ Security Warning: Only enable secondary_allow_html if you trust the source of your templates. HTML content is rendered without sanitization when enabled.

Basic example:

type: custom:room-card-minimalist
name: Living Room
icon: mdi:sofa
secondary: '<span style="font-size: 16px; font-weight: bold; color: #FF5722;">22.5°C</span>'
secondary_allow_html: true

Template example with conditional styling:

secondary_allow_html: true
secondary: >
  {% set temp = states('sensor.living_room_temperature') | float %}
  {% if temp > 25 %}
    <span style="color: #F54436; font-size: 14px; font-weight: bold;">🔥 {{ temp }}°C</span>
  {% elif temp < 18 %}
    <span style="color: #03A9F4; font-size: 14px;">❄️ {{ temp }}°C</span>
  {% else %}
    <span style="font-size: 12px;">{{ temp }}°C</span>
  {% endif %}

Multiple lines example:

secondary_allow_html: true
secondary: >
  <div style="line-height: 1.4;">
    <span style="font-size: 14px; font-weight: bold;">{{ states('sensor.bedroom_temperature') }}°C</span><br>
    <span style="font-size: 11px; opacity: 0.8;">{{ states('sensor.bedroom_humidity') }}% humidity</span>
  </div>

You can make the secondary info text clickable to perform actions like opening the history dialog or navigating to a dashboard.

Example - Show history dialog for temperature sensor:

type: custom:room-card-minimalist
name: Living Room
icon: mdi:sofa
secondary: '{{states("sensor.living_room_temperature")}} °C'
secondary_entity: sensor.living_room_temperature
secondary_tap_action:
  action: more-info

Example - Navigate to climate dashboard:

type: custom:room-card-minimalist
name: Living Room
icon: mdi:sofa
secondary: '{{states("sensor.living_room_temperature")}} °C'
secondary_tap_action:
  action: navigate
  navigation_path: /lovelace/climate
secondary_hold_action:
  action: more-info
  entity: sensor.living_room_temperature

Note: When secondary actions are configured, the secondary text will show a pointer cursor on hover and become clickable.

For climate entities (entities starting with climate.), the card automatically detects the available HVAC modes and provides mode-specific configuration options instead of the generic on_state, color_on/off, template_on/off, and background_color_on/off fields.

Available HVAC modes: off, heat, cool, heat_cool, auto, dry, fan_only

Note: The actual available modes depend on your specific climate entity. The card will automatically show configuration options only for the modes your climate entity supports.

The following color templates are available for card_template, template_on, and template_off:

Template Name	Color	Description
blue	Blue	Default blue color scheme #3D5AFE
lightblue	Light Blue	Light blue color scheme #03A9F4
red	Red	Red color scheme #F54436
green	Green	Green color scheme #01C852
lightgreen	Light Green	Light green color scheme #8BC34A
yellow	Yellow	Yellow/amber color scheme #FF9101
purple	Purple	Purple color scheme #661FFF
orange	Orange	Orange color scheme #FF5722
pink	Pink	Pink color scheme #E91E63
grey	Grey	Grey/neutral color scheme #9E9E9E
teal	Teal	Teal color scheme #009688
indigo	Indigo	Indigo color scheme #3F51B5

These templates use CSS variables that can be customized in your Home Assistant theme. If UI Lovelace Minimalist or another theme is installed which provides the --color-* variables, the templates will use these colors. Otherwise, fallback colors are provided (see src/room-card-minimalist.js => const COLOR_TEMPLATES for details).

type: custom:room-card-minimalist
name: Living Room
icon: mdi:sofa
card_template: blue
background_type: image
background_image: '/local/images/living-room.jpg'
use_template_color_for_title: true
use_template_color_for_secondary: true
entities_reverse_order: false
secondary: '{{states("sensor.living_room_temperature")}} °C'
# Optional: Make secondary text clickable to show history
secondary_entity: sensor.living_room_temperature
secondary_tap_action:
  action: more-info
# Optional: Enable HTML in secondary for custom styling
# secondary_allow_html: true
# secondary: '<span style="font-size: 14px; font-weight: bold;">{{states("sensor.living_room_temperature")}} °C</span>'
tap_action:
  action: navigate
  navigation_path: /lovelace/living-room
hold_action:
  action: more-info
entities:
  - type: entity
    entity: light.living_room_ceiling
    icon: mdi:ceiling-light
    icon_off: mdi:ceiling-light-outline
    on_state: 'on'
    use_light_color: true
    color_off: grey
    tap_action:
      action: toggle
    hold_action:
      action: more-info
  - type: template
    icon: mdi:lightbulb-group
    icon_off: mdi:lightbulb-group-outline
    condition: >-
      {% set lights_on = expand(area_entities('Living Room')) |
      selectattr('domain','eq','light') | selectattr('state','eq','on') | list |
      count %}{% if lights_on > 0 %}{{ lights_on }} lights on{% endif %}
    color_on: yellow
  - type: entity
    entity: binary_sensor.living_room_motion
    on_state: 'on'
    icon: mdi:motion-sensor
    icon_off: mdi:motion-sensor-off
    color_on: green
  - type: entity
    entity: climate.living_room
    icon: mdi:thermostat
    icon_off: mdi:thermostat-off
    # Climate entities use mode-specific configuration:
    color_off: grey
    template_off: grey
    template_heat: red
    template_cool: lightblue
    template_auto: green

Note: Due to the fixed size of this card, it won't align perfectly with Home Assistant's automatic grid sizes in some layouts, which can result in padding/spacing below the cards.

Workaround: To achieve better layout control and eliminate unwanted spacing:

• Use horizontal-stack when you want multiple cards side by side
• Use vertical-stack when you want multiple cards stacked vertically

Room Card Minimalist works without a theme installed however, I personally use the awesome Material Design 3 Theme from Nerwyn in combination with Material You Utilities.

Room Card Minimalist supports multiple languages and automatically adapts to your Home Assistant language setting.

• 🇺🇸 English
• 🇩🇪 German

More languages can be easily added by contributing JSON translation files. For detailed instructions, see our Internationalization Guide.

For local development make sure to have at least Node 22 installed (earlier version might work but untested).

1. Install Packages:

   npm install

2. Enable live build:

   npm run watch

   This will create a webpack dev server on localhost:8080 which will serve the live built room-card-minimalist.js file.

3. Start the local Home Assistant dev instance:

   npm run docker:start

   This will start a local Home Assistant instance in a Docker container on localhost:8123.

4. Add the card to your Lovelace dashboard:

   • Go to Settings → Dashboards → Resources → Add Resource
   • URL:

   http://localhost:8080/room-card-minimalist.js

   • Type: JavaScript Module

   You can then use the card as described above.

5. Stop the Home Assistant dev instance:

   npm run docker:stop