Add heading card (#34978)

* Add heading card

* Add colors

* arrow => chevron

* Update heading badges

* Update source/_dashboards/sections.markdown

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* Apply suggestions from code review

* Update source/_dashboards/heading.markdown

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: c0ffeeca7 <38767475+c0ffeeca7@users.noreply.github.com>

source/_dashboards/heading.markdown

@@ -0,0 +1,111 @@
+---
+type: card
+title: "Heading card"
+sidebar_label: Heading
+description: "The Heading card structures your dashboard by providing title, icon, navigation and badges."
+related:
+  - docs: /dashboards/actions/
+    title: Card actions
+  - docs: /dashboards/cards/
+    title: Dashboard cards
+---
+
+The Heading card structures your dashboard by providing title, icon and navigation. This card supports [actions](/dashboards/actions/).
+
+<p class='img'>
+  <img src='/images/dashboards/heading_card.png' alt='Screenshot of heading cards'>
+  Screenshot of a heading card with a title, badges, and a subtitle.
+</p>
+
+```yaml
+type: heading
+heading: Living room
+icon: mdi:sofa
+badges:
+  - type: entity
+    entity_id: sensor.living_room_sensor_temperature
+    color: red
+  - type: entity
+    entity_id: sensor.living_room_sensor_humidity
+    color: deep-purple
+```
+
+{% configuration entity %}
+type:
+  required: true
+  description: "`heading`"
+  type: string
+heading:
+  required: false
+  description: Heading text
+  type: string
+heading_style:
+  required: false
+  description: Style of the heading. Can be either  `title` or `subtitle`.
+  type: string
+  default: title
+icon:
+  required: false
+  description: Icon displayed before the heading text.
+  type: string
+tap_action:
+  required: false
+  description: Action taken on card tap. See [action documentation](/dashboards/actions/#tap-action). By default, it will do nothing. If an action is configured, a chevron will appear next to the heading text.
+  type: map
+badges:
+  required: false
+  description: Additional small badges to display entity information. See [heading badges](/dashboards/heading/#heading-badges).
+  type: list
+{% endconfiguration %}
+
+## Heading badges
+
+In addition to the heading text, each heading card can show small badges. They are smaller than regular [badges](/dashboards/badges/) and don't have a background. The heading badges can display sensor information in a compact and minimal style.
+
+```yaml
+type: entity
+entity: light.living_room
+```
+
+{% configuration entity %}
+type:
+  required: true
+  description: "`entity`"
+  type: string
+entity:
+  required: true
+  description: Entity ID.
+  type: string
+name:
+  required: false
+  description: Overwrites the entity name. The name will be only displayed if `state_content` includes `name` token.
+  type: string
+icon:
+  required: false
+  description: Overwrites the entity icon.
+  type: string
+color:
+  required: false
+  description: Set the color when the entity is active. By default, it will not be colored. It can be set to the `state` special token to dynamically color the icon based on `state`, `domain`, and `device_class` of your entity. It also accepts [color token](/dashboards/tile/#available-colors) or hex color code.
+  type: string
+  default: none
+show_icon:
+  required: false
+  description: Show the icon
+  type: boolean
+  default: "true"
+show_state:
+  required: false
+  description: Show the state.
+  type: boolean
+  default: "false"
+state_content:
+  required: false
+  description: >
+    Content to display for the state. Can be `state`, `name`, `last_changed`, `last_updated`, or any attribute of the entity. Can be either a string with a single item, or a list of string items. Default depends on the entity domain.
+  type: [string, list]
+tap_action:
+  required: false
+  description: Action taken on card tap. See [action documentation](/dashboards/actions/#tap-action). By default, it will do nothing.
+  type: map
+{% endconfiguration %}

source/_dashboards/sections.markdown

@@ -52,8 +52,10 @@ Once you have created a sections view, you can populate it with sections and car
     ![Add Section button](/images/dashboards/sections_view_add-card-or-section.png)
 
 2. To add a new section, select the **Create section** button.
-3. To edit the section title, select the edit {% icon "mdi:edit" %} button.
-   - If you leave the section title empty, this line will be hidden.
+3. A [heading card](/dashboards/heading) will be automatically added to the top of the section.
+   - To edit it, select the card.
+   - If you don't want a heading title at the top of the section,  delete this card.
+   - The title can be added again later, like any other card.
 4. If you want this section to be visible only to specific users or under a certain condition, you can define those conditions:
    - On the **Visibility** tab, select **Add condition**.
    - Select the type of condition, and enter the parameters.