Horizontal-stack error: Configuration errorNo type provided. Trying my first horizontal stack

[chrome summit]

getting this error by copying into new custom: button-card;

• type: horizontal-stack
  cards:
  • type: 'custom:button-card'
    entity: binary_sensor.starlink_connectivity
    color: auto
    name: s:default h:200px
    styles:
    card:
    - height: 200px
  • type: 'custom:button-card'
    entity: sensor.starlink_ping
    color_type: card
    color: auto
    name: s:100% h:200px
    size: 100%
    styles:
    card:
    - height: 200px
  • type: 'custom:button-card'
    entity: sensor.starlink_upload
    color_type: card
    color: auto
    size: 10%
    name: s:10% h:200px
    styles:
    card:
    - height: 200px

likely something very simple I'm missing.
Any help appreciated!

[void carbon]

To format your text as code, enter three backticks on the first line, press Enter for a new line, paste your code, press Enter again for another new line, and lastly three more backticks.
```yaml
example: here
```
Don't forget you can edit your post rather than repeatedly posting the same thing.

[blissful ridge]

It is hard to tell where your problem is because your code is not properly formatted, but if I would have to assume it looks like your second custom:button-card is not indented properly.

It should look something like this (I had to use my own entities to get it to render properly): ```yaml
type: horizontal-stack
cards:

• type: custom:button-card
  entity: binary_sensor.living_room_door_on_off
  color: auto
  name: s:default h:200px
  styles:
  card:
  - height: 200px
• type: custom:button-card
  entity: sensor.s25_ultra_battery_level
  color_type: card
  color: auto
  name: s:100% h:200px
  size: 100%
  styles:
  card:
  - height: 200px
• type: custom:button-card
  entity: sensor.watch5_battery_level
  color_type: card
  color: auto
  size: 10%
  name: s:10% h:200px
  styles:
  card:
  - height: 200px

[chrome summit]

Thanks for the quick response! Here is a clip of the code. I'm still not seeing what I did wrong...

[blissful ridge]

Easy fix. Line 1. Remove the dash and the space. (The first two characters of that line.) Highlight line 2 and everything to the end. Press SHIFT+TAB once.

I should have caught that from your code snippet but I think I just corrected it automatically figuring it was a formatting issue.

[chrome summit]

Thanks! Worked!... but doesn't that really push the '- type' too far in?

[blissful ridge]

For which line? Line 1? The - is basically used to define a section based off the higher level items. (If that makes sense.) Line 1 is the higher level item and therefore cannot use/need the - .

[chrome summit]

I just shift-tab the rest and it worked and looked appropriate for indentation. Thanks much! Love this stuff!

[blissful ridge]

Some of the documentation for custom:button-card is confusing because it incorrectly shows using the - on the first line sometimes.

[chrome summit]

yes, that's where I got it. still getting a bit confused with indentation and when to use '-'. But I'm learning!

Thanks again!

[blissful ridge]

I'm pretty confident, especially when using the visual editor, Line 1 will not have a dash.

[chrome summit]

Got it working last night! You guidance helped. thanks! Now I need to track down why it (custom: button-card won't show up on one of my displays (pi3 with DietPi OS). all other cards show up... shows as a red '!'.

[blissful ridge]

Try refreshing the browser/app. If that doesn't work, clear its cache. There's a pinned thread with some info.

https://discord.com/channels/330944238910963714/1288508168007061526