HKI Header Card

jimz011 · January 4, 2026, 12:51am

I have made (with help of AI) a card for Home Assistant that gives you the ability to have an actual full width header. I have been looking for something similar but couldn’t really find it so decided to make one that suits my needs.

It is fully configurable via the UI and supports the sections dashboard.

You may also be interested in HKI PostNL Card and HKI Navigation Card

The card does have bugs though, so use with caution .

Why the name HKI? Well in the past I shared a complete dashboard called Homekit Infused. And for the lack of a better name I simply gave it the same abbreviation, so bite me . I hope someone will enjoy this card.

Screenshots

Features

Full-width fixed header with customizable background (images, gradients, colors)
Automatic kiosk mode detection - adjusts position when HA header is hidden
Jinja2 template support for dynamic title and subtitle
Precise positioning controls for title, subtitle, and badges
Advanced badge positioning (pinned or scrolling with adjustable offsets)
Gradient overlay with customizable blend
Responsive design with adjustable heights

Installation

HACS (Recommended)

Open HACS in your Home Assistant instance
Go to “Frontend”
Click the menu in the top right and select “Custom repositories”
Add https://github.com/jimz011/hki-header-card as a Lovelace repository
Click “Download” on the HKI Header Card
Restart Home Assistant

Manual Installation

Download hki-header-card.js from the latest release
Copy it to <config>/www/ (create the folder if it doesn’t exist)
Add the resource in your Lovelace configuration:

resources:
- url: /local/hki-header-card.js 
  type: module

For configuration please check the docs at GitHub - jimz011/hki-header-card: Full Width Header for Home Assistant

jimz011 · January 4, 2026, 6:51pm

I have added a weather option in the latest release:

Enjoy!

jimz011 · January 7, 2026, 1:03am

HKI Header Card 1.0.4

Changes:

You can now change the text colors of the title, subtitle and weather
This card now makes use of entity and navigation dropdowns, this makes searching entities easier, this also applies to yaml fields
Added additional customizable offset for the weather element for mobile phones
You can now select which weather elements to show and added a few extra ones
You can now use animated SVG icons
Instead you could also use colored icons and general animations if SVG is not an option for you
The weather element can now be styled like a badge
Bugfixes

jimz011 · January 7, 2026, 9:26am

HKI Header Card 1.0.5
Changes:

Fixed an issue where the weather condition would not show it’s state in the user selected language.

jimz011 · January 7, 2026, 11:21pm

I have also created a navigation card to accompany this card. You can find it here

nikc10 · January 9, 2026, 5:16pm

Very nice. How did you add the type of buttons from HKI5 to HKI7, can you share the program? Thank you.

jimz011 · January 9, 2026, 6:57pm

@nikc10 Thanks, well those are just button cards (like in HKI5). The only difference is that they were pre templated for you. However I can share the code.

Just add a grid section on your dashboard, add any card and click on code editor.

Paste this as the first button:

type: custom:button-card
entity: light.garage_2
name: Plafond
icon: hue:play-bar-two
color: auto-no-temperature
size: 25%
hold_action:
  action: more-info
double_tap_action:
  action: more-info
show_state: true
show_label: true
label: >-
  [[[ if (typeof(entity) === 'undefined') return; if ('brightness' in
  entity.attributes) { if (entity.attributes && (entity.attributes.brightness <=
  255)) { var bri = Math.round(entity.attributes.brightness / 2.55); return (bri
  ? bri : '0') + '%'; } } ]]]
