Vertical Stack

in_card

All vertical-stack cards now have access to the in_card option, setting this to true will seamlessly join the cards in the stack. This produces a similar effect to the well known vertical-stack-in-card or the newer stack-in-card plugin.

type: vertical-stack
in_card: true  # joins cards together.
cards:
  - type: 'custom:simple-thermostat'
    ...  # hidden long config.

  - type: entities
    entities:
      - type: 'custom:paper-buttons-row'
        buttons:
          - entity: light.bedroom_aircon_light
            ...  # hidden long config.
          - entity: input_boolean.bedroom_swing_mode
            ...  # hidden long config.
          - entity: input_boolean.enable_aircon_controller
            ...  # hidden long config.

Full example

type: vertical-stack
in_card: true
cards:
  - type: 'custom:simple-thermostat'
    entity: climate.bedroom_aircon
    decimals: 1
    sensors:
      - attribute: current_humidity
        name: Humidity
        unit: ' %'
    step_size: 1
    control:
      _headings: false
      fan:
        auto:
          icon: false
        high:
          name: High
        low:
          name: Low
        medium:
          name: Med
      hvac:
        dry: false
        auto:
          name: false
        cool:
          name: false
        fan_only:
          name: false
        'off':
          name: false

  - type: entities
    entities:
      - type: 'custom:paper-buttons-row'
        buttons:
          - entity: light.bedroom_aircon_light
            icon: 'mdi:lightbulb'
            name: Light
            state_icons:
              'off': 'mdi:lightbulb-off-outline'
              'on': 'mdi:lightbulb'
            tap_action:
              action: toggle

          - entity: input_boolean.bedroom_swing_mode
            icon: 'mdi:repeat'
            name: Swing
            state_icons:
              'off': 'mdi:repeat-off'
              'on': 'mdi:repeat'
            tap_action:
              action: toggle

          - entity: input_boolean.enable_aircon_controller
            icon: 'mdi:remote'
            name: false
            state_icons:
              'off': 'mdi:remote-off'
              'on': 'mdi:remote'
            state_styles:
              'off':
                button:
                  color: var(--primary-background-color)
              'on':
                button:
                  color: var(--primary-text-color)
            tap_action:
              action: toggle

An alternative way to create the above, which is more efficient, is to embed the card in an entities card and take advantage of the no_card and canary_style options to produce the same effect.

type: entities
entities:
  # embedded card
  - type: 'custom:simple-thermostat'
  
    no_card: true  # remove the card background
    
    canary_style:  # fix margins for the card (expand to edges)
      margin: '-16px -16px -8px'

    canary_theme: simple-thermostat  # optionally set a localized theme
    
    entity: climate.bedroom_aircon
    ...  # hidden long config.

  # regular entity row
  - type: 'custom:paper-buttons-row'
    buttons:
      - entity: light.bedroom_aircon_light
        ...  # hidden long config.
      - entity: input_boolean.bedroom_swing_mode
        ...  # hidden long config.
      - entity: input_boolean.enable_aircon_controller
        ...  # hidden long config.