Header Cards

Allows you to add badges and cards to the header in Home Assistant

Installation

You can install this manually or via HACS if you want easy updating,

Manually

Download the lovelace-header-cards.js file and place it in your www folder.
Add the file as a resource

With HACS

Search for "Header Cards" in the Frontend section of HACS and follow the instructions.

Config Options

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

Simple config example

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

justify_content

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:

Limitations

There are some limitations in this initial release.

Not all cards will display correctly in the header - you may be able to use card-mod to update the styling to make them fit better if there are issues
Badges with labels may not display properly, the image may not display fully and the label may extend beyond the bottom of the header - removing the label by using name: '' avoids this.

gadgetchnnel / lovelace-header-cards

readme