Skip to content

Latest commit

 

History

History
138 lines (122 loc) · 3.98 KB

header-footer.markdown

File metadata and controls

138 lines (122 loc) · 3.98 KB
Raw
title description
Headers & Footers for dashboard cards
Decorate your dashboard cards with header and footer widgets.

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.

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 header-footer %} type: required: true description: "picture" type: string image: required: true description: The URL of an image. type: string tap_action: required: false description: Action taken on card tap. See action documentation. type: map hold_action: required: false description: Action taken on tap-and-hold. See action documentation. type: map double_tap_action: required: false description: Action taken on double tap. See action documentation. type: map {% endconfiguration %}

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 header-footer %} entities: required: true description: A list of entities to show. Each entry is either an entity ID or a map. type: list keys: entity: required: true description: The entity ID to render. type: string icon: required: false description: Override the entity icon. You can use any icon from MaterialDesignIcons.com. Prefix the icon name with mdi:, ie mdi:home. type: string image: required: false description: Override the entity image. type: string name: required: false description: Label for the button. type: string show_icon: required: false description: Show entity icon. type: boolean default: "true"
show_name: required: false description: Show entity name. type: boolean default: "false" tap_action: required: false description: Action taken on button tap. See action documentation. type: map hold_action: required: false description: Action taken on tap-and-hold. See action documentation. type: map double_tap_action: required: false description: Action taken on double tap. See action documentation. type: map

{% endconfiguration %}

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 header-footer %} entity: required: true description: Entity ID of sensor domain. type: string detail: required: false description: "Detail level of the graph: 1 or 2 (1 = one point/hour, 2 = six points/hour)" type: integer default: 1 hours_to_show: required: false description: 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. type: integer default: 24 {% endconfiguration %}