Is Horizontal Stack Card What I Need

Configuration Frontend
1

Hi,

What type of card would allow me to displays like shown in the image below? Also would like greater flexibility with where the on/off switch is placed, if that is possible. Right now just using an entity card. Horizontal stack card be what am I looking for or not?

image
image1050×205 14.8 KB

2

Try horizontal stack card, of course. Then you will find out what else should be tuned in this view (like removing gaps, borders etc) - then you will be advised what to do next )))

3

I did try the layout card after messing around with horizontal card, but it was late last night. It was showing multiple small cards for each respective switch\light as opposed to a single card. Got frustrated with the look of it. I will paste the code for it, but it won’t be until later tonight. Sorry code and screenshot was not included in original posting.

4

So this is what I end up multiple cards horizontally - also I don’t even see the switch to toggle things off\on. Was hoping for a single card of some card with a cleaner look - not as big and little wider

type: custom:layout-card
layout: horizontal
max_items: 4 
cards:
  - type: entity
    entity: light.living_room_lights
    name: Living Room Lights
  - type: entity
    entity: light.dining_room_lights
    name: Dining Room Lights
  - type: entity
    entity: light.kitchen_lights
    name: Kitchen Lights
  - type: entity
    entity: light.main_bedroom_light
    name: Main Bedroom Light
  - type: entity
    entity: light.blue_bedroom_light
    name: Blue Bedroom Light
  - type: entity
    entity: switch.hallway_lights
    name: Hallway Lights
  - type: entity
    entity: switch.laundry_light
    name: Laundry Light
  - type: entity
    entity: switch.basement_lights
    name: Basement Lights
  - type: entity
    entity: switch.brians_office_main_lights
    name: Brian's Office Lights
  - type: entity
    entity: switch.front_entry_way_front_door_lights
    name: Front Entry Way Lights
  - type: entity
    entity: switch.back_door_light
    name: Back Door Light

image

what I have now is fairly neat in vertical but just taking up too much space. just want this in horizontal view
image

5
  1. If you wish to use the Entity card - note that titles in your screenshot are clipped, not nice. Try reducing number of columns. Or try using a stock Grid card with “square= false” and “columns=2”.
  2. If you wish to use the Entities card - try with horizontal stack. Note what you dislike in this look, next step yo will be taught how to fix it.
6

Been messing around with this and am close for what I want. Just can’t seem to get an overall border, but that said I could live with what I have

layout: grid
gridrows: auto
gridcolumns: 4
styles:
  grid:
    - grid-gap: 4px
  card:
    - background: rgba(255, 255, 255, 0.1)
    - border: 2px solid
    - border-radius: 8px
    - box-shadow: none
    - padding: 10px
    - width: 100%
cards:
  - type: custom:button-card
    entity: light.living_room_lights
    name: Living Room
    show_state: false
    show_icon: true
    show_name: true
    styles:
      card:
        - border: none
        - box-shadow: none
        - border-radius: 0px
        - background: transparent
        - margin-right: "-8px"
      icon:
        - width: 30px
        - height: 30px
      name:
        - font-size: 12px
  - type: custom:button-card
    entity: light.dining_room_lights
    name: Dining Room
    show_state: false
    show_icon: true
    show_name: true
    styles:
      card:
        - border: none
        - box-shadow: none
        - border-radius: 0px
        - background: transparent
        - margin-right: "-8px"
      icon:
        - width: 30px
        - height: 30px
      name:
        - font-size: 12px
  - type: custom:button-card
    entity: light.kitchen_lights
    name: Kitchen
    show_state: false
    show_icon: true
    show_name: true
    styles:
      card:
        - border: none
        - box-shadow: none
        - border-radius: 0px
        - background: transparent
        - margin-right: "-8px"
      icon:
        - width: 30px
        - height: 30px
      name:
        - font-size: 12px
  - type: custom:button-card
    entity: light.main_bedroom_light
    name: Main Bedroom
    show_state: false
    show_icon: true
    show_name: true
    styles:
      card:
        - border: none
        - box-shadow: none
        - border-radius: 0px
        - background: transparent
        - margin-right: "-8px"
      icon:
        - width: 30px
        - height: 30px
      name:
        - font-size: 12px
  - type: custom:button-card
    entity: light.blue_bedroom_light
    name: Blue Bedroom
    show_state: false
    show_icon: true
    show_name: true
    styles:
      card:
        - border: none
        - box-shadow: none
        - border-radius: 0px
        - background: transparent
        - margin-right: "-8px"
      icon:
        - width: 30px
        - height: 30px
      name:
        - font-size: 12px
  - type: custom:button-card
    entity: switch.hallway_lights
    name: Hallway
    show_state: false
    show_icon: true
    show_name: true
    styles:
      card:
        - border: none
        - box-shadow: none
        - border-radius: 0px
        - background: transparent
        - margin-right: "-8px"
      icon:
        - width: 30px
        - height: 30px
      name:
        - font-size: 12px
  - type: custom:button-card
    entity: switch.laundry_light
    name: Laundry
    show_state: false
    show_icon: true
    show_name: true
    styles:
      card:
        - border: none
        - box-shadow: none
        - border-radius: 0px
        - background: transparent
        - margin-right: "-8px"
      icon:
        - width: 30px
        - height: 30px
      name:
        - font-size: 12px
  - type: custom:button-card
    entity: switch.basement_lights
    name: Basement
    show_state: false
    show_icon: true
    show_name: true
    styles:
      card:
        - border: none
        - box-shadow: none
        - border-radius: 0px
        - background: transparent
        - margin-right: "-8px"
      icon:
        - width: 30px
        - height: 30px
      name:
        - font-size: 12px
  - type: custom:button-card
    entity: switch.brians_office_main_lights
    name: Brian's Office
    show_state: false
    show_icon: true
    show_name: true
    styles:
      card:
        - border: none
        - box-shadow: none
        - border-radius: 0px
        - background: transparent
        - margin-right: "-8px"
      icon:
        - width: 30px
        - height: 30px
      name:
        - font-size: 12px
  - type: custom:button-card
    entity: switch.front_entry_way_front_door_lights
    name: Front Entry Way
    show_state: false
    show_icon: true
    show_name: true
    styles:
      card:
        - border: none
        - box-shadow: none
        - border-radius: 0px
        - background: transparent
        - margin-right: "-8px"
      icon:
        - width: 30px
        - height: 30px
      name:
        - font-size: 12px
  - type: custom:button-card
    entity: switch.back_door_light
    name: Back Entry Way
    show_state: false
    show_icon: true
    show_name: true
    styles:
      card:
        - border: none
        - box-shadow: none
        - border-radius: 0px
        - background: transparent
        - margin-right: "-8px"
      icon:
        - width: 30px
        - height: 30px
      name:
        - font-size: 12px
  - type: custom:button-card
    entity: switch.back_yard_back_yard_light
    name: Back Yard
    show_state: false
    show_icon: true
    show_name: true
    styles:
      card:
        - border: none
        - box-shadow: none
        - border-radius: 0px
        - background: transparent
        - margin-right: "-8px"
      icon:
        - width: 30px
        - height: 30px
      name:
        - font-size: 12px

image