home-assistant.io/source/lovelace/header-footer.markdown
Paulus Schoutsen c3f5f3f855
Add headers & footers docs (#11824)
* Add headers & footers docs

* Add screenshots

* ✏️ Tweak

Co-authored-by: Franck Nijhof <frenck@frenck.nl>
2020-01-20 20:47:00 -08:00

3.9 KiB

title, description
title description
Headers & Footers for Lovelace cards Decorate your Lovelace cards with header and footer widgets.

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

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

Screenshot of an entities card with a picture header. Screenshot of an entities card with a picture header.

type: picture
image: 'https://www.home-assistant.io/images/lovelace/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 to take on tap type: map keys: action: required: true description: "Action to perform (more-info, toggle, call-service, navigate, url, none)" type: string default: "toggle" navigation_path: required: false description: "Path to navigate to (e.g. /lovelace/0/) when action defined as navigate" type: string default: none url_path: required: false description: "Path to navigate to (e.g. https://www.home-assistant.io) when action defined as url" type: string default: none service: required: false description: "Service to call (e.g. media_player.media_play_pause) when action defined as call-service" type: string default: none service_data: required: false description: "Service data to include (e.g. entity_id: media_player.bedroom) when action defined as call-service" type: string default: none hold_action: required: false description: Action to take on tap-and-hold type: map keys: action: required: true description: "Action to perform (more-info, toggle, call-service, navigate, url, none)" type: string default: "more-info" navigation_path: required: false description: "Path to navigate to (e.g. /lovelace/0/) when action defined as navigate" type: string default: none url_path: required: false description: "Path to navigate to (e.g. https://www.home-assistant.io) when action defined as url" type: string default: none service: required: false description: "Service to call (e.g. media_player.media_play_pause) when action defined as call-service" type: string default: none service_data: required: false description: "Service data to include (e.g. entity_id: media_player.bedroom) when action defined as call-service" type: string default: none double_tap_action: required: false description: Action to take on double tap type: map keys: action: required: true description: "Action to perform (more-info, toggle, call-service, navigate, url, none)" type: string default: "more-info" navigation_path: required: false description: "Path to navigate to (e.g. /lovelace/0/) when action defined as navigate" type: string default: none url_path: required: false description: "Path to navigate to (e.g. https://www.home-assistant.io) when action defined as url" type: string default: none service: required: false description: "Service to call (e.g. media_player.media_play_pause) when action defined as call-service" type: string default: none service_data: required: false description: "Service data to include (e.g. entity_id: media_player.bedroom) when action defined as call-service" type: string default: none {% endconfiguration %}