Headers & Footers for Lovelace cards


Some Lovelace cards have support for header and footer widgets. These widgets fill up the whole available space in a card.

Screenshot of an entities card with a picture header. Screenshot of an entities card with a picture header and buttons footer.

Picture header & footer

Widget to show a picture as a header or a footer. A picture can have touch actions associated with it.

header:
  type: picture
  image: 'https://www.home-assistant.io/images/lovelace/header-footer/balloons-header.png'

Configuration Variables

type

(string)(Required)

picture

image

(string)(Required)

The URL of an image.

tap_action

(map)(Optional)

Action taken on card tap. See action documentation.

hold_action

(map)(Optional)

Action to take on tap-and-hold. See action documentation.

double_tap_action

(map)(Optional)

Action to take on double tap. See action documentation.

Buttons header & footer

Widget to show entities as buttons in the header or footer.

footer:
  type: buttons
  entities:
    - script.launch_confetti
    - entity: script.swirl_lights
      icon: 'mdi:track-light'
    - entity: script.run_siren
      icon: 'mdi:alarm-light'

Configuration Variables

entities

(list)(Required)

A list of entities to show. Each entry is either an entity ID or a map.

entity

(string)(Required)

The entity to render.

icon

(string)(Optional)

Override the entity icon.

image

(string)(Optional)

Override the entity image.

name

(string)(Optional)

Label for the button

Graph header & footer

Widget to show an entity in the sensor domain as a graph in the header or footer.

Screenshot of an entities card with a graph footer. Screenshot of an entities card with a graph footer.

footer:
  type: graph
  entity: sensor.outside_temperature
  hours_to_show: 24
  detail: 1

Configuration Variables

entity

(string)(Required)

Entity id of sensor domain

detail

(integer)(Optional)

Detail of the graph 1 or 2, 1 equals one point/hour, 2 equals six points/hour

Default value:

1

hours_to_show

(integer)(Optional)

Hours to show in graph

Default value:

24