Vertical Stack In Card

Vertical Stack In Card lets you you to group multiple cards into a single sleek card in the Home Assistant UI.

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

VSIC is available in HACS (Home Assistant Community Store).

1. Download the card

Install the VSIC by copying vertical-stack-in-card.js to <config directory>/www/vertical-stack-in-card.js, or via 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 here. Using My Home Assistant, 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

folke/vertical-stack-in-card