Area card

The area card lets you control and monitor an individual areaAn area in Home Assistant is a logical grouping of devices and entities that are meant to match areas (or rooms) in the physical world: your home. For example, the living room area groups devices and entities in your living room. [Learn more].

Screenshot of the area cards.

All options for this card can be configured via the user interface.

As shown in the screenshot of the area cards, they can display values and buttons of entities and devices that you have assigned the area to, such as:

• Buttons for entitiesAn entity represents a sensor, actor, or function in Home Assistant. Entities are used to monitor physical properties or to control other entities. An entity is usually part of a device or a service. [Learn more] such as fan, light, and switch that are in the area of the card.
• The measured value of a sensor, if the sensor is in the area of the card or if the sensor is assigned to the area in Settings > Areas, labels & zones.
• The median of the values measured by temperature sensors, if more than one temperature sensor is in the area of the card.
• The median of the values measured by humidity sensors, if more than one humidity sensor is in the area of the card.
• A motion sensor in the top left of the card, if a motion sensor is in the area of the card.
• The camera feed instead of the area picture, if a camera is added to the areaAn area in Home Assistant is a logical grouping of devices and entities that are meant to match areas (or rooms) in the physical world: your home. For example, the living room area groups devices and entities in your living room. [Learn more] of the card.

Adding the area card to a dashboard

1. In the top right of the screen, select the edit button.
   • If this is your first time editing a dashboard, the Edit dashboard dialog appears.
     • By editing the dashboard, you are taking over control of this dashboard.
     • This means that it is no longer automatically updated when new dashboard elements become available.
     • Once you’ve taken control, you can’t get this specific dashboard back to update automatically. However, you can create a new default dashboard.
     • To continue, in the dialog, select the three dots menu, then select Take control.
2. Add a card and customize actions and features to your dashboard.

Adding buttons to the area card for controlling devices

You can add buttons to the area card that will allow you to control different devices in that area.

1. Depending on your goal, do one of the following:
   • Assign the area of the card to the device by following the steps in Assigning an area to a device.
   • Assign the area of the card to a group of devices by following the steps in Assigning an area to multiple items.
2. Go to your dashboard and, in the top-right corner, select the button.
3. In the area card that you have previously created, select Edit.
4. Expand the Features section and select Add feature > Area controls.
5. You can also:
   • Define the Features position by selecting Bottom or Inline.
   • Customize controls to add a button for each device or entity, for example.
     1. Select the button next to Area controls.
     2. Turn on Customize controls.
     3. Select Controls and then select the entity from the list.
     4. Select Save.

If you want to control only certain devices that are assigned to an area altogether, you can still use an area card. Create a new area and then follow the previous steps using the new area.

YAML configuration

The following YAML options are available when you use YAML mode or just prefer to use YAML in the code editor in the UI.

Example

Basic example:

type: area
area: bedroom

Complex example

type: area
area: bedroom
display_type: picture
tap_action:
  action: navigate
  navigation_path: /lovelace/my_bedroom
sensor_classes:
  - temperature
  - humidity
alert_classes:
  - moisture
  - motion
features:
  - type: area-controls

Available colors

The following colors are available to colorize the area card: primary, accent, disabled, red, pink, purple, deep-purple, indigo, blue, light-blue, cyan, teal, green, light-green, lime, yellow, amber, orange, deep-orange, brown, grey, blue-grey, black, white, or any hex color code (for example, #93c47d).