# Card de cômodo: Mushroom + Stack-in-Card + ícone de fundo

> Nome, ícone que acende com a luz, chips de luz, porta e TV e um ícone grande ao fundo que brilha quando a luz está ligada.

- Tipo: Cartão (yaml)
- Testado no Home Assistant 2025.2
- Arquivo cru: https://dougsmarthome.com.br/api/codigos/card-de-comodo-mushroom-com-icone-de-fundo/arquivo.yaml
- Página: https://dougsmarthome.com.br/codigos/card-de-comodo-mushroom-com-icone-de-fundo

## Código

```yaml
type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Sala
    icon: mdi:sofa
    entity: light.luz_sala
    tap_action:
      action: navigate
      navigation_path: /dashboard-ambientes/sala
    hold_action:
      action: toggle
    icon_color: "{{ 'amber' if is_state(entity, 'on') }}"
    fill_container: true
    layout: horizontal
  - type: custom:mushroom-chips-card
    alignment: end
    chips:
      - type: entity
        entity: light.luz_sala
        icon_color: yellow
        icon: mdi:lightbulb
        content_info: none
        tap_action:
          action: toggle
      - type: entity
        entity: binary_sensor.porta_sala_contact
        icon: mdi:door-closed
        icon_color: red
        content_info: none
      - type: entity
        entity: binary_sensor.tv_samsung
        content_info: none
        icon: mdi:television
        icon_color: blue
        tap_action:
          action: more-info
          entity: media_player.samsung_6_series_58
    card_mod:
      style: |
        .chip-container {
          display: flex;
          flex-wrap: wrap;
        }
        .chip-container > * {
          min-width: 32px; /* Aplica o min-width a todos os chips */
        }
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
          --chip-border-color: transparent;
          background-color: #222222;
          box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.15);
          display: block;
        }
        :host {
          background-color: #222222;
          box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.15);
          display: block;
        }
card_mod:
  style: |
    ha-card {
      position: relative;
      box-shadow: none;
      --ha-card-border-width: 0px;
      background: {{
        '#1c1c1c' if is_state('light.luz_sala', 'on') else '#1c1c1c'
      }};
    }
    ha-card::before {
      content: "";
      position: absolute;
      top: -12px;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: url('https://cdn.jsdelivr.net/gh/Templarian/MaterialDesign@master/svg/sofa.svg');
      background-repeat: no-repeat;
      background-position: right top;
      background-size: 40%;
      filter: brightness(0) saturate(100%) invert(96%) sepia(4%) saturate(500%) hue-rotate(314deg) brightness(96%) contrast(92%);
      opacity: {{
        '0.3' if is_state('light.luz_sala', 'on') else '0.05'
      }};
      z-index: 0;
    }
```

## Como usar

Precisa de três cards do HACS: **Stack-in-Card**, **Mushroom** e **Card Mod**.

Troque `light.luz_sala` (aparece quatro vezes), as entidades da porta e da TV e o `navigation_path`. Para outro cômodo, mude o ícone de fundo trocando `sofa.svg` no link pelo nome do ícone do MDI (`pot-steam`, `bed-queen`, `washing-machine`, `toilet`...).

O passo a passo, trecho por trecho, está no artigo.

Explicado no vídeo: https://dougsmarthome.com.br/videos/cards-incriveis-no-home-assistant-stack-in-card-mushroom-card-mod
Artigo: https://dougsmarthome.com.br/artigos/card-de-comodo-stack-in-card-mushroom-card-mod

## Veja também

- [Sua casa em 3D no Home Assistant: NeonPlan 3D do zero (grátis)](https://dougsmarthome.com.br/videos/sua-casa-em-3d-no-home-assistant-neonplan-3d-do-zero-gratis.md): ⚠️ AVISO IMPORTANTE: o Marketplace nativo chega na versão 2026.11 do Home Assistant, com lançamento estável previsto para 4 de novembro de 2026. Gravei este vídeo na versão beta.…
- [Card de notificações com condições e markdown no Home Assistant](https://dougsmarthome.com.br/videos/card-de-notificacoes-com-condicoes-e-markdown-no-home-assistant.md): Neste vídeo mostro como configurar notificações do meu projeto. Utilizando os cards markdown e conditional.
- [Lovelace Mode Yaml - Português - Home Assistant](https://dougsmarthome.com.br/videos/lovelace-mode-yaml-portugues-home-assistant.md): vídeo do canal
- [Custom Layout Card - Home Assistant](https://dougsmarthome.com.br/videos/custom-layout-card-home-assistant.md): vídeo do canal
- [Blueprint: sincroniza luz e interruptor nos dois sentidos](https://dougsmarthome.com.br/codigos/blueprint-sincroniza-luz-e-interruptor.md): Liga a luz pelo interruptor e o interruptor pela luz, sem loop. Uso na escada e na garagem aqui de casa.
- [Aviso de porta ou janela aberta quando todos saem](https://dougsmarthome.com.br/codigos/aviso-de-porta-ou-janela-aberta-ao-sair.md): Casa vazia por 2 minutos e algo ficou aberto? Chega uma notificação dizendo exatamente o quê.

---
Fonte: Doug Smart Home (https://dougsmarthome.com.br), por Douglas Baptista. Canal no YouTube: https://www.youtube.com/@dougsmarthome