List of templates to use in your “view”-file

This is the in-depth list of our “usage” templates.

Note: Depending on the card you use, there are different things to set. Sometimes the entity is needed, sometimes the entity needs to be set as a variable, eg. ulm_card_xy_entity. In the template list is explained what you have to set.

Legend: variable | entry (eg. entity)

Battery Card

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

"View" code

You're working in yaml-mode (Remember to take care of indentation)

- type: 'custom:button-card'
  template: card_battery
  variables:
    ulm_card_battery_attribute: battery_attribute
  entity: sensor.livingoom_thermometer_battery

You're working in UI-mode

type: 'custom:button-card'
template: card_battery
variables:
  ulm_card_battery_attribute: battery_attribute
entity: sensor.livingoom_thermometer_battery

Variables / Entries

Variable / Entry	Example	Required
entity	sensor.livingroom_thermometer_battery	true
This is your battery entity

ulm_card_battery_attribute	battery_attribute	false
If your entity provides the battery percent in an attribute (= not as an own sensor), fill in the attributes name here. Eg. if you have `sensor.livingroom_thermometer` and the attribute for your battery power is `sensor.livingroom_thermometer.attributes.battery_percent`, you fill in battery_percent here.

Binary Sensor Card

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.

"View" code

You're working in yaml-mode (Remember to take care of indentation)

- type: 'custom:button-card'
  template: card_binary_sensor
  variables:
    - ulm_card_binary_sensor_alert: true
  entity: binary_sensor.garage_door
  show_last_changed: true

You're working in UI-mode

type: 'custom:button-card'
template: card_binary_sensor
  variables:
    - ulm_card_binary_sensor_alert: true
entity: binary_sensor.garage_door
show_last_changed: true

Variables / Entries

Variable / Entry	Example	Required
entity	binary_sensor.garage_door	true
The binary_sensor to show

show_last_changed	true or false	false

