2024.11.2
Home ▸ Dashboards ▸

Headers & Footers for dashboard cards

Some dashboard 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.

Header and footer can be used on the following cards:

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/dashboards/header-footer/balloons-header.png"

Configuration Variables

Looking for your configuration file?
type string Required

picture

image string Required

The URL of an image.

alt_text string (Optional)

Alternative text for the image. This is necessary for users of assistive technology. The W3C images tutorial provides simple guidance for writing alternative text.

tap_action map (Optional)

Action taken on card tap. See action documentation.

hold_action map (Optional)

Action taken on tap-and-hold. See action documentation.

double_tap_action map (Optional)

Action taken 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

Looking for your configuration file?
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. You can use any icon from Material Design Icons. Prefix the icon name with mdi:, ie mdi:home.

image string (Optional)

Override the entity image.

name string (Optional)

Label for the button.

show_icon boolean (Optional, default: true)

Show entity icon.

show_name boolean (Optional, default: false)

Show entity name.

tap_action map (Optional)

Action taken on button tap. See action documentation.

hold_action map (Optional)

Action taken on tap-and-hold. See action documentation.

double_tap_action map (Optional)

Action taken on double tap. See action documentation.

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

Looking for your configuration file?
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. Minimum is 1 hour. Big values can result in delayed rendering, especially if the selected entities have a lot of state changes.

Related topics