Lovelace Card YAML Question

I have 2 cards that I would like to combine into one. If I combine the YAML into one card it makes the icons very small so I guess I need a vertical stack or Vertical Stack In Card? Here is the first one:

cards:
  - icon: 'mdi:arrow-up-bold'
    tap_action:
      action: call-service
      service: remote.send_command
      service_data:
        command: DirectionUp
        device: '41560655'
        entity_id: remote.living_room
    type: 'custom:button-card'
  - icon: 'mdi:arrow-down-bold'
    tap_action:
      action: call-service
      service: remote.send_command
      service_data:
        command: DirectionDown
        device: '41560655'
        entity_id: remote.living_room
    type: 'custom:button-card'
  - icon: 'mdi:arrow-left-bold'
    tap_action:
      action: call-service
      service: remote.send_command
      service_data:
        command: DirectionLeft
        device: '41560655'
        entity_id: remote.living_room
    type: 'custom:button-card'
  - icon: 'mdi:arrow-right-bold'
    tap_action:
      action: call-service
      service: remote.send_command
      service_data:
        command: DirectionRight
        device: '41560655'
        entity_id: remote.living_room
    type: 'custom:button-card'
  - icon: 'mdi:alpha-e-circle'
    tap_action:
      action: call-service
      service: remote.send_command
      service_data:
        command: Ok
        device: '41560655'
        entity_id: remote.living_room
    type: 'custom:button-card'
  - icon: 'mdi:home'
    tap_action:
      action: call-service
      service: remote.send_command
      service_data:
        command: Home
        device: '41560655'
        entity_id: remote.living_room
    type: 'custom:button-card'
type: horizontal-stack

Here is the second one:

cards:
  - icon: 'mdi:volume-plus'
    size: 25%
    tap_action:
      action: call-service
      service: remote.send_command
      service_data:
        command: VolumeUp
        device: '61379924'
        entity_id: remote.living_room
    type: 'custom:button-card'
  - icon: 'mdi:volume-minus'
    size: 25%
    tap_action:
      action: call-service
      service: remote.send_command
      service_data:
        command: VolumeDown
        device: '61379924'
        entity_id: remote.living_room
    type: 'custom:button-card'
  - icon: 'mdi:volume-off'
    size: 25%
    tap_action:
      action: call-service
      service: remote.send_command
      service_data:
        command: Mute
        device: '61379924'
        entity_id: remote.living_room
    type: 'custom:button-card'
  - icon: 'mdi:power-plug-off'
    size: 25%
    tap_action:
      action: call-service
      service: remote.turn_off
      service_data:
        entity_id: remote.living_room
    type: 'custom:button-card'
type: horizontal-stack

I am unsure what you want. Both ā€˜cardsā€™ have multiple cards (every dash is one).

So I guess what Iā€™m wanting then is a row of 6 cards and then below that a row of 4 cards. Currently these are 2 separate ā€œcardsā€.

I think what you mean by card is actually a view (tab).

Cards on views are dynamically placed and sized. To combine them in rows you would require vertical and horizontal stacks.

I donā€™t have much experience with it but there is a custom card that might be of help

Vertical stack card. Take a look at my config, use them all over the place for the remote page

Vertical stack card with horizontal stack within

Can you give me an example of that? From looking at other pplā€™s configs I started with my first button:

cards:
  type: vertical-stack
  cards:
    type: horizontal-stack
    cards:
      - icon: 'mdi:arrow-up-bold'
        tap_action:
          action: call-service
          service: remote.send_command
          service_data:
            command: DirectionUp
            device: '41560655'
            entity_id: remote.living_room
        type: 'custom:button-card'

but the red box says ā€œNo card type foundā€ Seems to me that the vertical stack should come after the first 6 butttons, telling it to start a new row.

cards:
  - cards:
      - entity: light.garage
        hold_action:
          action: more-info
        name: Garage Lights
        tap_action:
          action: toggle
        type: entity-button
      - entity: light.hallway
        tap_action:
          action: toggle
        type: entity-button
    type: horizontal-stack
  - cards:
      - entity: light.trash
        tap_action:
          action: toggle
        type: entity-button
      - entity: light.back_porch
        tap_action:
          action: toggle
        type: entity-button
    type: horizontal-stack
  - cards:
      - entity: light.front_porch
        tap_action:
          action: toggle
        type: entity-button
      - entity: light.driveway
        tap_action:
          action: toggle
        type: entity-button
    type: horizontal-stack
