# Card de cômodo com Stack-in-Card, Mushroom e Card-Mod

> Um card por cômodo com ícone que acende com a luz, botões rápidos e um ícone grande ao fundo. Código completo para copiar e adaptar à sua casa.

- Autor: Douglas Baptista
- Publicado em: 16 fev 2025 · atualizado em 2 nov 2026
- Assunto: Painéis e cartões
- Vídeo: https://dougsmarthome.com.br/videos/cards-incriveis-no-home-assistant-stack-in-card-mushroom-card-mod (YouTube: https://www.youtube.com/watch?v=pQ4qifRYO40)
- Página: https://dougsmarthome.com.br/artigos/card-de-comodo-stack-in-card-mushroom-card-mod

Um card por cômodo, com o nome, o ícone que acende junto com a luz, botões rápidos embaixo e um ícone grande e apagado ao fundo, que ganha brilho quando a luz do cômodo está ligada. Tudo feito com quatro cards do HACS, sem nenhuma imagem para baixar.

## O que você precisa (HACS)

- **Stack-in-Card**: junta vários cards num bloco só, sem bordas entre eles.
- **Mushroom**: traz o **Template Card** (nome, ícone e navegação) e o **Chips Card** (os botões rápidos).
- **Card Mod**: muda cores, sombras e coloca o ícone de fundo.

Instale os três pelo HACS (em **Frontend**) e recarregue o navegador.

## 1. A estrutura: Stack-in-Card

Entre no modo de edição do painel, adicione um card de **pilha horizontal** e, em **Mostrar editor de código**, comece pelo Stack-in-Card. Ele é a "caixa" de cada cômodo:

```yaml
type: custom:stack-in-card
cards:
```

## 2. Nome e ícone do cômodo: Mushroom Template Card

Dentro do Stack-in-Card vem o Template Card. O ícone fica âmbar quando a luz está acesa; um toque leva para o painel do cômodo e segurar liga ou desliga a luz.

```yaml
- 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
```

## 3. Botões rápidos: Mushroom Chips Card

Logo abaixo, os chips: luz (toque liga e desliga), porta e TV.

```yaml
- type: custom:mushroom-chips-card
  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
```

## 4. Fundo dos chips com Card Mod

Este trecho vai **dentro do Chips Card** (repare no recuo): tira as bordas dos chips e dá o fundo escuro com sombra leve.

```yaml
    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;
        }
```

## 5. O ícone grande ao fundo

Este é o trecho que faz o efeito do vídeo. Ele vai **no Stack-in-Card** (sem recuo, no mesmo nível do `cards:`). O `ha-card::before` desenha o ícone no canto superior direito: quase invisível com a luz apagada (`0.05`) e mais forte com ela acesa (`0.3`).

```yaml
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;
    }
```

## Código completo

É só copiar, trocar as entidades e repetir para cada cômodo:

```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;
    }
```

### O que trocar em cada cômodo

- `primary` e `icon`: nome e ícone do cômodo.
- `light.luz_sala`: aparece **quatro vezes** (Template Card, chip da luz e as duas condições do Card Mod).
- `navigation_path`: o painel daquele cômodo.
- O ícone de fundo: troque `sofa.svg` no link pelo nome do ícone, sem o `mdi:`. Exemplos: `pot-steam` (cozinha), `bed-queen` (suíte), `bed-empty` (quarto), `washing-machine` (lavanderia), `faucet` e `toilet` (banheiros).

### Dica: temperatura embaixo do nome

Para mostrar a temperatura do cômodo, acrescente no Template Card:

```yaml
secondary: "{{ states('sensor.temperatura_sala') }}°C"
```


## Códigos deste artigo

- [Card de cômodo: Mushroom + Stack-in-Card + ícone de fundo](https://dougsmarthome.com.br/codigos/card-de-comodo-mushroom-com-icone-de-fundo.md): 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.

## 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.
- [Picture Elements Card - Home Assistant](https://dougsmarthome.com.br/videos/picture-elements-card-home-assistant.md): vídeo do canal
- [Lovelace Mode Yaml - Português - Home Assistant](https://dougsmarthome.com.br/videos/lovelace-mode-yaml-portugues-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