From 595401a32d5f9b80204dd7f0f0919170a95dda03 Mon Sep 17 00:00:00 2001
From: c727 <crusader727@gmx.de>
Date: Thu, 12 Jul 2018 22:25:59 +0200
Subject: [PATCH] Lovelace: correct vertical stack (#5756)

* Lovelace: correct vertical stack

* Change wording
---
 source/_lovelace/vertical-stack.markdown | 41 ++++++++----------------
 1 file changed, 13 insertions(+), 28 deletions(-)

diff --git a/source/_lovelace/vertical-stack.markdown b/source/_lovelace/vertical-stack.markdown
index 49349d51c9e..d88f7f246ef 100644
--- a/source/_lovelace/vertical-stack.markdown
+++ b/source/_lovelace/vertical-stack.markdown
@@ -10,9 +10,7 @@ sharing: true
 footer: true
 ---
 
-Stack card will allow you to stack together multiple cards so they always sit together in the same column one on top of the other. Keep in mind this can be used with any cards and even used alongside a [horizontal-stack](/lovelace/horizontal-stack/).
-
-## {% linkable_title Options %}
+Vertical stack allows you to group multiple cards so they always sit in the same column.
 
 {% configuration %}
 type:
@@ -21,24 +19,11 @@ type:
   type: string
 cards:
   required: true
-  description: List of cards
+  description: List of cards.
   type: list
-  keys:
-    type:
-      required: true
-      description: The type of the card to stack.
-      type: string
-    entity:
-      required: true
-      description: "An `entity_id` to use in the frontend."
-      type: string
-    image:
-      required: true
-      description: The URL to an image.
-      type: string
 {% endconfiguration %}
 
-## {% linkable_title Example %}
+### {% linkable_title Examples %}
 
 Basic example:
 
@@ -53,30 +38,30 @@ Basic example:
         - binary_sensor.movement_backyard
 ```
 
-<p class='img'>
-<img src='/images/lovelace/lovelace_vertical-stack.png' alt='Screenshot of the vertical stack card'>
-Screenshot of the vertical stack card.
+<p class="img">
+  <img src="/images/lovelace/lovelace_vertical-stack.png" alt="Picture- and entities-card in a stack">
+  Picture- and entities-card in a stack.
 </p>
 
-Example using both a vertical and horizontal stack card:
+Combination of vertical and horizontal stack card:
 
 ```yaml
 - type: vertical-stack
   cards:
     - type: picture-entity
       entity: group.all_lights
-      image:  https://images.pexels.com/photos/106399/pexels-photo-106399.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260
+      image:  /local/house.png
     - type: horizontal-stack
       cards:
         - type: picture-entity
-          image: https://images.pexels.com/photos/164595/pexels-photo-164595.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=240&w=495
           entity: light.ceiling_lights
+          image: /local/bed_1.png
         - type: picture-entity
-          image: https://images.pexels.com/photos/545012/pexels-photo-545012.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=240&w=495
           entity: light.bed_light
+          image: /local/bed_2.png
 ```
 
-<p class='img'>
-<img src='/images/lovelace/lovelace_vertical-horizontal-stack.png' alt='Screenshot of the vertical stack and horizontal stack combined in a card'>
-Screenshot of the vertical stack and horizontal stack combined in a card.
+<p class="img">
+  <img src="/images/lovelace/lovelace_vertical-horizontal-stack.png" alt="Create a grid layout using vertical and horizontal stack">
+  Create a grid layout using vertical and horizontal stack.
 </p>