A vertical card/button would be nice!

[Alfamonk]

I love Bubble-Card, but what I am missing is a "vertical card" or a "vertical button". As far as I can see, everything right now is going horizontal (and must have an icon on the left side - although you can disable it). Can't find any template so I can setup a button in a vertical manner. For example, first row to be the icon, second to be the name, third to be some value from the entity, fourth and so on, everything stacking up vertically... Or maybe Is there a way to do that, I might have missed?

Thank you in advance!

[colings]

I was trying to accomplish this too, and got something working with CSS. You'll probably want to set it to two rows or you won't be able to see the text though.

.bubble-content-container {
  display: grid;
  grid-template-areas: 'i' 'n';
  justify-items: center;
}

.bubble-icon-container {
  grid-area: i;
}

.bubble-name-container {
  grid-area: n;
  align-items: center;
  margin: 0;
}

[Alfamonk]

I was trying to accomplish this too, and got something working with CSS. You'll probably want to set it to two rows or you won't be able to see the text though.

Thanks!
It kinda worked. But I have two big issues:

1. The name and state is not centered (I don't understand why).
2. There too much wasted space above the icon and below the state.
   Can you help with that?

[colings]

I did notice the text offset yesterday and tracked it down. There's a margin on the name container that needs to be zeroed out, I'll update the original post to add that. As for the extra space above and below, I think that's just a result of setting it to two rows. Maybe try 1.5 or something? The other thing I tried was just leaving the card as one row and forcing it to a specific height. That's kind of a hacky solution that won't necessarily hold up at different DPI's and stuff though (I think...).

If you want to force the card to a specific height you can add this:

.bubble-button-card-container {
  height: 90px !important;
}

[Alfamonk]

Great. Now it's aligned corectly.
But whatever I tried, I could't find a way to display an entity attribute (below the state).
For example, in this case, I want to add "power consumption" attribute. If I click on the "Attribute to show" droplist, I can only see "Friendly name" and nothing else. I've tried to manually add "Power" or "power" in the code, but nothing shows. What am I doing wrong?

type: custom:bubble-card
card_type: button
button_type: switch
entity: switch.birou_plug_retro
card_layout: large-2-rows
styles: |-
  .bubble-content-container {
    display: grid;
    grid-template-areas: 'i' 'n';
    justify-items: center;
  }

  .bubble-icon-container {
    grid-area: i;
  }

  .bubble-name-container {
    grid-area: n;
    align-items: center;
    margin: 0;
  }
grid_options:
  columns: 2
  rows: 2
show_state: true
show_last_changed: false
show_last_updated: false
show_attribute: true
name: Test Plug
attribute: Power
force_icon: false
show_name: true
show_icon: true
scrolling_effect: false

[colings]

So that sounds more like a general Button Card issue. I tried a random entity (person, which has a bunch of attributes) and it let me pick from all of them, and showed the value with the entity state.