type: vertical-stack

Got it. Thanks.

One other question. Iā€™d like all the buttons to be in one ā€œcardā€ in the UI. See how the lower buttons appear to be separate from the upper one? Do you know how to do that?
TV Lovelace

cards:
  - cards:
      - entities:
          - entity: media_player.sony_bravia_tv
            show_state: true
            size: 5%
            type: 'custom:button-card'
          - input_select.living_room
          - switch.apple_tv_power
          - switch.fire_tv_power
        show_icon: true
        show_name: true
        type: entities
    type: horizontal-stack
  - cards:
      - icon: 'mdi:arrow-up-bold'
        tap_action:
          action: call-service
          service: remote.send_command
          service_data:
            command: DirectionUp
            device: '41560655'
            entity_id: remote.living_room
        type: 'custom:button-card'
      - icon: 'mdi:arrow-down-bold'
        tap_action:
          action: call-service
          service: remote.send_command
          service_data:
            command: DirectionDown
            device: '41560655'
            entity_id: remote.living_room
        type: 'custom:button-card'
      - icon: 'mdi:arrow-left-bold'
        tap_action:
          action: call-service
          service: remote.send_command
          service_data:
            command: DirectionLeft
            device: '41560655'
            entity_id: remote.living_room
        type: 'custom:button-card'
      - icon: 'mdi:arrow-right-bold'
        tap_action:
          action: call-service
          service: remote.send_command
          service_data:
            command: DirectionRight
            device: '41560655'
            entity_id: remote.living_room
        type: 'custom:button-card'
      - icon: 'mdi:alpha-e-circle'
        tap_action:
          action: call-service
          service: remote.send_command
          service_data:
            command: Ok
            device: '41560655'
            entity_id: remote.living_room
        type: 'custom:button-card'
      - icon: 'mdi:home'
        tap_action:
          action: call-service
          service: remote.send_command
          service_data:
            command: Home
            device: '41560655'
            entity_id: remote.living_room
        type: 'custom:button-card'
    type: horizontal-stack
  - cards:
      - icon: 'mdi:volume-plus'
        size: 25%
        tap_action:
          action: call-service
          service: remote.send_command
          service_data:
            command: VolumeUp
            device: '61379924'
            entity_id: remote.living_room
        type: 'custom:button-card'
      - icon: 'mdi:volume-minus'
        size: 25%
        tap_action:
          action: call-service
          service: remote.send_command
          service_data:
            command: VolumeDown
            device: '61379924'
            entity_id: remote.living_room
        type: 'custom:button-card'
      - icon: 'mdi:volume-off'
        size: 25%
        tap_action:
          action: call-service
          service: remote.send_command
          service_data:
            command: Mute
            device: '61379924'
            entity_id: remote.living_room
        type: 'custom:button-card'
      - icon: 'mdi:power-plug-off'
        size: 25%
        tap_action:
          action: call-service
          service: remote.turn_off
          service_data: null
          entity_id: remote.living_room
        type: 'custom:button-card'
    type: horizontal-stack
type: vertical-stack

For that, you would want to install the custom card ā€˜vertical-stack-in-cardā€™

You got a lot of unnecessary stuff in that. Anyways, doing what you want gets into the ā€˜advancedā€™ configuration category. You need to use the ā€˜under the hood namesā€™ while placing all cards into the entities card.

