HKI Header Card

jimz011 · January 4, 2026, 12:51am

HKI Header Card

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.