Update vertical-stack.markdown (#5675)

* Update vertical-stack.markdown

* removed external image link and corrected page linking

* New line around code blocks.
This commit is contained in:
Jack 2018-07-07 23:02:19 +01:00 committed by Paulus Schoutsen
parent 079f9d5a7b
commit 07de8b175e

View File

@ -2,7 +2,7 @@
layout: page
title: "Vertical Stack Card"
sidebar_label: Vertical Stack
description: "TBD"
description: "The Vertical Stack card allows you to stack multiple cards together"
date: 2018-07-01 10:28 +00:00
sidebar: true
comments: false
@ -10,4 +10,51 @@ sharing: true
footer: true
---
TBD
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/).
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| type | string | **Required** | `vertical-stack`
| cards | list | **Required** | List of cards
**Example**
Basic example
```yaml
- type: vertical-stack
cards:
- type: picture-entity
entity: camera.demo_camera
show_info: false
- type: entities
entities:
- 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>
Example using both a 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
- 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
- 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
```
<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>