cards:
- entities:
    - entity: media_player.sony_bravia_tv
      show_state: true
      size: 5%
      type: 'custom:button-card'
    - input_select.living_room
    - switch.apple_tv_power
    - switch.fire_tv_power
    - cards:
        - icon: 'mdi:arrow-up-bold'
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: DirectionUp
              device: '41560655'
              entity_id: remote.living_room
          type: 'custom:button-card'
        - icon: 'mdi:arrow-down-bold'
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: DirectionDown
              device: '41560655'
              entity_id: remote.living_room
          type: 'custom:button-card'
        - icon: 'mdi:arrow-left-bold'
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: DirectionLeft
              device: '41560655'
              entity_id: remote.living_room
          type: 'custom:button-card'
        - icon: 'mdi:arrow-right-bold'
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: DirectionRight
              device: '41560655'
              entity_id: remote.living_room
          type: 'custom:button-card'
        - icon: 'mdi:alpha-e-circle'
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: Ok
              device: '41560655'
              entity_id: remote.living_room
          type: 'custom:button-card'
        - icon: 'mdi:home'
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: Home
              device: '41560655'
              entity_id: remote.living_room
          type: 'custom:button-card'
      type: custom:hui-horizontal-stack-card
    - cards:
        - icon: 'mdi:volume-plus'
          size: 25%
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: VolumeUp
              device: '61379924'
              entity_id: remote.living_room
          type: 'custom:button-card'
        - icon: 'mdi:volume-minus'
          size: 25%
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: VolumeDown
              device: '61379924'
              entity_id: remote.living_room
          type: 'custom:button-card'
        - icon: 'mdi:volume-off'
          size: 25%
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: Mute
              device: '61379924'
              entity_id: remote.living_room
          type: 'custom:button-card'
        - icon: 'mdi:power-plug-off'
          size: 25%
          tap_action:
            action: call-service
            service: remote.turn_off
            service_data: null
            entity_id: remote.living_room
          type: 'custom:button-card'
      type: custom:hui-horizontal-stack-card
  show_icon: true
  show_name: true
  type: entities

Is this available in HACS? Iā€™m not finding it.

Itā€™s not a custom card, itā€™s the under the hood name for the horizontal card. You donā€™t need anything custom.

Ok. Pasting in your code gives me ā€œno card type foundā€ so I thought maybe I needed something else.

let me verify that the name is correct

EDIT: The name is correct, it should work. You may need to switch to yaml mode.

By yaml mode do you mean pasting it into the raw config instead of a manual card? I noticed it put single quotes around custom:hui-horizontal-stack-card. Not sure if that makes a difference.

cards:
  - entities:
      - entity: media_player.sony_bravia_tv
        show_state: true
        size: 5%
        type: 'custom:button-card'
      - input_select.living_room
      - switch.apple_tv_power
      - switch.fire_tv_power
      - cards:
          - icon: 'mdi:arrow-up-bold'
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                command: DirectionUp
                device: '41560655'
                entity_id: remote.living_room
            type: 'custom:button-card'
          - icon: 'mdi:arrow-down-bold'
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                command: DirectionDown
                device: '41560655'
                entity_id: remote.living_room
            type: 'custom:button-card'
          - icon: 'mdi:arrow-left-bold'
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                command: DirectionLeft
                device: '41560655'
                entity_id: remote.living_room
            type: 'custom:button-card'
          - icon: 'mdi:arrow-right-bold'
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                command: DirectionRight
                device: '41560655'
                entity_id: remote.living_room
            type: 'custom:button-card'
          - icon: 'mdi:alpha-e-circle'
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                command: Ok
                device: '41560655'
                entity_id: remote.living_room
            type: 'custom:button-card'
          - icon: 'mdi:home'
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                command: Home
                device: '41560655'
                entity_id: remote.living_room
            type: 'custom:button-card'
        type: 'custom:hui-horizontal-stack-card'
      - cards:
          - icon: 'mdi:volume-plus'
            size: 25%
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                command: VolumeUp
                device: '61379924'
                entity_id: remote.living_room
            type: 'custom:button-card'
          - icon: 'mdi:volume-minus'
            size: 25%
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                command: VolumeDown
                device: '61379924'
                entity_id: remote.living_room
            type: 'custom:button-card'
          - icon: 'mdi:volume-off'
            size: 25%
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                command: Mute
                device: '61379924'
                entity_id: remote.living_room
            type: 'custom:button-card'
          - icon: 'mdi:power-plug-off'
            size: 25%
            tap_action:
              action: call-service
              service: remote.turn_off
              service_data: null
              entity_id: remote.living_room
            type: 'custom:button-card'
        type: 'custom:hui-horizontal-stack-card'
    show_icon: true
    show_name: true
    type: entities

no, I mean full yaml mode where you donā€™t use the UI at all. Only configuration is done through ui-lovelace.yaml

yaml mode and storage mode should be the same when it comes to the raw editor. There should be no need to switch to yaml

Yeah, iā€™m not sure. Never used the UI. I would expect it to work but you never know. Especially when people mistake the UI warnings for errors.