Entities card

The entities card is a list. Every entity gets a row with its icon, its name, and on the right, its state or the control that fits the domain: a switch for a light, a slider for an input number, a dropdown for a select, buttons for a lock or a cover. Selecting the name or the icon opens the more-info dialog.

Use it when you want to show many entities in little room, like the settings of a device, or all helpers of a routine. For a few entities people use often, tile cards are easier to read and to hit. For a row of states without controls, use the glance card.

The row is picked by the domain of the entity. You don't configure that; the entities card does it for you.

With a title, the card gets a header. When the card has at least two entities that can be toggled, the header gets a toggle that switches them all at once. Set show_header_toggle: false when that toggle makes no sense, like for a list that mixes lights and a lock.

Not every row is an entity. Special rows have a type and structure the list, or add something that is not an entity:

• divider: a line between groups of rows.
• section: a line with a label, to start a new group.
• attribute: one attribute of an entity, as its own row.
• weblink: a link to a page.
• buttons: a row of small buttons, one per entity.
• text: a name with a fixed text.
• button: a row with a button that runs an action.
• conditional: a row that only shows when its conditions are met.
• cast: starts casting a dashboard to a Google Cast device.

Use dividers and sections sparingly. If a list needs many sections, it is probably several cards.

The card can have a header and a footer. A graph shows the history of one entity, buttons shows a row of buttons, and picture shows an image. A graph footer turns a list of readings into a small overview.

A row can override the name and the icon of its entity, and show secondary_info below the name, like the time of the last change or an attribute. With color: none, the icon of a row no longer follows the state.

• Group the rows that belong together. A list that mixes rooms and devices is hard to scan.
• Keep names short. The control on the right takes room, and a long name gets cut off.
• Let the card pick the row. Override the type only when you need a special row.

• entities (list, required): the rows. Each row is an entity ID, or a mapping with an entity and options, or a special row with a type.
• title (string): the title in the header of the card.
• icon (string): an icon in front of the title.
• show_header_toggle (boolean): shows a toggle for all entities in the header. Defaults to showing it when the card has a title and at least two entities that can be toggled.
• color (string): how to color the icons of the rows. Defaults to state, the color of the state. Use none for the default icon color.
• header (mapping): a header of type graph, buttons, or picture.
• footer (mapping): a footer of type graph, buttons, or picture.
• theme (string): the theme to use for this card.

The options of an entity row:

• entity (string, required): the entity of the row.
• name (string): the name to show. Defaults to the name of the entity.
• icon (string): the icon to show. Defaults to the icon of the entity.
• image (string): a picture to show instead of the icon.
• secondary_info (string or list): extra information below the name. It takes the same values as state_content of the tile card: state, last_changed, last_updated, area_name, or the name of an attribute. The older values, like last-changed and position, still work.
• color (string): the color of the icon. Overrides the color of the card.
• tap_action, hold_action, double_tap_action (action): what happens when you select, hold, or double tap the row. Not every row type supports them.

type: entities
title: "Hallway"
show_header_toggle: false
entities:
  - light.hallway
  - lock.front_door
  - type: section
    label: "Sensors"
  - binary_sensor.front_door
  - entity: binary_sensor.hallway_motion
    secondary_info: last_changed
footer:
  type: graph
  entity: sensor.hallway_illuminance

The card lives in src/panels/lovelace/cards/hui-entities-card.ts, and the element is <hui-entities-card>. The rows are created by createRowElement in src/panels/lovelace/create-element/create-row-element.ts, which maps each domain to a row. The entity rows live in src/panels/lovelace/entity-rows/, the special rows in src/panels/lovelace/special-rows/, and the headers and footers in src/panels/lovelace/header-footer/.

Rows of entities share <hui-generic-entity-row>, which renders the icon, the name, and the secondary info, and leaves the right side to the row. A new entity row starts there.

In the sections view, the card takes all 12 columns and grows with its rows. It can shrink to 3 columns.

Source