Vertical Stack In Card

Vertical Stack In Card allows you to group multiple cards in one card.

Please ⭐️ this repo if you find it useful

Options

Name	Type	Default	Description
type	string	Required	custom:vertical-stack-in-card
cards	list	Required	List of cards
title	string	Optional	Card title
horizontal	boolean	Optional	Default: false
styles	object	Optional	Adds custom CSS directives to child cards

Installation

1. Download the card

Install the vertical-stack-in-card card by copying vertical-stack-in-card.js to <config directory>/www/vertical-stack-in-card.js

Bash:

wget https://raw.githubusercontent.com/ofekashery/vertical-stack-in-card/master/vertical-stack-in-card.js
mv vertical-stack-in-card.js /config/www/

2. Link the card to your lovelace ui

The manual way:

Link vertical-stack-in-card inside your ui-lovelace.yaml

resources:
  - url: /local/vertical-stack-in-card.js?v=0.4.4
    type: js

Through the GUI:

Alternatively, with Home Assistant 2021.3 or later, click this button: . That will bring up the GUI for Resources. Click the Plus to add a new resource. The url is the path to your downloaded file. Replace <config directory>/www/ with /local/.

.

Finish by clicking "Create" and refresh your browser

3. Use the card somehere.

Add a custom card in your ui-lovelace.yaml

Example

type: 'custom:vertical-stack-in-card'
title: My Card
cards:
  - type: glance
    entities:
      - sensor.temperature_sensor
      - sensor.humidity_sensor
      - sensor.motion_sensor
  - type: entities
    entities:
      - switch.livingroom_tv
      - entity: script.livingroom_receiver
        name: Receiver
      - switch.livingroom_ac

Credits

• ofekashery
• ciotlosm
• thomasloven