Skip to content

Lovelace: Update horiz stack #5764

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
arsaboo merged 1 commit into from
Jul 11, 2018
Merged

Lovelace: Update horiz stack #5764

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 6 additions & 19 deletions source/_lovelace/horizontal-stack.markdown
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@
layout: page
title: "Horizontal Stack Card"
sidebar_label: Horizontal Stack
description: "Horizontal stack card will allow you to stack together multiple cards so they always sit next to each other in the space of one column."
description: "Horizontal stack card allows you to stack together multiple cards, so they always sit next to each other in the space of one column."
date: 2018-07-01 10:28 +00:00
sidebar: true
comments: false
sharing: true
footer: true
---

Horizontal stack card will allow you to stack together multiple cards, so they always sit next to each other in the space of one column.
Horizontal stack card allows you to stack together multiple cards, so they always sit next to each other in the space of one column.

{% configuration %}
type:
Expand All @@ -21,19 +21,6 @@ cards:
required: true
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 %}
Expand All @@ -42,14 +29,14 @@ cards:
- 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
image: /local/bed_1.png
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
image: /local/bed_2.png
entity: light.bed_light
```

<p class='img'>
<img src='/images/lovelace/lovelace_horizontal_stack.PNG' alt='Screenshot of the 2 cards in a horizontal stack card'>
Screenshot of the 2 cards in a horizontal stack card.
<img src='/images/lovelace/lovelace_horizontal_stack.PNG' alt='Two picture cards in a horizontal stack card'>
Two picture cards in a horizontal stack card.
</p>