Adjust card feature documentation (#30036)

Co-authored-by: c0ffeeca7 <38767475+c0ffeeca7@users.noreply.github.com>

source/_dashboards/humidifier.markdown

@@ -38,6 +38,10 @@ theme:
   required: false
   description: Override the used theme for this card with any loaded theme. For more information about themes, see the [frontend documentation](/integrations/frontend/).
   type: string
+features:
+  required: false
+  description: Additional widgets to control your entity. See [available features](/dashboards/features). Only humidifier related features are supported.
+  type: list
 {% endconfiguration %}
 
 ### Example

source/_dashboards/thermostat.markdown

@@ -8,7 +8,7 @@ description: "The Thermostat card gives control of your climate entity, allowing
 The Thermostat card gives control of your [climate](/integrations/#climate) entity, allowing you to change the temperature and mode of the entity.
 
 <p class='img'>
-  <img src='/images/dashboards/thermostat_card.gif' alt='Screenshot of the thermostat card'>
+  <img src='/images/dashboards/thermostat_card.png' alt='Screenshot of the thermostat card'>
   Screenshot of the Thermostat card.
 </p>
 
@@ -38,6 +38,10 @@ theme:
   required: false
   description: Override the used theme for this card with any loaded theme. For more information about themes, see the [frontend documentation](/integrations/frontend/).
   type: string
+features:
+  required: false
+  description: Additional widgets to control your entity. See [available features](/dashboards/features). Only climate related features are supported.
+  type: list
 {% endconfiguration %}
 
 ### Example

source/_dashboards/tile.markdown

@@ -66,7 +66,7 @@ icon_tap_action:
   type: map
 features:
   required: false
-  description: Additional widgets to control your entity. See [available features](/dashboards/tile/#tile-features).
+  description: Additional widgets to control your entity. See [available features](/dashboards/features).
   type: list
 {% endconfiguration %}
 
@@ -121,332 +121,3 @@ features:
 ## Available color tokens
 
 Some color tokens are available to colorize the tile 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` and `white`.
-
-## Tile features
-
-Some entities have support for "features". These widgets add quick controls to the tile card.
-
-### Alarm modes
-
-Widget that display buttons to arm and disarm an [alarm](/integrations/alarm_control_panel).
-
-<p class='img'>
-  <img src='/images/dashboards/tile-features/alarm_modes.png' alt='Screenshot of the tile card with alarm modes feature'>
-  Screenshot of the tile card with alarm modes feature
-</p>
-
-```yaml
-features:
-  - type: "alarm-modes"
-    modes:
-      - armed_home
-      - armed_away
-      - armed_night
-      - armed_vacation
-      - armed_custom_bypass
-      - disarmed
-```
-
-{% configuration %}
-type:
-  required: true
-  description: "`alarm-modes`"
-  type: string
-modes:
-  required: true
-  description: List of modes to show on the card. The list can contain `armed_home`, `armed_away`, `armed_night`, `armed_vacation`, `armed_custom_bypass` and `disarmed`.
-  type: list
-{% endconfiguration %}
-
-### Climate HVAC modes
-
-Widget that displays buttons to control the HVAC mode for a [climate](/integrations/climate).
-
-<p class='img'>
-  <img src='/images/dashboards/tile-features/climate_hvac_modes.png' alt='Screenshot of the tile card with the climate HVAC modes feature'>
-  Screenshot of the tile card with the climate HVAC modes feature
-</p>
-
-```yaml
-features:
-  - type: "climate-hvac-modes"
-    hvac_modes:
-      - auto
-      - heat_cool
-      - heat
-      - cool
-      - dry
-      - fan_only
-      - "off"
-```
-
-{% configuration %}
-type:
-  required: true
-  description: "`climate-hvac-modes`"
-  type: string
-hvac_modes:
-  required: true
-  description: List of modes to show on the card. The list can contain `auto`, `heat_cool`, `heat`, `cool`, `dry`, `fan_only` and `off`.
-  type: list
-{% endconfiguration %}
-
-### Cover open/close
-
-Widget that displays buttons to open, close, or stop a [cover](/integrations/cover).
-
-<p class='img'>
-  <img src='/images/dashboards/tile-features/cover_open_close.png' alt='Screenshot of the tile card with open/close feature'>
-  Screenshot of the tile card with cover open/close feature
-</p>
-
-```yaml
-features:
-  - type: "cover-open-close"
-```
-
-{% configuration %}
-type:
-  required: true
-  description: "`cover-open-close`"
-  type: string
-{% endconfiguration %}
-
-### Cover position
-
-Widget that displays a slider to control the position for a [cover](/integrations/cover).
-
-<p class='img'>
-  <img src='/images/dashboards/tile-features/cover_position.png' alt='Screenshot of the tile card with the cover position feature'>
-  Screenshot of the tile card with the cover position feature
-</p>
-
-```yaml
-features:
-  - type: "cover-position"
-```
-
-{% configuration %}
-type:
-  required: true
-  description: "`cover-position`"
-  type: string
-{% endconfiguration %}
-
-### Cover tilt
-
-Widget that displays buttons to open, close, or stop a [cover](/integrations/cover).
-
-<p class='img'>
-  <img src='/images/dashboards/tile-features/cover_tilt.png' alt='Screenshot of the tile card with tilt feature'>
-  Screenshot of the tile card with cover tilt feature
-</p>
-
-```yaml
-features:
-  - type: "cover-tilt"
-```
-
-{% configuration %}
-type:
-  required: true
-  description: "`cover-tilt`"
-  type: string
-{% endconfiguration %}
-
-### Cover tilt position
-
-Widget that displays a slider to control the tilt position for a [cover](/integrations/cover).
-
-<p class='img'>
-  <img src='/images/dashboards/tile-features/cover_tilt_position.png' alt='Screenshot of the tile card with the cover tilt position feature'>
-  Screenshot of the tile card with the cover tilt position feature
-</p>
-
-```yaml
-features:
-  - type: "cover-tilt-position"
-```
-
-{% configuration %}
-type:
-  required: true
-  description: "`cover-tilt-position`"
-  type: string
-{% endconfiguration %}
-
-### Fan speed
-
-Widget that displays speed controls for a [fan](/integrations/fan).
-
-<p class='img'>
-  <img src='/images/dashboards/tile-features/fan_speed.png' alt='Screenshot of the tile card with fan speed feature'>
-  Screenshot of the tile card with fan speed feature
-</p>
-
-```yaml
-features:
-  - type: "fan-speed"
-```
-
-{% configuration %}
-type:
-  required: true
-  description: "`fan-speed`"
-  type: string
-{% endconfiguration %}
-
-### Lawn mower commands
-
-Widget that displays buttons to control a [lawn mower](/integrations/lawn_mower).
-
-<p class='img'>
-  <img src='/images/dashboards/tile-features/lawn_mower_commands.png' alt='Screenshot of the tile card with the lawn mower commands feature'>
-  Screenshot of the tile card with the lawn mower commands feature
-</p>
-
-```yaml
-features:
-  - type: "lawn-mower-commands"
-    commands:
-      - start_pause
-      - dock
-```
-
-{% configuration %}
-type:
-  required: true
-  description: "`lawn-mower-commands`"
-  type: string
-commands:
-  required: true
-  description: List of commands to show on the card. The list can contain `start_pause` and `dock`.
-  type: list
-{% endconfiguration %}
-
-### Light brightness
-
-Widget that displays a slider to select the brightness for a [light](/integrations/light).
-
-<p class='img'>
-  <img src='/images/dashboards/tile-features/light_brightness.png' alt='Screenshot of the tile card with light brightness feature'>
-  Screenshot of the tile card with light brightness feature
-</p>
-
-```yaml
-features:
-  - type: "light-brightness"
-```
-
-{% configuration %}
-type:
-  required: true
-  description: "`light-brightness`"
-  type: string
-{% endconfiguration %}
-
-### Light color temp
-
-Widget that displays a slider to select the color temperature for a [light](/integrations/light).
-
-<p class='img'>
-  <img src='/images/dashboards/tile-features/light_color_temp.png' alt='Screenshot of the tile card with the light color temperature feature'>
-  Screenshot of the tile card with the light color temperature feature
-</p>
-
-```yaml
-features:
-  - type: "light-color-temp"
-```
-
-{% configuration %}
-type:
-  required: true
-  description: "`light-color-temp`"
-  type: string
-{% endconfiguration %}
-
-### Target temperature
-
-Widget that displays buttons to select the target temperature for a [climate](/integrations/climate) or a [water heater](/integrations/water_heater).
-
-<p class='img'>
-  <img src='/images/dashboards/tile-features/target_temperature.png' alt='Screenshot of the tile card with the target temperature feature'>
-  Screenshot of the tile card with the target temperature feature
-</p>
-
-```yaml
-features:
-  - type: "target-temperature"
-```
-
-{% configuration %}
-type:
-  required: true
-  description: "`target-temperature`"
-  type: string
-{% endconfiguration %}
-
-### Vacuum commands
-
-Widget that displays buttons to control a [vacuum](/integrations/vacuum).
-
-<p class='img'>
-  <img src='/images/dashboards/tile-features/vacuum_commands.png' alt='Screenshot of the tile card with vacuum commands feature'>
-  Screenshot of the tile card with vacuum commands feature
-</p>
-
-```yaml
-features:
-  - type: "vacuum-commands"
-    commands:
-      - start_pause
-      - stop
-      - clean_spot
-      - locate
-      - return_home
-```
-
-{% configuration %}
-type:
-  required: true
-  description: "`vacuum-commands`"
-  type: string
-commands:
-  required: true
-  description: List of commands to show on the card. The list can contain `start_pause`, `stop`, `clean_spot`, `locate` and `return_home`.
-  type: list
-{% endconfiguration %}
-
-### Water heater operation modes
-
-Widget that displays buttons to control the operation mode of a [water heater](/integrations/water_heater).
-
-<p class='img'>
-  <img src='/images/dashboards/tile-features/water_heater_operation_modes.png' alt='Screenshot of the tile card with the water heater operation modes feature'>
-  Screenshot of the tile card with the water heater operation modes feature
-</p>
-
-```yaml
-features:
-  - type: "water-heater-operation-modes"
-    operation_modes:
-      - electric
-      - gas
-      - heat_pump
-      - eco
-      - performance
-      - high_demand
-      - "off"
-```
-
-{% configuration %}
-type:
-  required: true
-  description: "`water-heater-operation-modes`"
-  type: string
-operation_modes:
-  required: true
-  description: List of modes to show on the card. The list can contain `electric`, `gas`, `heat_pump`, `eco`, `performance`, `high_demand` and `off`.
-  type: list
-{% endconfiguration %}

source/_includes/asides/dashboards_navigation.html

@@ -45,6 +45,7 @@
   <div class="section">
     <h1 class="title delta">Advanced</h1>
     <ul class="divided sidebar-menu">
+      <li>{% active_link /dashboards/features/ Features %}</li>
       <li>{% active_link /dashboards/header-footer/ Headers & Footers %}</li>
       <li>{% active_link /dashboards/actions/ Actions %}</li>
       <li>

source/dashboards/features.markdown

@@ -0,0 +1,356 @@
+---
+title: "Features for dashboard cards"
+description: "Decorate your dashboard cards with quick controls."
+---
+
+Some dashboard cards have support for features. These widgets add quick controls to the card. Supported features depend on the card and entity capabilities. Multiple features can be added to a single card.
+
+<p class='img'><img src='/images/dashboards/features/screenshot-tile-feature-grid.png' alt="Screenshot of tile cards with features.">
+Screenshot of tile cards with features.
+</p>
+
+## Alarm modes
+
+Widget that displays buttons to arm and disarm an [alarm](/integrations/alarm_control_panel).
+
+<p class='img'>
+  <img src='/images/dashboards/features/alarm_modes.png' alt='Screenshot of the tile card with alarm modes feature'>
+  Screenshot of the tile card with alarm modes feature
+</p>
+
+```yaml
+features:
+  - type: "alarm-modes"
+    modes:
+      - armed_home
+      - armed_away
+      - armed_night
+      - armed_vacation
+      - armed_custom_bypass
+      - disarmed
+```
+
+{% configuration features %}
+type:
+  required: true
+  description: "`alarm-modes`"
+  type: string
+modes:
+  required: true
+  description: List of modes to show on the card. The list can contain `armed_home`, `armed_away`, `armed_night`, `armed_vacation`, `armed_custom_bypass`, and `disarmed`.
+  type: list
+{% endconfiguration %}
+
+## Climate HVAC modes
+
+Widget that displays buttons to control the HVAC mode for a [climate](/integrations/climate).
+
+<p class='img'>
+  <img src='/images/dashboards/features/climate_hvac_modes.png' alt='Screenshot of the tile card with the climate HVAC modes feature'>
+  Screenshot of the tile card with the climate HVAC modes feature
+</p>
+
+```yaml
+features:
+  - type: "climate-hvac-modes"
+    hvac_modes:
+      - auto
+      - heat_cool
+      - heat
+      - cool
+      - dry
+      - fan_only
+      - "off"
+```
+
+{% configuration features %}
+type:
+  required: true
+  description: "`climate-hvac-modes`"
+  type: string
+hvac_modes:
+  required: true
+  description: List of modes to show on the card. The list can contain `auto`, `heat_cool`, `heat`, `cool`, `dry`, `fan_only`, and `off`.
+  type: list
+{% endconfiguration %}
+
+## Cover open/close
+
+Widget that displays buttons to open, close, or stop a [cover](/integrations/cover).
+
+<p class='img'>
+  <img src='/images/dashboards/features/cover_open_close.png' alt='Screenshot of the tile card with open/close feature'>
+  Screenshot of the tile card with cover open/close feature
+</p>
+
+```yaml
+features:
+  - type: "cover-open-close"
+```
+
+{% configuration features %}
+type:
+  required: true
+  description: "`cover-open-close`"
+  type: string
+{% endconfiguration %}
+
+## Cover position
+
+Widget that displays a slider to control the position for a [cover](/integrations/cover).
+
+<p class='img'>
+  <img src='/images/dashboards/features/cover_position.png' alt='Screenshot of the tile card with the cover position feature'>
+  Screenshot of the tile card with the cover position feature
+</p>
+
+```yaml
+features:
+  - type: "cover-position"
+```
+
+{% configuration features %}
+type:
+  required: true
+  description: "`cover-position`"
+  type: string
+{% endconfiguration %}
+
+## Cover tilt
+
+Widget that displays buttons to open, close, or stop a [cover](/integrations/cover).
+
+<p class='img'>
+  <img src='/images/dashboards/features/cover_tilt.png' alt='Screenshot of the tile card with tilt feature'>
+  Screenshot of the tile card with cover tilt feature
+</p>
+
+```yaml
+features:
+  - type: "cover-tilt"
+```
+
+{% configuration features %}
+type:
+  required: true
+  description: "`cover-tilt`"
+  type: string
+{% endconfiguration %}
+
+## Cover tilt position
+
+Widget that displays a slider to control the tilt position for a [cover](/integrations/cover).
+
+<p class='img'>
+  <img src='/images/dashboards/features/cover_tilt_position.png' alt='Screenshot of the tile card with the cover tilt position feature'>
+  Screenshot of the tile card with the cover tilt position feature
+</p>
+
+```yaml
+features:
+  - type: "cover-tilt-position"
+```
+
+{% configuration features %}
+type:
+  required: true
+  description: "`cover-tilt-position`"
+  type: string
+{% endconfiguration %}
+
+## Fan speed
+
+Widget that displays speed controls for a [fan](/integrations/fan).
+
+<p class='img'>
+  <img src='/images/dashboards/features/fan_speed.png' alt='Screenshot of the tile card with fan speed feature'>
+  Screenshot of the tile card with fan speed feature
+</p>
+
+```yaml
+features:
+  - type: "fan-speed"
+```
+
+{% configuration features %}
+type:
+  required: true
+  description: "`fan-speed`"
+  type: string
+{% endconfiguration %}
+
+## Humidifier modes
+
+Widget that displays buttons to control the mode for a [humidifier](/integrations/humidifier).
+
+<p class='img'>
+  <img src='/images/dashboards/features/humidifier_modes.png' alt='Screenshot of the tile card with the humidifier modes feature'>
+  Screenshot of the tile card with the humidifier modes feature
+</p>
+
+```yaml
+features:
+  - type: "humidifier-modes"
+```
+
+{% configuration features %}
+type:
+  required: true
+  description: "`humidifier-modes`"
+  type: string
+{% endconfiguration %}
+
+## Lawn mower commands
+
+Widget that displays buttons to control a [lawn mower](/integrations/lawn_mower).
+
+<p class='img'>
+  <img src='/images/dashboards/features/lawn_mower_commands.png' alt='Screenshot of the tile card with the lawn mower commands feature'>
+  Screenshot of the tile card with the lawn mower commands feature
+</p>
+
+```yaml
+features:
+  - type: "lawn-mower-commands"
+    commands:
+      - start_pause
+      - dock
+```
+
+{% configuration features %}
+type:
+  required: true
+  description: "`lawn-mower-commands`"
+  type: string
+commands:
+  required: true
+  description: List of commands to show on the card. The list can contain `start_pause` and `dock`.
+  type: list
+{% endconfiguration %}
+
+## Light brightness
+
+Widget that displays a slider to select the brightness for a [light](/integrations/light).
+
+<p class='img'>
+  <img src='/images/dashboards/features/light_brightness.png' alt='Screenshot of the tile card with light brightness feature'>
+  Screenshot of the tile card with light brightness feature
+</p>
+
+```yaml
+features:
+  - type: "light-brightness"
+```
+
+{% configuration features %}
+type:
+  required: true
+  description: "`light-brightness`"
+  type: string
+{% endconfiguration %}
+
+## Light color temp
+
+Widget that displays a slider to select the color temperature for a [light](/integrations/light).
+
+<p class='img'>
+  <img src='/images/dashboards/features/light_color_temp.png' alt='Screenshot of the tile card with the light color temperature feature'>
+  Screenshot of the tile card with the light color temperature feature
+</p>
+
+```yaml
+features:
+  - type: "light-color-temp"
+```
+
+{% configuration features %}
+type:
+  required: true
+  description: "`light-color-temp`"
+  type: string
+{% endconfiguration %}
+
+## Target temperature
+
+Widget that displays buttons to select the target temperature for a [climate](/integrations/climate) or a [water heater](/integrations/water_heater).
+
+<p class='img'>
+  <img src='/images/dashboards/features/target_temperature.png' alt='Screenshot of the tile card with the target temperature feature'>
+  Screenshot of the tile card with the target temperature feature
+</p>
+
+```yaml
+features:
+  - type: "target-temperature"
+```
+
+{% configuration features %}
+type:
+  required: true
+  description: "`target-temperature`"
+  type: string
+{% endconfiguration %}
+
+## Vacuum commands
+
+Widget that displays buttons to control a [vacuum](/integrations/vacuum).
+
+<p class='img'>
+  <img src='/images/dashboards/features/vacuum_commands.png' alt='Screenshot of the tile card with vacuum commands feature'>
+  Screenshot of the tile card with vacuum commands feature
+</p>
+
+```yaml
+features:
+  - type: "vacuum-commands"
+    commands:
+      - start_pause
+      - stop
+      - clean_spot
+      - locate
+      - return_home
+```
+
+{% configuration features %}
+type:
+  required: true
+  description: "`vacuum-commands`"
+  type: string
+commands:
+  required: true
+  description: List of commands to show on the card. The list can contain `start_pause`, `stop`, `clean_spot`, `locate`, and `return_home`.
+  type: list
+{% endconfiguration %}
+
+## Water heater operation modes
+
+Widget that displays buttons to control the operation mode of a [water heater](/integrations/water_heater).
+
+<p class='img'>
+  <img src='/images/dashboards/features/water_heater_operation_modes.png' alt='Screenshot of the tile card with the water heater operation modes feature'>
+  Screenshot of the tile card with the water heater operation modes feature
+</p>
+
+```yaml
+features:
+  - type: "water-heater-operation-modes"
+    operation_modes:
+      - electric
+      - gas
+      - heat_pump
+      - eco
+      - performance
+      - high_demand
+      - "off"
+```
+
+{% configuration features %}
+type:
+  required: true
+  description: "`water-heater-operation-modes`"
+  type: string
+operation_modes:
+  required: true
+  description: List of modes to show on the card. The list can contain `electric`, `gas`, `heat_pump`, `eco`, `performance`, `high_demand`, and `off`.
+  type: list
+{% endconfiguration %}