diff --git a/source/_dashboards/sections.markdown b/source/_dashboards/sections.markdown index 9e8b8c621f9..c1eff44d04e 100644 --- a/source/_dashboards/sections.markdown +++ b/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 + +

+ Editing the header + Editing the header +

+ +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 %} diff --git a/source/images/dashboards/sections_view_header_edit.png b/source/images/dashboards/sections_view_header_edit.png new file mode 100644 index 00000000000..b0d158be37e Binary files /dev/null and b/source/images/dashboards/sections_view_header_edit.png differ diff --git a/source/images/dashboards/sections_view_header_editor.png b/source/images/dashboards/sections_view_header_editor.png new file mode 100644 index 00000000000..efb9cbd856a Binary files /dev/null and b/source/images/dashboards/sections_view_header_editor.png differ