mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-06-16 15:16:56 +00:00
361cec272f
* Add tap-action document * Add commas * Apply suggestions from code review Co-Authored-By: Franck Nijhof <frenck@frenck.nl> Co-authored-by: Franck Nijhof <frenck@frenck.nl>
77 lines
2.1 KiB
Markdown
77 lines
2.1 KiB
Markdown
---
|
|
title: "Headers & Footers for Lovelace cards"
|
|
description: "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.
|
|
|
|
<p class='img'><img src='/images/lovelace/header-footer/screenshot-picture-buttons.png' alt="Screenshot of an entities card with a picture header.">
|
|
Screenshot of an entities card with a picture header and buttons footer.
|
|
</p>
|
|
|
|
## Picture header & footer
|
|
|
|
Widget to show a picture as a header or a footer. A picture can have touch actions associated with it.
|
|
|
|
```yaml
|
|
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 taken on card tap. See [action documentation](/lovelace/actions/#tap-action).
|
|
type: map
|
|
hold_action:
|
|
required: false
|
|
description: Action to take on tap-and-hold. See [action documentation](/lovelace/actions/#hold-action).
|
|
type: map
|
|
double_tap_action:
|
|
required: false
|
|
description: Action to take on tap-and-hold. See [action documentation](/lovelace/actions/#double-tap-action).
|
|
type: map
|
|
{% endconfiguration %}
|
|
|
|
## Buttons header & footer
|
|
|
|
Widget to show entities as buttons in the header or footer.
|
|
|
|
```yaml
|
|
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 to render.
|
|
type: string
|
|
icon:
|
|
required: false
|
|
description: Override the entity icon.
|
|
type: string
|
|
image:
|
|
required: false
|
|
description: Override the entity image.
|
|
type: string
|
|
{% endconfiguration %}
|