Add view header (#37813)

* Add view header documentation

* Update source/_dashboards/sections.markdown

* Update source/_dashboards/sections.markdown

* Tiny tweaks

---------

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

source/_dashboards/sections.markdown

@@ -40,9 +40,24 @@ You can group cards without using horizontal or vertical stack cards.
    - You are now presented with a new, empty view.
    - If you chose a background image, the page is filled with that image.
 
+Once you have created a sections view, you can populate it sections and cards. You can also add a header with a title and badges.
+
+## Editing the header
+
+<p class='img'>
+  <img src="/images/dashboards/sections_view_header_edit.png" alt="Editing the header"/>
+  Editing the header
+</p>
+
+1. To add a title, select the **Add title** button. The title supports [Markdown](https://commonmark.org/help/) and [templating](/docs/configuration/templating/).
+2. To add badges, elect the **Add badge** button. Follow [steps on adding badges](/dashboards/badges) to see the different possible options.
+3. To change the title and badges disposition, select the edit {% icon "mdi:edit" %} button to access header settings.
+
+![Edit view heading section button](/images/dashboards/sections_view_header_editor.png)
+
 ## Adding sections and cards to a sections view
 
-Once you have created a sections view, you can populate it with sections and cards. The new section comes with one section to which you can directly add a card.
+The view comes with one section to which you can directly add a card.
 
 1. To add a card, select the **Add card** button.
    - Follow the [steps on adding cards](/dashboards/cards/#adding-cards-to-your-dashboard).
@@ -109,3 +124,22 @@ type:
   description: "`sections`"
   type: string
 {% endconfiguration %}
+
+## Header YAML configuration
+
+{% configuration %}
+layout:
+  required: false
+  description: Layout of the different elements. Can be `start`, `center`, or `responsive`. `responsive` is the same as `start` on mobile devices. It places badges and title side by side on desktop.
+  type: string
+  default: center
+badges_position:
+  required: false
+  description: Badges position. Can be `bottom` or `top`.
+  type: string
+  default: bottom
+card:
+  required: true
+  description: Card to be used as title. If you are configuring the view using the visual editor, the configuration of the [Markdown card](/dashboards/markdown) is used.
+  type: map
+{% endconfiguration %}