Home Assistant Lovelace mobile dashboard example

I hate to dig into thousands of lines of someone’s YAML code and think I’m not the only one. That’s why I decided to tear down my Lovelace dashboard here for everyone who wants to reuse its components or get some inspiration for their dashboards.

My Lovelace dashboard for mobile devices is a result of a year of searching, editing and improving. The main card that made it look so nice is a grate Button Card by RomRider - a really powerful tool to make whatever you want for your entities.

dashboard

Theme

That was a Clear Theme from naofireblade at the beginning. But then I noticed that the last commit to Clear Theme was made more than a year ago and I also wanted to change active entity colour so now I’m maintaining and using a fork of Clear Theme.

Room state

Room state

Room state

Made using Custom Button Card templates. It contains room name, a text representation of window/door state, movement indicator, temperature and air humidity data. You can get a template and usage example in my custom button card templates collection.

Entity buttons

buttons

This is the main button on my dashboard. It is flexible and responsive and can display various icons in the corners. Everything can be configured through variables of custom button card. You can get a template and usage example in my custom button card templates collection.

Light buttons

lights

This card is almost the same as the entity button, but with some changes. You can get a template and usage example in my custom button card templates collection.

Climate entities

Heater Humidifier

The way to display my heaters and humidifiers. It is also a Custom Button Card with some additional styles and JavaScript templates. You can find it in the collection.

Operation mode switch

Humidifier

I have an input_select to control my home operating mode. It has five possible states: day, evening, night, away and guest. Every mode button is a Custom Button Card. The central one has additional vertical border styles. See layout for the information of how it is grouped in the single card, and template collection for template.

Layout

I’m using Horizontal Stack Card to group button cards in a row without background like here:

buttons

But to group several button cards in one card with a custom background I’m using a more complex solution

buttons

This is a combination of Horizontal Stack Card, Stack In Card and card-mode.

Please remove comments if you can’t save this card in the Home Assistant UI editor.

type: custom:stack-in-card
keep:
  margin: true # To keep cards margin inside a stack-in-card
card_mod: # card-mode styles. Adds a semi-transparent background and a bottom padding
  style:
    .: |
      ha-card {
        background: #ffffff77;
        padding-bottom: 16px;
      }
cards:
  - # Room state card
  - type: horizontal-stack
    cards:
      - # Light entity card
      - # Light entity card
      - # Light entity card
  - # Climate entity card

Updated:

Comments