Binary Sensor Card (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.

"View" code

You're working in yaml-mode (Remember to take care of indentation)

- type: 'custom:button-card'
  template: card_binary_sensor_alert
  variables:
    - ulm_card_binary_sensor_alert: true
  entity: binary_sensor.garage_door
  show_last_changed: true

You're working in UI-mode

type: 'custom:button-card'
template: card_binary_sensor_alert
  variables:
    - ulm_card_binary_sensor_alert: true
entity: binary_sensor.garage_door
show_last_changed: true

Variables / Entries

Variable / Entry	Example	Required
entity	binary_sensor.garage_door	true
The binary_sensor to show

show_last_changed		false

Cover Card with buttons

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

"View" code

You're working in yaml-mode (Remember to take care of indentation)

- type: 'custom:button-card'
  template: 
    - card_cover_with_buttons
  variables:
    ulm_card_cover_with_buttons_name: "Cover Livingroom Window"
    ulm_card_cover_with_buttons_entity: "cover.livingroom_window"

You're working in UI-mode

type: 'custom:button-card'
template: 
  - card_cover_with_buttons
variables:
  ulm_card_cover_with_buttons_name: "Cover Livingroom Window"
  ulm_card_cover_with_buttons_entity: "cover.livingroom_window"

Variables / Entries

Variable / Entry	Example	Required
ulm_card_cover_with_buttons_entity	cover.livingroom_window	true
The entity_id of your cover

ulm_card_cover_with_buttons_name	Cover Livingroom Window	false
The name of your cover entity

Generic Card

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.

"View" code

You're working in yaml-mode (Remember to take care of indentation)

- type: 'custom:button-card'
  template: card_generic
  entity: sensor.next_waste_collection

You're working in UI-mode

type: 'custom:button-card'
template: card_generic
entity: sensor.next_waste_collection

Variables / Entries

Variable / Entry	Example	Required
entity	sensor.next_waste_collection	true

Generic Card Swapped

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

"View" code

You're working in yaml-mode (Remember to take care of indentation)

- type: 'custom:button-card'
  template: card_generic_swap
  entity: sensor.next_waste_collection

You're working in UI-mode

type: 'custom:button-card'
template: card_generic_swap
entity: sensor.next_waste_collection

Variables / Entries

Variable / Entry	Example	Required
entity	sensor.next_waste_collection	true

Graph Card

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."

"View" code

You're working in yaml-mode (Remember to take care of indentation)

- type: 'custom:button-card'
  template: card_graph
  variables:
    ulm_card_graph_color: "var(--google-blue)"
    ulm_card_graph_name: Temperature Livingroom
    ulm_card_graph_entity: sensor.livingroom_temperature

You're working in UI-mode

type: 'custom:button-card'
template: card_graph
variables:
  ulm_card_graph_color: "var(--google-blue)"
  ulm_card_graph_name: Temperature Livingroom
  ulm_card_graph_entity: sensor.livingroom_temperature

Variables / Entries

Variable / Entry	Example	Required
ulm_card_graph_color	var(--google-blue)	false
This is to adjust your color value. Use a CSS varible from HA or set a color value (eg. #FFFFFF)

ulm_card_graph_name	Temperature Livingroom	false
The name of your sensor

ulm_card_graph_entity	sensor.livingroom_temperature	true
Your entity_id for the temperature sensor

Input Boolean Card

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

"View" code

You're working in yaml-mode (Remember to take care of indentation)

- type: 'custom:button-card'
  template: card_input_boolean
  entity: input_boolean.guest_mode

You're working in UI-mode

type: 'custom:button-card'
template: card_input_boolean
entity: input_boolean.guest_mode

Variables / Entries

Variable / Entry	Example	Required
entity	input_boolean.guest_mode	true
The input_boolean to switch

Light Card

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

"View" code

You're working in yaml-mode (Remember to take care of indentation)

- type: 'custom:button-card'
  template: card_light
  entity: light.my_livingroom_light

You're working in UI-mode

type: 'custom:button-card'
template: card_light
entity: light.my_livingroom_light

Variables / Entries

Variable / Entry	Example	Required
entity	light.my_livingroom_light	true

Light Slider Card

by schumijo

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.

"View" code

You're working in yaml-mode (Remember to take care of indentation)

- type: 'custom:button-card'
  template: card_light_slider
  variables:
    ulm_card_light_slider_name: Livingroom Light
  entity: light.my_livingroom_light

You're working in UI-mode

type: 'custom:button-card'
template: card_light_slider
variables:
  ulm_card_light_slider_name: Livingroom Light
entity: light.my_livingroom_light

Variables / Entries

Variable / Entry	Example	Required
entity	light.my_livingroom_light	true


ulm_card_light_slider_name	Livingroom Light	false
If you want to set a specific name, eg. because your friendly name is too long for the card, this is the place to fill it in. If this is not set, the friendly name will be used.

Light Slider Card (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

"View" code

You're working in yaml-mode (Remember to take care of indentation)

- type: 'custom:button-card'
  template: card_light_slider_collapse
  variables:
    ulm_card_light_slider_collapse_name: Livingroom Light
  entity: light.my_livingroom_light

You're working in UI-mode

type: 'custom:button-card'
template: card_light_slider_collapse
variables:
  ulm_card_light_slider_collapse_name: Livingroom Light
entity: light.my_livingroom_light

Variables / Entries

Variable / Entry	Example	Required
entity	light.my_livingroom_light	true


ulm_card_light_slider_collapse_name	Livingroom Light	false
If you want to set a specific name, eg. because your friendly name is too long for the card, this is the place to fill it in. If this is not set, the friendly name will be used.

Light Slider Card (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

"View" code

You're working in yaml-mode (Remember to take care of indentation)

- type: 'custom:button-card'
  template: card_light_slider_horizontal
  variables:
    ulm_card_light_slider_horizontal_name: Livingroom Light
  entity: light.my_livingroom_light

You're working in UI-mode

type: 'custom:button-card'
template: card_light_slider_horizontal
variables:
  ulm_card_light_slider_horizontal_name: Livingroom Light
entity: light.my_livingroom_light

Variables / Entries

Variable / Entry	Example	Required
entity	light.my_livingroom_light	true


ulm_card_light_slider_horizontal_name	Livingroom Light	false
If you want to set a specific name, eg. because your friendly name is too long for the card, this is the place to fill it in. If this is not set, the friendly name will be used.

Media Player Card

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.

Additional information

Currently there are only icons for:

Spotify
GooglePodcast
Plex
Soundcloud
YoutubeMusic

Unfortunately AmazonMusic, AppleMusic and Deezer don't have an `mdi:icon`, so the default icon (a speaker) will be presented.

"View" code

You're working in yaml-mode (Remember to take care of indentation)

- type: 'custom:button-card'
  template: card_media_player
  entity: media_player.livingroom_shield
  name: Livingroom Nvidia Shield

You're working in UI-mode

type: 'custom:button-card'
template: card_media_player
entity: media_player.livingroom_shield
name: Livingroom Nvidia Shield

Variables / Entries

Variable / Entry	Example	Required
entity	media_player.livingroom_shield	true
The media-player entity

name	Livingroom Nvidia Shield	true
Name to display for your media-player

Media Player Card (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.

"View" code

You're working in yaml-mode (Remember to take care of indentation)

- type: 'custom:button-card'
  template: card_media_player_with_control
  entity: media_player.livingroom_shield
  name: Livingroom Nvidia Shield

You're working in UI-mode

type: 'custom:button-card'
template: card_media_player_with_control
entity: media_player.livingroom_shield
name: Livingroom Nvidia Shield

Variables / Entries

Variable / Entry	Example	Required
entity	media_player.livingroom_shield	true
The media-player entity

name	Livingroom Nvidia Shield	true
Name to display for your media-player

Media Player Card (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

"View" code

You're working in yaml-mode (Remember to take care of indentation)

- type: 'custom:button-card'
  template: 
    - card_media_player_with_controls
  variables:
    ulm_card_media_player_with_controls_name: "Livingroom Shield"
    ulm_card_media_player_with_controls_entity: media_player.livingroom_shield

You're working in UI-mode

type: 'custom:button-card'
template: 
  - card_media_player_with_controls
variables:
  ulm_card_media_player_with_controls_name: "Livingroom Shield"
  ulm_card_media_player_with_controls_entity: media_player.livingroom_shield

Variables / Entries

Variable / Entry	Example	Required
ulm_card_media_player_with_controls_entity	media_player.livingroom_shield	true
The entity of the media player

ulm_card_media_player_with_controls_name	Living room Media Player	false
The name of the media player (only displayed when off)

Navigate Card

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

"View" code

You're working in yaml-mode (Remember to take care of indentation)

- type: custom:button-card
  template: card_navigate
  variables:
    ulm_card_navigate_path: /ui-lovelace-minimalist/media
    ulm_card_navigate_title: Media
    ulm_card_navigate_icon: mdi:television

You're working in UI-mode

type: custom:button-card
template: card_navigate
variables:
  ulm_card_navigate_path: /ui-lovelace-minimalist/media
  ulm_card_navigate_title: Media
  ulm_card_navigate_icon: mdi:television

Variables / Entries

Variable / Entry	Example	Required
ulm_card_navigate_path	/ui-lovelace-minimalist/media	true
The path to your lovelace dashboard

ulm_card_navigate_title	Media	true
Title to show for the link

ulm_card_navigate_icon	mdi:television	true
Icon to show

Person Card

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

Additional information

Dot color: at home - blue | away - green
Dot icon: at home - Home icon | not home - Home minus icon | if you configured an icon for a zone, it will be used

"View" code

You're working in yaml-mode (Remember to take care of indentation)

- type: 'custom:button-card'
  template: card_person
  variables:
    ulm_card_person_entity: person.username
    ulm_card_person_use_entity_picture: true
    ulm_card_person_zone1: work
    ulm_card_person_zone2: school

You're working in UI-mode

type: 'custom:button-card'
template: card_person
variables:
  ulm_card_person_entity: person.username
  ulm_card_person_use_entity_picture: true
  ulm_card_person_zone1: work
  ulm_card_person_zone2: school

Variables / Entries

Variable / Entry	Example	Required
ulm_card_person_entity	person.username	true
The person entity

ulm_card_person_use_entity_picture	true or false	false
If you set this to true, the card shows the entity picture from your user, otherwise (set to false) shows the icon. Default is false.

ulm_card_person_zone1	work	false
Set another zone (beside "home") to use for the card. You can set up two zones besides "home".

ulm_card_person_zone2	school	false
Set another zone (beside "home") to use for the card. You can set up two zones besides "home".

Power Outlet Card

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.

"View" code

You're working in yaml-mode (Remember to take care of indentation)

- type: 'custom:button-card'
  template: card_power_outlet
  variables:
    ulm_card_power_outlet_consumption_sensor: sensor.power_outlet_livingroom_consumption 
  entity: switch.power_outlet_livingroom
  name: Power Outlet Livingroom

You're working in UI-mode

type: 'custom:button-card'
template: card_power_outlet
variables:
  ulm_card_power_outlet_consumption_sensor: sensor.power_outlet_livingroom_consumption 
entity: switch.power_outlet_livingroom
name: Power Outlet Livingroom

Variables / Entries

Variable / Entry	Example	Required
entity	switch.power_outlet_livingroom	true


name	Power Outlet Livingroom	true


ulm_card_power_outlet_consumption_sensor	sensor.power_outlet_livingroom_consumption	false
If you set this sensor, the `power-outlet-card` shows the energy consumption next to the state.

Script Card

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

"View" code

You're working in yaml-mode (Remember to take care of indentation)

- type: 'custom:button-card'
  template: card_script
  variables: 
    ulm_card_script_title: Romantic lights
    ulm_card_script_icon: 'mdi:candle'
  tap_action:
    action: call-service
    service: script.turn_on
    service_data: 
      entity_id: script.romantic_livingroom_lights

You're working in UI-mode

type: 'custom:button-card'
template: card_script
variables: 
  ulm_card_script_title: Romantic lights
  ulm_card_script_icon: 'mdi:candle'
tap_action:
  action: call-service
  service: script.turn_on
  service_data: 
    entity_id: script.romantic_livingroom_lights

Variables / Entries

Variable / Entry	Example	Required
ulm_card_script_title	Romantic lights	true
Name to show for the script.

ulm_card_script_icon	mdi:candle	true
Icon to show for the script.

tap_action_action	call-service	true
Only call-service is allowed here.

tap_action_service	script.turn_on	true
Let the script run by turning it on.

tap_action_service_data	entity_id: script.romantic_livingroom_lights	true
This is the service_data needed by your script. That can be an entity_id and/or some variables.

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.

"View" code

You're working in yaml-mode (Remember to take care of indentation)

- type: 'custom:button-card'
  template: card_title
  name: My Title
  label: 'Subtitle'

You're working in UI-mode

type: 'custom:button-card'
template: card_title
name: My Title
label: 'Subtitle'

Variables / Entries

Variable / Entry	Example	Required
name	My_Title	true
This is a main title (either title or subtitle is required)

label	My_Subtitle	true
This is a subtitle (either title or subtitle is required)

Chip Back Button

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

"View" code

You're working in yaml-mode (Remember to take care of indentation)

- type: 'custom:button-card'
  template: chip_back
  variables:
    ulm_chip_back_path: /ui-lovelace-minimalist/home

You're working in UI-mode

type: 'custom:button-card'
template: chip_back
variables:
  ulm_chip_back_path: /ui-lovelace-minimalist/home

Variables / Entries

Variable / Entry	Example	Required
ulm_chip_back_path	/ui-lovelace-minimalist/home	true
Set the navigation path to your default view, eg. ui-lovelace-minimalist/home or lovelace

Chip Icon With Double State

"View" code

You're working in yaml-mode (Remember to take care of indentation)

- type: 'custom:button-card'
  template: chip_icon_double_state
  variables:
    ulm_chip_icon_double_state_icon: '💻'
    ulm_chip_icon_double_state_entity_1: sensor.nas_disk_used
    ulm_chip_icon_double_state_entity_2: sensor.nas_cpu_load

You're working in UI-mode

type: 'custom:button-card'
template: chip_icon_double_state
variables:
  ulm_chip_icon_double_state_icon: '💻'
  ulm_chip_icon_double_state_entity_1: sensor.nas_disk_used
  ulm_chip_icon_double_state_entity_2: sensor.nas_cpu_load

Variables / Entries

Variable / Entry	Example	Required
ulm_chip_icon_double_state_icon	💻	true
This is the icon to show. See icons to read more about the used unicode `emojis`.

ulm_chip_icon_double_state_entity_1	sensor.nas_disk_used	true


ulm_chip_icon_double_state_entity_2	sensor.nas_cpu_load	true

Chip Icon Only

This `chip` displays just an icon.

"View" code

You're working in yaml-mode (Remember to take care of indentation)

- type: 'custom:button-card'
  template: chip_icon_only
  variables:
    ulm_chip_icon_only: '❤️'

You're working in UI-mode

type: 'custom:button-card'
template: chip_icon_only
variables:
  ulm_chip_icon_only: '❤️'

Variables / Entries

Variable / Entry	Example	Required
ulm_chip_icon_only	❤	false
This is the icon to show. See icons to read more about the used unicode `emojis`.

Chip Icon With State

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

"View" code

You're working in yaml-mode (Remember to take care of indentation)

- type: 'custom:button-card'
  template: chip_icon_state
  variables:
    ulm_chip_icon_state_icon: '🛏️'
    ulm_chip_icon_state_entity: sensor.bed_occupancy

You're working in UI-mode

type: 'custom:button-card'
template: chip_icon_state
variables:
  ulm_chip_icon_state_icon: '🛏️'
  ulm_chip_icon_state_entity: sensor.bed_occupancy

Variables / Entries

Variable / Entry	Example	Required
ulm_chip_icon_state_icon	🛏️	true
This is the icon to show. See See icons to read more about the used unicode `emojis`.

ulm_chip_icon_state_entity	sensor.bed_occupancy	true

Chip Power Consumption

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

"View" code

You're working in yaml-mode (Remember to take care of indentation)

- type: 'custom:button-card'
  template: chip_power_consumption
  variables:
    ulm_chip_electric_consumption: sensor.my_electric_power_consumption
    ulm_chip_electric_price: sensor.my_electric_power_price

You're working in UI-mode

type: 'custom:button-card'
template: chip_power_consumption
variables:
  ulm_chip_electric_consumption: sensor.my_electric_power_consumption
  ulm_chip_electric_price: sensor.my_electric_power_price

Variables / Entries

Variable / Entry	Example	Required
ulm_chip_electric_consumption	sensor.my_electric_power_consumption	true
This is your consumed energy. This is the sensor, that shows how many kWhs are consumed.

ulm_chip_electric_price	sensor.my_electric_power_price	true
This is the price for your consumed energy, if you have such a sensor. This should be a sensor that shows a price in your defined currency. If this variable is not set, the chip shows only the kWhs! If this variable is set the chip shows the price for the consumed energy!

Chip Presence Detection (counter)

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

"View" code

You're working in yaml-mode (Remember to take care of indentation)

- type: 'custom:button-card'
  template: chip_presence_detection
  variables:
    ulm_chip_presence_counter_residents: sensor.my_residents_counter
    ulm_chip_presence_counter_guests: sensor.my_guests_counter

You're working in UI-mode

type: 'custom:button-card'
template: chip_presence_detection
variables:
  ulm_chip_presence_counter_residents: sensor.my_residents_counter
  ulm_chip_presence_counter_guests: sensor.my_guests_counter

Variables / Entries

Variable / Entry	Example	Required
ulm_chip_presence_counter_residents	sensor.my_residents_counter	true
This is the sensor that shows your residents counter.

ulm_chip_presence_counter_guests	sensor.my_guests_counter	true
This is the sensor that shows your guests counter.

Chip Temperature

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

"View" code

You're working in yaml-mode (Remember to take care of indentation)

- type: 'custom:button-card'
  template: chip_temperature
  variables:
    ulm_chip_temperature_inside: sensor.my_temperature_sensor_inside
    ulm_chip_temperature_outside: sensor.my_temperature_sensor_outside
    ulm_chip_temperature_weather: weather.my_weather_provider"

You're working in UI-mode

type: 'custom:button-card'
template: chip_temperature
variables:
  ulm_chip_temperature_inside: sensor.my_temperature_sensor_inside
  ulm_chip_temperature_outside: sensor.my_temperature_sensor_outside
  ulm_chip_temperature_weather: weather.my_weather_provider"

Variables / Entries

Variable / Entry	Example	Required
ulm_chip_temperature_outside	sensor.my_temperature_sensor_outside	true
This is the sensor that provides your outside temperature. If you want to use eg. a temperature value from your weather provider, you'd need to setup a template sensor first. The state of this sensor should represent a numeric value (°C or °F doesn't matter).

ulm_chip_temperature_inside	sensor.my_temperature_sensor_inside	true
This is the sensor that provides your inside temperature. The state of this sensor should represent a numeric value (°C or °F doesn't matter).