diff --git a/source/_dashboards/area.markdown b/source/_dashboards/area.markdown
index 13d009bdb0d..c5d94f4e753 100644
--- a/source/_dashboards/area.markdown
+++ b/source/_dashboards/area.markdown
@@ -17,8 +17,8 @@ related:
The area card lets you control and monitor an individual {% term area %}.
-
- Screenshot of the area card.
+
+ Screenshot of the area cards.
{% include dashboard/edit_dashboard.md %}
@@ -42,14 +42,14 @@ area:
required: true
description: ID of the `area`.
type: string
-show_camera:
+display_type:
required: false
- description: Changes the area picture to a live feed of the camera set for the area.
- type: boolean
- default: false
+ description: Defines the card's display style. Options include `compact` (a minimal layout), `icon` (shows an area icon), `picture` (displays an image of the area), or `camera` (shows the live camera feed).
+ type: string
+ default: "picture"
camera_view:
required: false
- description: 'If showing a camera, "live" will show the live view if `stream` is enabled.'
+ description: 'If showing a camera, `live` will show the live view if `stream` is enabled.'
default: auto
type: string
aspect_ratio:
@@ -69,12 +69,21 @@ alert_classes:
required: false
type: list
default: "moisture, motion"
- description: A list of binary sensor device classes which will populate alert icons in the card when the state is on.
+ description: A list of binary sensor device classes which will populate alert icons in the card when the state is on. If the display type is set to `compact`, only the first alert icon will be displayed.
sensor_classes:
required: false
type: list
default: "temperature, humidity"
- description: A list of sensor device classes which will display their averaged sensor readings for the area.
+ description: A list of sensor device classes which will display their averaged sensor readings for the area.
+features:
+ required: false
+ description: Additional widgets to control entities in the area. See [available features](/dashboards/features).
+ type: list
+features_position:
+ required: false
+ description: Position of the features on the area card. Can be `bottom` or `inline`. Only the first feature will be displayed when the option is set to `inline`.
+ type: string
+ default: bottom
{% endconfiguration %}
### Example
diff --git a/source/dashboards/features.markdown b/source/dashboards/features.markdown
index 46af70a75c1..fd2461d1246 100644
--- a/source/dashboards/features.markdown
+++ b/source/dashboards/features.markdown
@@ -21,6 +21,7 @@ Features can be enabled on the following cards:
- [Humidifier](/dashboards/humidifier/)
- [Thermostat](/dashboards/thermostat/)
- [Tile](/dashboards/tile/)
+- [Area](/dashboards/area/)
## Customizing features
@@ -720,3 +721,31 @@ operation_modes:
type: list
{% endconfiguration %}
+## Area control
+
+Widget that displays buttons to control different types of entity in your area.
+
+
+
+ Screenshot of the area card with the area controls feature
+
+
+```yaml
+features:
+ - type: "area-controls"
+ controls:
+ - light
+ - fan
+ - switch
+```
+
+{% configuration features %}
+type:
+ required: true
+ description: "`area-controls`"
+ type: string
+controls:
+ required: true
+ description: List of controls to show on the card. The list can contain `light`, `fan`, and `switch`.
+ type: list
+{% endconfiguration %}
diff --git a/source/images/dashboards/area-card.png b/source/images/dashboards/area-card.png
deleted file mode 100644
index be3c0358b3e..00000000000
Binary files a/source/images/dashboards/area-card.png and /dev/null differ
diff --git a/source/images/dashboards/area-cards.png b/source/images/dashboards/area-cards.png
new file mode 100644
index 00000000000..c01e602650d
Binary files /dev/null and b/source/images/dashboards/area-cards.png differ
diff --git a/source/images/dashboards/features/area_controls.png b/source/images/dashboards/features/area_controls.png
new file mode 100644
index 00000000000..30033276ac0
Binary files /dev/null and b/source/images/dashboards/features/area_controls.png differ