mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-07-02 15:06:51 +00:00
116 lines
3.2 KiB
Markdown
116 lines
3.2 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
|
|
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 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 double tap. 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
|
|
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](https://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
|
|
{% endconfiguration %}
|
|
|
|
## Graph header & footer
|
|
|
|
Widget to show an entity in the sensor domain as a graph in the header or footer.
|
|
|
|
<p class='img'><img src='/images/lovelace/header-footer/graph.png' alt="Screenshot of an entities card with a graph footer.">
|
|
Screenshot of an entities card with a graph footer.
|
|
</p>
|
|
|
|
```yaml
|
|
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 %}
|