Adding a New Card to a Home Assistant Dashboard

Now that my Home Assistant devices are set up and working reasonably well, my focus has moved to building out a dashboard that has the elements that I want to see rather than everything that is shown on the Overview tab.

This post takes you through the steps to create a new dashboard and populate it with two different types of cards.

Create a New Dashboard

If you try to edit the existing default dashboard you will be presented with the following message – basically you cannot mess with the default dashboard and so you have to create your own.

To do so go to Settings > Dashboards and click the blue Add Dashboard button in the bottom right hand corner. Next you will be presented with some options on the format for your dashboard. Embedding a complete webpage is an interesting way of displaying information but not what we want here. Select New dashboard from scratch.

Now you’ll be asked to give your new dashboard a name and an optional icon to associate with it. Choose whether you want it to be available to admins only and whether it should appear on the sidebar and click Create.

A Blank Canvas

When you open your new Dashboard you will be presented with a completely blank canvas. Click the pencil edit icon in the top right hand corner and you will be presented with a screen similar to the one below and now you can have fun customising it to your needs.

The video below gives a very brief example of how to create a new section on your dashboard and then add a card to it, in this case a button to turn on a plug.

A Simple Example Card

In addition to cards that interact with your lights, switches and plugs you can also create cards that display information. Here’s a simple example to get started which uses no external references at all and is just vanilla Home Assistant. We are going to be adding a card that displays the date and time and a greeting that changes depending on the time of day. When complete the card will look like this:

Add a Manual Card

Go back to your dashboard and edit it. Click the plus button to add another card to your existing section. In the search bar type “manual” (without the quotes) which should bring up just one entry as shown below:

Click the Manual card bar to open up the configuration page. Paste the YAML shown below this image into the box on the left-hand side, making sure you overwrite anything already in the box. If it has worked, you should see a preview of the card on the right-hand side. If you get an error, it is most likely to be due to the formatting of the YAML. Make sure that everything in the content section is indented by two spaces. It should look like shown below:

This is the YAML you will need:

type: markdown
title: ⏰ Universal Clock
content: |
  **Date:** {{ now().strftime('%Y-%m-%d') }}
  **Time:** {{ now().strftime('%H:%M') }}

  {% if now().hour < 12 %}
  ☀️ Good morning!
  {% elif now().hour < 18 %} 
  🌤️ Good afternoon!
  {% else %}
  🌙 Good evening!
  {% endif %}

You have now created your first dashboard and a card that displays information. In a future post I will show how you can use this manual card to display information from external sources.