Vertical cover card

Share your Projects! Dashboards & Frontend
1

Hi,
Perhaps someone already did that - I am looking for vertical cover card, with exact same functionality as regular cover card, but rendered as in the image?vertical_cover

2

Have you looked at the Slider Button Card for HACS?
mattieha/slider-button-card: A button card with integrated slider (github.com)

1 Like
3

This is the one I use

4

To leave a reference option for future users: I use the mushroom cover card and card_mod to arrange the buttons vertically.
image

Here is my code,The code defines the size, position, icon size, and buttons-control for the buttons.:

card_mod:
  style:
    mushroom-cover-buttons-control$:
      mushroom-button:nth-child(1)$: |
        .button {
          --control-icon-size: 50px;
          margin-top: 5px !important;
          margin-left: 10px !important;
          height: 55px !important;
          width: 55px !important;
        }
      mushroom-button:nth-child(2)$: |
        .button {
          --control-icon-size: 52px;
          margin-top: 70px !important;
          margin-left: -20px !important;
          height: 55px !important;
          width: 55px !important;
        }
      mushroom-button:nth-child(3)$: |
        .button {
          --control-icon-size: 50px;
          margin-top: 130px !important;
          margin-left: -51px !important;
          height: 55px !important;
          width: 55px !important;
        }
    .: |
      mushroom-cover-buttons-control {
        height: 180px !important;
      }

https://community.home-assistant.io/t/mushroom-cards-card-mod-styling-config-guide/600472
https://github.com/thomasloven/lovelace-card-mod
https://github.com/piitaya/lovelace-mushroom