aspect_ratio: 1/1
styles:
  card:
    - border-radius: 12px
    - opacity: 0.7
  label:
    - font-weight: normal
    - font-size: 12px
    - font-family: Roboto
    - padding: 0px 10px
    - justify-self: start
    - font-weight: bold
  state:
    - font-size: 12px
    - font-family: Roboto
    - padding: 0px 10px
    - justify-self: start
    - text-transform: capitalize
    - font-weight: bold
  img_cell:
    - align-self: start
    - text-align: start
    - align-items: flex-start
    - justify-content: flex-start
  name:
    - justify-self: start
    - padding: 0px 10px
    - font-weight: bold
    - font-family: Roboto
    - font-size: 12px
    - color: var(--name-color)
  icon:
    - top: 7%
    - left: 7%
  entity_picture:
    - border-radius: 25%
    - left: 8%
    - top: 10%
  grid:
    - grid-template-areas: "\"i i\" \"area area\" \"n n\" \"s l\""
    - grid-template-rows: 1fr 1fr min-content min-content
state:
  - value: "on"
    styles:
      card:
        - background: white
        - opacity: 1
      icon:
        - color: var(--button-card-light-color)
      name:
        - color: black
      state:
        - color: black
      label:
        - color: black
      lock:
        - color: darkred

Unfortunately button card doesnt support the visual editor, but… you can simply copy each button with the UI copy/paste feature and add buttons to your grid.

BTW, any continuation of the full HKI project has been cancelled. All stuff that HKI had that simply can not be done with current cards will be released (like the header and navigation card). But none of the pre templated core or custom cards will be ported.

However… I will rework the HKI documentation to include examples for stuff like this so that you can recreate what would have been HKI 7 with ease.

jimz011 · January 9, 2026, 8:28pm

1.1.0

BREAKING CHANGES:
The weather settings for the card have been reset, if you already set them up they will not be removed, however if you want to edit it you will have to redo the weather again.

New Features:

The weather slot is now renamed to info display
The info display can now be modified to show the day, time, date or combination of them.
The info display can now also have a custom badge. The text and icon support jinja templates.
All info displays support a tap_action.

Changes:

Refactored card to have a lot more functions with less code
Performance optimizations
Time/date automatically translates to the set language in HA
Version can now be seen in the console

nikc10 · January 10, 2026, 3:59pm

thank you very much

nikc10 · January 10, 2026, 6:20pm

It means I still have time until HKI7 looks like the main menu in HKI5 for me.

jimz011 · January 13, 2026, 12:06am

1.2.0

BREAKING CHANGES

The info display has been removed in favor of a slot based system. You will need to reconfigure anything you had placed into the info display.

Changes:

Info display has been replaced with a top header slot system
You can now populate 3 slots (left, center, right) with the options previously available in the info_display
Fixed a bug whenever the header wasn’t fixed to the top it would overflow the container. When this setting is disabled it will now behave like a normal card.

New Features:

You can now populate the same (info) card into any slot (e.g. you want to show the current date in the left slot and the time in the right)
You can now set global defaults for each slot, as well as individually (e.g. styles, colors, pills, borders etc)
Each slot can also have a separate offset for mobile phones to finetune your setup
3 new content types for each slot are added, you can now select a button, a spacer or notifications to show in one of the slots
The spacer can be used to limit content in the other slots so they will not overflow. When using a spacer it will fill up that slot with an invisible card (this can be handy if you want to populate 2 slots, but not have both slots take 50% of the screen). The spacer can have a tap_action which gives you an invisible tap_action.
The button is simple and can be configured to have any icon, any label and do any tap_action
2 new tap_actions have been added to the list and can be used on any of the cards in the slots, these are back, which will take you back to the previous page (this way it can be used as a replacement for the back gesture on subviews when using e.g. kiosk mode). The other tap_action will open the sidebar, also very usefull when using kiosk mode)

Coming Soon:

The card has been made compatible and ready for the upcoming HKI Notification Card, which will be released very soon. This slot can already be selected, but without the card and custom_component this will not do anything yet. A little patience will be required.

Tip:

You can however… edit this card in the yaml editor (just rename the custom:hki-notification-card) to any card you want and go back to the visual editor. You can now use the visual editor to set that card up inside the header. There is a reason that it isn’t an actual option (but more of an easter egg) because I will not support this officially, but at least you can.

