Allows you to add badges and cards to the header in Home Assistant
You can install this manually or via HACS if you want easy updating,
www
folder.Search for "Header Cards" in the Frontend section of HACS and follow the instructions.
Config Option | Type | Default | Description |
---|---|---|---|
replace_tabs: |
Boolean | false | Hides the tabs in the header (e.g. if you have created custom navigation buttons) |
justify_content: |
String | "right" | affects the layout of the badges and cards in the header - see below for more details |
badges: |
List | List of badges to add to header | |
cards: |
List | List of cards to add to header |
header_cards:
badges:
- entity: binary_sensor.motion_trigger
name: ''
cards:
- type: markdown
content: |
Hello it is {{ states("sensor.time") }}
views:
...
Note: views:
is only included there to indicate where this config should be positioned in the Lovelace config
You can use this option to control the layout of the badges and cards in the header. If this is not set, they will be aligned to the right hand size of the header.
Any of the values supported by the justify-content CSS property are accepted. See here for more details.
For example:
header_cards:
justify_content: space-between
badges:
- entity: binary_sensor.motion_trigger
name: ''
cards:
- type: custom:mushroom-chips-card
chips:
- type: weather
entity: weather.dark_sky
show_conditions: true
show_temperature: true
style: |
ha-card {
background: rgba(0,0,0,0);
}
tap_action:
action: navigate
navigation_path: /lovelace-desktop/weather-and-temperature
views:
...
Gives a layout like:
There are some limitations in this initial release.
name: ''
avoids this.