Home

Awesome

Header Cards

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

<img width="298" alt="image" src="https://user-images.githubusercontent.com/2099542/156809984-2bb15473-cfc4-4159-9a11-2595f001915e.png">

Installation

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

Manually

With HACS

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

Config Options

Config OptionTypeDefaultDescription
replace_tabs:BooleanfalseHides 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:ListList of badges to add to header
cards:ListList 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:

<img width="957" alt="image" src="https://user-images.githubusercontent.com/2099542/159037395-4380af9b-cc78-4029-9356-661456f7c05e.png">

Limitations

There are some limitations in this initial release.