hui-element

The Lovelace interface for Home Assistant has three types of objects, those are:

Cards Examples include entities, glance, vertical-stack, gauge, media-player.

Entity rows The individual rows in an entities card. Examples include section, call-service, conditional, cast, but also sensor-entity, toggle-entity, climate-entity and several more that a normal user never have to bother with.

Elements The elements used in a picture-elements card. Examples include state-badge, state-label, image.

When you select a type: for something, what is loaded will depend on where. E.g. specifying type: conditional in a lovelace view or a stack card will load a conditional card, but specifying type: conditional in an entities card will load a conditional entity row.

Sometimes you may want to use things in other places, though. That's where hui-element comes in.

Usage

For installation, updating and debugging instructions see this guide.

Let's say you want to use the section entity row in place of a card.

Normally, a section row configuration may look like:

type: section
label: Important things

To make it work as a card, change it to:

type: custom:hui-element
row_type: section
label: Important things

I.e., change type: to row_type: and add type: custom:hui-element.

hui-element will then load the correct row and place it wherever you want it.

Similarly, to put a glance card inside an entities card:

type: entities
entities:
  - light.bed_light
  - type: custom:hui-element
    card_type: glance
    entities:
      - light.kitchen_lights
      - light.ceiling_lights

Note: In some cases, the internal types may need to be used. I.e. to add a media player row as a card, you'd need to specify row_type: media-player-entity.

Note2: It may also work to set row_type: default and hui-element will figure out the correct row type by itself.

The correct types to use can be found in the frontend source code for cards, entity-rows and elements.

A note on card-mod

If you are using card-mod, hui-element will be "transparent".

I.e. styling hui-element itself should be as if styling the element inside it.

Ex:

- type: entities
  entities:
    - type: section
      label: Default internal styling
      card_mod:
        style: |
          .divider {
            background-color: red;
          }
    - type: custom:hui-element
      row_type: section
      label: Hui-element internal styling
      card_mod:
        style: |
          .divider {
            background-color: green;
          }
- type: entities
  entities:
    - type: section
      label: Default styled from card
    - type: custom:hui-element
      row_type: section
      label: Hui-element styled from card
  card_mod:
    style:
      hui-section-row $: |
        .divider { background-color: blue; }
      hui-element $: |
        .divider { background-color: orange;}

FAQ

Does this replace the custom:hui- trick? Yes. That's where the name is from. The custom:hui- trick was always a dirty hack that worked by accident rather than design, and since 0.107 it works intermittently at best.

---