Entity card

The entity card puts the state of one entity front and center: the name at the top, the icon in the corner, and the value in a large font below. It works best for a reading people check often, like the temperature outside or the power a device uses right now.

The entity card only shows. It has no controls, and selecting it opens the more-info dialog. To show an entity people also operate, like a light, use the tile card. To show how a value changed over time, use the sensor card, which adds a graph below the value.

With attribute, the card shows an attribute instead of the state. Add a unit when the attribute has none of its own. A custom unit always comes after the value.

For lights, the icon takes the color of the state, like amber when the light is on, or the color of the light itself. For other entities, the icon stays in the default icon color. Set state_color: true to color the icon by state for those too, or state_color: false to turn it off for a light.

The card can have a footer, like a graph of the entity or a row of buttons. With a graph, the card turns into a small sensor card, so prefer the sensor card for that.

• Use it for numbers and short states. A long state gets cut off.
• Keep the name short. The area or the heading above the card often already says where the value comes from, so "Temperature" can be enough.

• entity (string, required): the entity to show.
• 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.
• attribute (string): shows this attribute instead of the state.
• unit (string): the unit to show after the value. Defaults to the unit of the entity.
• state_color (boolean): colors the icon by the state of the entity. Defaults to true for lights, and false for the rest.
• theme (string): the theme to use for this card.
• footer (mapping): a footer, of type graph, buttons, or picture.
• tap_action, hold_action, double_tap_action (action): what happens when you select, hold, or double tap the card. Selecting opens the more-info dialog by default.

type: entity
entity: climate.thermostat
attribute: current_temperature
name: "Living room"
unit: "°C"

The card lives in src/panels/lovelace/cards/hui-entity-card.ts, and the element is <hui-entity-card>. The footer is created by createHeaderFooterElement, the same one the entities card uses for its header and footer.

In the sections view, the card takes 6 of the 12 columns and two rows, and can't get smaller than that.

Source