Funny thing about lovelace - cards, rows in the entities card, badges and elements in the picture-elements card work exactly the same behind the scenes.
That means that you can use them interchangeably if you know how, and e.g. put a button right in an entities card, a badge somewhere in the middle of your view or a markdown card (with background and border removed) right in your carefully crafted picture-elements card. Pretty neat stuff that allows for some fantastic creations.
However. Because Home Assistant cares about you and your bandwidth, not all cards and things are downloaded from the server from the start, and if you try to put a card where a row is expected or vice versa lovelace will be be confused and not know where to look for it.
Enter hui-element.
Say you have a markdown card:
type: markdown
contents: |
Good {% if now().hour < 8 %}morning{% else %}day{% endif %}!
And you would like that to be at the top left of your daily overview picture-elements card, you can now just add it there with the addition of one (1) line of code! (And changing one slightly)
type: picture-elements
image: http://www.placekitten.com/800/600
elements:
- type: custom:hui-element # This is the added row
card_type: markdown # This is the slightly changed row
contents: |
Good {% if now().hour < 8 %}morning{% else %}day{% endif %}!
style:
left: 0
top: 0
"--ha-card-background-color": rgba(0, 0, 0, 0)
"--ha-card-drop-shadow": none
If you want a card where there should be a row - this is the solution.
Please note, though, that this is not needed for custom things, since then are always loaded.
I guess because there’s no row / badges / element in this card.
