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_componentbutton-card made by RomRaider. The design system consists of graphical buttons, that are changed depending on their use.
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…
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
Dot: Visible when the device is unavailable. Also used on the entity person
Icon: Icon that represents the device
Primary line: Main information
Secondary line: Secondary information
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.
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.
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.
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
This `chip` is to display a weather icon together with the outside and inside temperature.
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:
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)
navigation_path: /ui-lovelace/home # the path to navigate to