[Example] Sideways card

[MrBearPresident]

type: custom:bubble-card
card_type: button
entity: sun.sun
button_type: state
card_layout: large
styles: |+
  :host{
    --bubble-border-radius: 12px;
    --bubble-select-list-width: 200px;
    --bubble-icon-border-radius: 200px;
  }
        
  .bubble-button-card{
    width: calc( var(--row-height, 56px) * var(--row-size, 1) + var(--row-gap, 8px) * ( var(--row-size,1) - 1 )) !important;
    transform-origin: top left;
    transform:  translate(0%, calc( var(--row-height, 56px) * var(--row-size, 1) + var(--row-gap, 8px) * ( var(--row-size, 1) - 1 ))) rotate(-90deg) ;
    height: ${card.querySelector('.bubble-button-card-container').getBoundingClientRect().width+'px'} ;
  }

  .bubble-button-card-container{
    height: calc( var(--row-height, 56px) * var(--row-size, 1) + var(--row-gap, 8px) * ( var(--row-size, 1) - 1 )) !important;
    border-style: solid;
    border-width: var(--ha-card-border-width,1px) !important;
    border-color: var(--ha-card-border-color,var(--divider-color,#e0e0e0));
  }

grid_options:
  columns: 2
  rows: 4

Extra Features:

• rounded corners like the default HA-theme
• border like the default HA-theme

[Sonic62]

Hello

I tested it does not work with the complete code,
if I remove this:

styles: |+
  :host{
    --bubble-border-radius: 12px;
    --bubble-select-list-width: 200px;
    --bubble-icon-border-radius: 200px;
  }
        
  .bubble-button-card{
    width: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )) !important;
    transform-origin: top left;
    transform:  translate(0%, calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 ))) rotate(-90deg) ;
    height: ${card.querySelector('.bubble-button-card-container').getBoundingClientRect().width+'px'} ;
  }

  .bubble-button-card-container{
    height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )) !important;
    border-style: solid;
    border-width: var(--ha-card-border-width,1px) !important;
    border-color: var(--ha-card-border-color,var(--divider-color,#e0e0e0));
  }

grid_options:
  columns: 2
  rows: 4

just sun.sun is displayed

[MrBearPresident]

Small guess, you're not using sections?
I've updated the code to have fallback values like var(--row-height, 56px) here the fallback value is 56px

[Sonic62]

Hello
Small guess, you're not using sections?
No

[MrBearPresident]

#963 (comment)

[MrBearPresident]

For masonry-view

• Use code below.
• Put the cards in a horizontal stack

_{(example with 4 cards and 8 cards in a horizontal stack)}

type: custom:bubble-card
card_type: button
entity: sun.sun
button_type: state
card_layout: large
styles: |
  :host{
    --bubble-border-radius: 12px;
    --bubble-select-list-width: 200px;
    --bubble-icon-border-radius: 200px;
    --column-size: 1;
    --row-size: 4;
  }
        
  .bubble-button-card{
    width: calc( var(--row-height, 56px) * var(--row-size, 1) + var(--row-gap, 8px) * ( var(--row-size,1) - 1 )) !important;
    transform-origin: top left;
    transform:  translate(0%, calc( var(--row-height, 56px) * var(--row-size, 1) + var(--row-gap, 8px) * ( var(--row-size, 1) - 1 ))) rotate(-90deg) ;
    height: ${card.querySelector('.bubble-button-card-container').getBoundingClientRect().width+'px'} ;
  }

  .bubble-button-card-container{
    height: calc( var(--row-height, 56px) * var(--row-size, 1) + var(--row-gap, 8px) * ( var(--row-size, 1) - 1 )) !important;
    width:  calc( var(--row-height, 56px) * var(--row-column, 1) + var(--row-gap, 8px) * ( var(--column-size, 1) - 1 )) !important;
    border-style: solid;
    border-width: var(--ha-card-border-width,1px) !important;
    border-color: var(--ha-card-border-color,var(--divider-color,#e0e0e0));
  }
name: This is a name
- type: custom:bubble-card
card_type: button
entity: sun.sun
button_type: state
card_layout: large
styles: |
  :host{
    --bubble-border-radius: 12px;
    --bubble-select-list-width: 200px;
    --bubble-icon-border-radius: 200px;
    --column-size: 1;
    --row-size: 4;
  }
        
  .bubble-button-card{
    width: calc( var(--row-height, 56px) * var(--row-size, 1) + var(--row-gap, 8px) * ( var(--row-size,1) - 1 )) !important;
    transform-origin: top left;
    transform:  translate(0%, calc( var(--row-height, 56px) * var(--row-size, 1) + var(--row-gap, 8px) * ( var(--row-size, 1) - 1 ))) rotate(-90deg) ;
    height: ${card.querySelector('.bubble-button-card-container').getBoundingClientRect().width+'px'} ;
  }

  .bubble-button-card-container{
    height: calc( var(--row-height, 56px) * var(--row-size, 1) + var(--row-gap, 8px) * ( var(--row-size, 1) - 1 )) !important;
    width:  calc( var(--row-height, 56px) * var(--row-column, 1) + var(--row-gap, 8px) * ( var(--column-size, 1) - 1 )) !important;
    border-style: solid;
    border-width: var(--ha-card-border-width,1px) !important;
    border-color: var(--ha-card-border-color,var(--divider-color,#e0e0e0));
  }

[Sonic62]

Thx @MrBearPresident :-)