Link Search Menu Expand Document


Using this “theme” is not difficult, but you need to know a few basics, so your design can make its best impression. It is depending on two things, namely using a theme and make extensive use of the template function from the custom_component button-card made by RomRaider. The design system consists of graphical buttons, that are changed depending on their use.

Table of content


At the top of each page we find the chips, which allow to quickly visualize important information.



Titles are used to separate the different sections. Kind of a divider…


Vertical buttons

For using the cards as a button.



Cards are the main part of this design and are widely used in very different designs and functions. With these cards you can set up nearly every entity in HA, showing from “state-only” over a “full blown” information graphic with various values to “controlling” your covers and climate entities.


Anatomy of cards


  1. Dot: Visible when the device is unavailable. Also used on the entity person
  2. Icon: Icon that represents the device
  3. Primary line: Main information
  4. Secondary line: Secondary information
  5. Optional part: Possibility to display buttons to launch actions related to the device. Or display a graph to view the history of a sensor or you let your fantasy take the ride…

In the list above #5 enhances the normal cards with a “second line”, that is used to display other information like a graph or the controls for your covers. For this readme the cards are divided into three groups:

  • 1-line cards: These are cards for sensor or binary_sensors like light or power outlets.
  • 2-line cards: These are cards with a second line for informations or controls, eg. your cover controls.
  • Custom cards: These are special cards, that you can install, only if needed. These cards are mostly developed and contributed to the repository. Eg. an aircondition-card that shows the state of your aircondition and buttons to control it.

Changing templates

There are cases, actually a lot of them, where you want to change or extend existing template code. Doing this inside the code from the repository isn’t a good idea, as the next update would overwrite your changes.
But don’t worry, we have taken care of that and you can very easily extend our code with your own.

Take a look at this page: Changing a template

List of templates to use in “view”-files

The following list is just an overview, you can find the extended list with example code, picture and description here.

Battery Card

card_battery The `battery-card` is a slightly enhanced `generic-card`, just to ease the use. You could always configure it from the `generic-card` yourself.

Binary Sensor Card

card_binary_sensor The `binary-sensor-card` is to show the state (on/off, open/close, etc.) of a binary sensor, eg. your garage door or a window contact sensor.

Binary Sensor Card (alert)

card_binary_sensor_alert The `binary-sensor-card` is to show the state (on/off, open/close, etc.) of a binary sensor, eg. your garage door or a window contact sensor. This card shows an alert if the state is on/open or unavailable.

Cover Card with buttons

card_cover_with_buttons With the `cover-card` you have the state of your cover and on the second line UP / PAUSE / DOWN to control it.

Generic Card

card_generic This is the `generic-card` to display values from a sensor, eg. to show humidity, your next waste collection date or whatever sensor value is provided.

Generic Card Swapped

card_generic_swap This is a `generic-card` with swapped label and name.

Graph Card

card_graph The `card_graph` shows an entity with the actual state and a *min-graph-card* integrated. This can be used for a thermostat to show the actual temperature and the history."

Input Boolean Card

card_input_boolean The `input-boolean-card` is to switch an `input_boolean` on or off.

Light Card

card_light This is the `light-card`, used to toggle a light or a light group. Shows state of the light and, if available, brightness in %. In the picture on the right in row Nr1

Light Slider Card

card_light_slider The `light-slider-card` controls a light with the added possibilty to control the brightness of your light with a slider. See row Nr2 in the picture on the right.

Light Slider Card (collapse)

card_light_slider_collapse The `light-slider-card (collapse)` is an enhanced version of the `light-slider-card`, that only shows the slider, if the light is on. In the picture on the right, the 'off'-state is like row Nr1, the 'on'-state like row Nr2

Light Slider Card (horizontal)

card_light_slider_horizontal The `light-slider-card (horizontal)` is an enhanced version of the `light-slider-card`, that shows the slider on the right of the button, making it a 1-line-card. See the picture on the right row Nr3

Media Player Card

card_media_player The `card_media_player` shows you the *app*, the *title* and the *album name* playing, if the data is available through HA. The *app* is shown via a different icon.

Media Player Card (with control)

card_media_player_with_control This is the second `media-player-card`, in contrast to the first one above, it shows the cover art from your media player.

Media Player Card (with controls)

card_media_player_with_controls With the `card_media_player_with_controls` you have the state of your media_player and on the second line PREVIOUS / PLAY-PAUSE / NEXT to control it

Navigate Card

card_navigate The `card_navigate` is for navigating inside your HA dashboard(s).

Person Card

card_person The `card_person` shows if a person is `home` or `not_home`. If you have setup other zones, it will show these as well.

Power Outlet Card

card_power_outlet This is the `power-outlet-card`. It shows you the state of a power outlet, and if configured, the actual power consumption of the power outlet.

Script Card

card_script This card starts/runs a script. You can configure icon and text.


card_title Titles (and optionally subtitles) are used to seperate different areas in your design. You can use only a title, only a subtitle or both at once.

Chip Back Button

chip_back This is a `back-button`, primarly used if you switch between views and want a convenient way back.

Chip Icon With Double State


Chip Icon Only

chip_icon_only This `chip` displays just an icon.

Chip Icon With State

chip_icon_state This `chip` displays an icon and a label, where the label can be any state of a sensor you configure.

Chip Power Consumption

chip_power_consumption This `chip` shows you the electric consumption from a sensor. Configurable to show power (kWh) or price (currency).

Chip Presence Detection (counter)

chip_presence_detection This `chip` shows you the actual presence in your home. Shows residents and guests (guests only if one or more).

Chip Temperature

chip_temperature This `chip` is to display a weather icon together with the outside and inside temperature.

Tap actions

One of the great features of button-card is, that you can set an action. These actions can be set on every card you configure, despite the cards that already have buttons. You have three possibilities to choose from:

  • tap_action
  • hold_action
  • double_tap_action

Each of these “events” can be configured to use a specific action. These actions are:

  action: more-info # to show the more-info popup  
  entity: your_entity # show more-info popup for this entity
  action: toggle # toggles the entity of the card
  action: call-service # to call a service from HA  
  service: service.service_arg  # the service
  service_data: # additional data, eg. an entity_id
  action: none # explicitly set to do nothing
navigate (HA internal)
  action: navigate  
  navigation_path: /ui-lovelace/home # the path to navigate to
url (only external)
  action: url  

Color scheme

Type Color Hex RGB
💡 Light
⚡ Electricity
#FF9101 rgb(255,145,1)
🔥 Heating #F54436 rgb(245,6,54)
☑️ On/off devices
🏠 Home
#3D5AFE rgb(61,90,254)
🌲 Exterior #01C852 rgb(1,200,82)


For the chips, this “theme” uses the standard unicode emojis. The main reason is, they are multi-color whereas the mdi-icons that HomeAssistant uses are one color only.

These emojis are only used on the chips, all other cards or buttons use the standard mdi-icons!

Overview over standard unicode emojis:

Overview Home Assistant mdi-icons:

Using emojis is easy:

  • Go to one of the Github pages above
  • Select the emoji you want and copy it (“CTRL + C” or right-click “copy” / at you already find a “copy” button)
  • Go to your view and paste the icon

There are a lot of emojis on these pages, so we suggest you use the built-in search at emojipedia or the browser integrated search by pressing “CTRL + F” and type in your query like “heart”.

Table of contents

© by UI-Lovelace-Minimalist 2021

Documentation for ULM version 1.0.0-beta.6