From 708f5da796dc01455de025653c8c63ebccd7124b Mon Sep 17 00:00:00 2001
From: c0ffeeca7 <38767475+c0ffeeca7@users.noreply.github.com>
Date: Tue, 5 Mar 2024 14:12:34 +0100
Subject: [PATCH] Views: add illustration of layout strategies (#31745)

- illustrating the 3 traditional view types
- rephrase section on adding view so that it reads procedural
- add related topics
---
 source/dashboards/views.markdown          |  29 ++++++++++++++++------
 source/images/dashboards/layout-types.png | Bin 0 -> 4437 bytes
 2 files changed, 22 insertions(+), 7 deletions(-)
 create mode 100644 source/images/dashboards/layout-types.png

diff --git a/source/dashboards/views.markdown b/source/dashboards/views.markdown
index 450d138cef6..60b2a8faead 100644
--- a/source/dashboards/views.markdown
+++ b/source/dashboards/views.markdown
@@ -5,19 +5,27 @@ description: "A view is a tab inside a dashboard."
 
 A view is a tab inside a dashboard. Views control the layout.
 
+<p class='img'>
+    <img src='/images/dashboards/layout-types.png' alt='The three basic view layouts: Panel, sidebar, and masonry'>
+    The three basic view layouts: panel, sidebar, and masonry
+</p>
+
 There are four different view types:
 
-- **Masonry (default)**: Arranges cards in columns based on their card size.
-- **Panel**: *Displays one card in full width. For example a map or an image.
+- **Panel**: Displays one card in full width. For example a map or an image.
 - **Sidebar**: Arranges cards in 2 columns, a wide one and a smaller one on the right.
+- **Masonry (default)**: Arranges cards in columns based on their card size.
 - **Sections (experimental)**: Arranges cards in a grid system and lets you group them in sections.
 
-To add a view to your user interface, in the top right corner, select the pencil icon. Then, select the `+` button in the top menu bar.
+## Adding a view to a dashboard
 
-<p class="img">
-  <img src="/images/dashboards/views.png" alt="Views toolbar">
-  Use titles and icons to describe the content of views.
-</p>
+1. To add a view to your user interface, in the top right corner, select the pencil icon.
+2. Then, select the `+` button in the top menu bar.
+
+    <p class="img">
+      <img src="/images/dashboards/views.png" alt="Views toolbar">
+      Use titles and icons to describe the content of views.
+    </p>
 
 ## Path
 
@@ -240,3 +248,10 @@ Subview configuration:
       entities:
         - sensor.today_avg_price
 ```
+
+## Related topics
+
+- [Masonry view](/dashboards/masonry/)
+- [Panel view](/dashboards/panel/)
+- [Sidebar view](/dashboards/sidebar/)
+- [Sections view](/dashboards/sections/)
\ No newline at end of file
diff --git a/source/images/dashboards/layout-types.png b/source/images/dashboards/layout-types.png
new file mode 100644
index 0000000000000000000000000000000000000000..97141c306edd4f4caf13d09bead200d709058a58
GIT binary patch
literal 4437
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

literal 0
HcmV?d00001