Enjoy this major release and keep an eye out for new HKI cards in the near future!

1.2.1

Changes:

Fixed a bug where tap_action more-info or toggle would not save the entity in the visual editor
Added new background blend options
Background image can now be zoomed
Added extra settings for slots to overflow into other slots

1.2.2

Changes:

Added options for border-radius, box-shadow, border-style, border-color and border-width options to be used with the background/image/color.
Bugfixes

laurens362 · January 13, 2026, 5:53pm

Insane card!!! Love it!

jimz011 · January 14, 2026, 7:48am

I have recently shared my config for the buttons with you. But I have actually decided to make my own instead. Not as powerful as the custom:button-card (as that is the king of buttons). But at least a lot easier to setup and configure.

Below a little teaser:

oh and even better, it can completely be setup via the UI. No yaml required!

nikc10 · January 14, 2026, 2:11pm

It looks good. Can it be installed? How can I create button submenus?

jimz011 · January 14, 2026, 3:14pm

Yes it can be installed as soon as I release it. The popup is included so no need to fiddle with anything. Just install, select entity and done!

Keep an eye out on these channels, I will announce it once it goes public.

jimz011 · January 19, 2026, 2:53pm

1.3.0

Changes:

Background would only accept images and gradients, it should now properly accept css color names, hex values and rgb(a) values.
Border Radius did not accept an integer number, this is now working properly. Variables and adding px yourself will continue to work.
Background should no longer overflow when fixed to header and border-radius is set.
When adding this card the yaml config no longer gets pre-filled with the defaults. It will now only store user configured settings.
Completely reworked the visual editor menu. It is now easier to find settings and configure this card.

jimz011 · January 26, 2026, 1:28pm

2.0.0

BREAKING CHANGES:

There should be none, but a lot has been refactored. This sometimes means that even though your setup hasn’t changed you might need to simply save the card again.
Tried to maintain a backwards compatibility, if it is not working correctly for you, you should probably setup this card again.

Changes:

Pill sizes are now consistent between each element.
Hold and double tap actions have been added across all elements that supported a tap_action
Refactored the entire setup to be more logical when used in YAML (documentation will be updated soon), it now uses a nested hierarchy, which is much more logical.
This card will now remove all unused code from your YAML config, it will also try to cleanup duplicates or misconfigured code. (this doesn’t always work, for cleanest option, set this card up as new)
The card has now FULL HKI default settings by default. No longer needed to fiddle with alignments if you simply want the HKI header as shown in screenshots.

New Features:

Persons can now be added to the header
Persons will also have tap/hold/double tap actions available
Persons that are away can be hidden, grayscaled or border colored
Persons that are home/away can be sorted by last triggered (meaning people at home will be aligned left and people away right)
Persons avatars can overlap each other

Screenshot:

2.0.1

Fixed issue where one could only setup top bar and persons on existing config but failed on new views.

2.0.2

Fixed bug when using the middle or left slot of the top bar on a new view would not populate unless the left slot was already populated
Fixed bug where persons could not be selected via dropdowns.

2.0.3

When selecting more-info as the action it is no longer required to set an entity if there is already an entity we are interacting with.

2.0.4

Rearranged Persons config for better readability
Fixes border-radius for persons, it used to only accept percentage values, it accepts integer numbers now.
Fixed a bug where perform-action for persons would not show the service selector, target and yaml input fields.
Added option to use the action entity as the current state for the person (this is useful for when you want to manually toggle a person home/away. This is a requested feature to allow some kind of guest mode). E.g. you have created a dummy person, you want to toggle an input_boolean with it. When the boolean is toggled guest mode is active and will run an automation. It will now show that guest as if it were home. Turning the boolean off again will show the guest as away.

2.0.5

Addressed a bug where tap_actions on person entities would not work on mobile phones.
Added option to set a custom entity_picture or icon depending on home/away states.
Fixed bug where jinja templates would briefly show the entire template string instead of the parsed output on card load.