Custom Mushroom Card possible?

[pixelwave]

I am trying to create a custom mushroom card like this:

Basically an entity that has three custom action buttons defined below.

Is that possible with mushroom or do I have to dive into UI minimalist?

[Frosty]

yes. template/entity card for the top then mushroom chips for the bottom three.
enclose it all in a stack-in-card, either layout card or a vertical-stack with a horizontal-stack for the bottom

[paddy0174 (Patrick)]

Take a look here:

Mushroom Cards Card Mod Styling/Config Guide

This topic is technically a cross post from a reply to the Mushroom Card Topic found here: Part 1. But it was suggested in a comment to post it here as a guide instead. Below info is true as of Mushroom Version 3.5.4 and Card Mod Version 3.4.3 (you can also optionally use a theme like i do. i use Minimalist Version 1.3.9). links to each post: Alarm Control Panel Card Chips Card Climate Card Cover Card Entity Card Fan Card Humidifier Card Number Card Lock Card Light Card Media Card …

[pixelwave]

Not quite the result graphically …

type: vertical-stack
cards:
  - type: custom:mushroom-entity-card
    entity: input_button.pc_switch_office_pc1
    fill_container: false
    name: Office
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: switch.amazon_4a62313a7_internet_access
            use_entity_picture: false
            content_info: none
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: switch.amazon_4a62313a7_internet_access
            use_entity_picture: false
            content_info: none
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: switch.amazon_4a62313a7_internet_access
            use_entity_picture: false
            content_info: none

[pixelwave]

Ok with a bit more tinkering and the addition of “custom-cards/stack-in-card” I got this far:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-entity-card
    entity: input_button.pc_switch_office_pc1
    fill_container: false
    name: Office
    layout: horizontal
    icon: mdi:account-group
    card_mod:
      style: |
        ha-card {
          border: 0px !important;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: person.denny_moritz
        content_info: none
        card_mod:
          style: |
            ha-card {
              border: 0px !important;
              --card-mod-icon: mdi:microsoft-windows;
            }
      - type: entity
        entity: person.denny_moritz
        content_info: none
        card_mod:
          style: |
            ha-card {
              border: 0px !important;
              --card-mod-icon: mdi:apple;
            }
      - type: entity
        entity: person.denny_moritz
        content_info: none
        card_mod:
          style: |
            ha-card {
              border: 0px !important;
              --card-mod-icon: mdi:set-top-box;
            }        
    alignment: center
    card_mod:
      style:
        mushroom-entity-chip:nth-child(1)$: |
          ha-state-icon {
            rotate: 0deg;
          }
        mushroom-entity-chip:nth-child(2)$: |
          ha-state-icon {
              rotate: 0deg;
          }
        mushroom-entity-chip:nth-child(3)$: |
          ha-state-icon {
              rotate: 0deg;
          }
        .: |
          ha-card {
            justify-content: center;
            --chip-height: 40px;
            --chip-border-radius: 10%;
            --chip-icon-size: 20px;
            --chip-border-radius: 10%;
            --chip-background: #262626;
          }
card_mod:
  style: |
    ha-card {
      padding-bottom: 10px;
    }

Now the only question how do I achieve an even (percentage-based) spacing like in the mushroom cover and media player cards:

[pixelwave]

I did solve that for now using normal buttons:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-entity-card
    entity: input_button.pc_switch_office_pc1
    fill_container: false
    name: Office
    layout: horizontal
    icon: mdi:account-group
    card_mod:
      style: |
        ha-card {
          border: 0px !important;
        }
  - type: horizontal-stack
    cards:
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: switch.wol_workstation
        icon_height: 40px
        icon: mdi:microsoft-windows
        card_mod:
          style: |
            ha-card {
              border: 0px !important;
              background: #262626 !important;
              border-radius: 10px !important;
            }
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: switch.wol_workstation
        icon_height: 40px
        icon: mdi:apple
        card_mod:
          style: |
            ha-card {
              border: 0px !important;
              background: #262626 !important;
              border-radius: 10px !important;
            }
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: switch.wol_workstation
        icon_height: 40px
        icon: mdi:set-top-box
        card_mod:
          style: |
            ha-card {
              border: 0px !important;
              background: #262626 !important;
              border-radius: 10px!important;
            }
card_mod:
  style: |
    ha-card {
      padding-left: 10px;
      padding-right: 10px;
      padding-bottom: 10px;
    }