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 ID 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, default: 1)

Detail level of the graph: 1 or 2 (1 = one point/hour, 2 = six points/hour)

hours_to_show integer (Optional, default: 24)

Hours to show in graph