Pular para o conteúdo
Doug Smart Home
Painéis e cartões

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.

Por Douglas Baptista16 fev 2025 2 min de leitura 3 leituras
Miniatura do vídeo: Cards Incríveis no Home Assistant: Stack-in-Card, Mushroom & Card-Mod Prefere ver? Assista ao vídeo

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:

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.

- 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.

- 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.

    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).

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:

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:

secondary: "{{ states('sensor.temperatura_sala') }}°C"
Este artigo te ajudou?

0 comentários

Carregando comentários…

Também respondo os comentários no YouTube.

Escolhidos para você

Veja também

Imagem de capa: Sua casa em 3D no Home Assistant: NeonPlan 3D do zeroArtigo
Painéis e cartões

Sua casa em 3D no Home Assistant: NeonPlan 3D do zero

Do download à planta funcionando: desenhe a casa, ligue luzes, sensores e portas, e monte um painel com a planta 3D ao lado de energia e temperatura.

1
Miniatura do vídeo: Card de notificações com condições e markdown no Home AssistantVídeo
Painéis e cartões

Card de notificações com condições e markdown no Home Assistant

Neste vídeo mostro como configurar notificações do meu projeto. Utilizando os cards markdown e conditional.

2,8 mil
Miniatura do vídeo: Picture Elements Card - Home AssistantVídeo
Painéis e cartões

Picture Elements Card - Home Assistant

Miniatura do vídeo: Lovelace Mode Yaml - Português - Home AssistantVídeo
Painéis e cartões

Lovelace Mode Yaml - Português - Home Assistant

Blueprint
Automações

Blueprint: sincroniza luz e interruptor nos dois sentidos

Liga a luz pelo interruptor e o interruptor pela luz, sem loop. Uso na escada e na garagem aqui de casa.

Automação
Segurança e câmeras

Aviso de porta ou janela aberta quando todos saem

Casa vazia por 2 minutos e algo ficou aberto? Chega uma notificação dizendo exatamente o quê.

Canal no YouTube

Toda semana, uma automação nova funcionando de verdade.

Passo a passo em português, sem enrolação, testado aqui em casa.

Inscrever-se