Recipes

Complete, copy-paste examples. Swap the entity IDs for your own.

Each recipe shows the template first, then how to use it.

1. Room card

The classic: one card per room, with a light and a temperature.

decluttering_templates:
  room_summary:
    card:
      type: vertical-stack
      cards:
        - type: heading
          heading: '[[room]]'
          icon: '[[icon]]'
        - type: grid
          columns: 2
          square: false
          cards:
            - type: tile
              entity: '[[light]]'
              name: Light
              features:
                - type: toggle
            - type: tile
              entity: '[[temperature]]'
              name: Temperature
    default:
      - icon: mdi:home-outline

- type: custom:decluttering-card-plus
  template: room_summary
  variables:
    - room: Living Room
    - icon: mdi:sofa
    - light: light.living_room
    - temperature: sensor.living_room_temperature

- type: custom:decluttering-card-plus
  template: room_summary
  variables:
    - room: Kitchen
    - icon: mdi:silverware-fork-knife
    - light: light.kitchen
    - temperature: sensor.kitchen_temperature

Four room summary cards

2. Alert that only appears when it matters

One template, three instances, each watching a different sensor. Cards whose condition is not met vanish without leaving a gap.

decluttering_templates:
  motion_alert:
    card:
      type: tile
      entity: '[[sensor]]'
      name: '[[name]]'
      visibility:
        - condition: state
          entity: '[[sensor]]'
          state: '[[show_when]]'
    default:
      - show_when: 'on'
      - name: Motion

- type: custom:decluttering-card-plus
  template: motion_alert
  variables:
    - sensor: binary_sensor.hallway_motion
    - name: Hallway motion

- type: custom:decluttering-card-plus
  template: motion_alert
  variables:
    - sensor: binary_sensor.garage_door
    - name: Garage door
    - show_when: 'off'

Alert cards, only the matching ones rendered

See Visibility.

3. Floorplan markers

decluttering_templates:
  room_marker:
    element:
      type: state-icon
      entity: '[[light]]'
      tap_action:
        action: toggle
      style:
        transform: translate(-50%, -50%)
        '--paper-item-icon-color': white
        background-color: rgba(30, 41, 59, 0.75)
        border-radius: 50%
        padding: 6px

- type: picture-elements
  image: /local/floorplan.svg
  elements:
    - type: custom:decluttering-card-plus
      template: room_marker
      variables:
        - light: light.living_room
      style:
        top: 32%
        left: 26%
    - type: custom:decluttering-card-plus
      template: room_marker
      variables:
        - light: light.kitchen
      style:
        top: 32%
        left: 72%

A floorplan with templated markers

See Elements.

4. A tidy Entities card

decluttering_templates:
  temperature_row:
    row:
      entity: '[[entity]]'
      name: '[[name]]'
      icon: '[[icon]]'
    default:
      - icon: mdi:thermometer

- type: entities
  title: Temperatures
  entities:
    - type: custom:decluttering-card-plus
      template: temperature_row
      variables:
        - entity: sensor.living_room_temperature
        - name: Living Room
    - type: custom:decluttering-card-plus
      template: temperature_row
      variables:
        - entity: sensor.living_room_humidity
        - name: Living Room humidity
        - icon: mdi:water-percent

An Entities card built from row templates

See Rows.

5. Badges for the top of a view

decluttering_templates:
  power_badge:
    badge:
      type: entity
      entity: '[[entity]]'
      name: '[[name]]'
      color: '[[color]]'
      show_name: true
    default:
      - color: blue

views:
  - type: sections
    badges:
      - type: custom:decluttering-card-plus
        template: power_badge
        variables:
          - entity: sensor.solar_power
          - name: Solar
          - color: yellow
      - type: custom:decluttering-card-plus
        template: power_badge
        variables:
          - entity: sensor.house_power
          - name: House
          - color: red

Badges from one template

See Badges.

6. One template, several widths

Pass the grid width in as a number.

decluttering_templates:
  sized_tile:
    card:
      type: tile
      entity: '[[entity]]'
      name: '[[name]]'
      hide_state: true
      grid_options:
        columns: '[[cols]]'
        rows: 1
    default:
      - cols: 6

- type: custom:decluttering-card-plus
  template: sized_tile
  variables:
    - entity: sensor.solar_power
    - name: Solar
    - cols: 12

- type: custom:decluttering-card-plus
  template: sized_tile
  variables:
    - entity: sensor.kitchen_temperature
    - name: Kitchen
    - cols: 4

One template at three different widths

7. Themed card with a colour variable

decluttering_templates:
  fancy_room:
    card:
      type: tile
      entity: '[[light]]'
      name: '[[room]]'
      features:
        - type: toggle
    style: |
      :host {
        --ha-card-border-color: [[accent]];
        --ha-card-border-width: 2px;
        --ha-card-border-radius: 18px;
      }
    default:
      - accent: '#2E5EA8'

- type: custom:decluttering-card-plus
  template: fancy_room
  variables:
    - light: light.kitchen
    - room: Kitchen
    - accent: '#c2410c'

Cards with different accent colours

See Styling.

8. Defaults that build on each other

label is derived from area unless you override it outright.

decluttering_templates:
  area_sensor:
    card:
      type: tile
      entity: '[[entity]]'
      name: '[[label]]'
      icon: '[[icon]]'
    default:
      - label: '[[area]] temperature'
      - area: Living Room
      - entity: sensor.living_room_temperature
      - icon: mdi:thermometer

- type: custom:decluttering-card-plus
  template: area_sensor

- type: custom:decluttering-card-plus
  template: area_sensor
  variables:
    - area: Bedroom
    - entity: sensor.bedroom_temperature

- type: custom:decluttering-card-plus
  template: area_sensor
  variables:
    - label: Solar output right now
    - entity: sensor.solar_power
    - icon: mdi:solar-power

Defaults, partial override and full override

See Variables.

9. A shared template library

Keep templates on one dashboard and borrow them everywhere else.

# dashboard: shared-templates
decluttering_templates:
  house_room:
    card:
      type: tile
      entity: '[[light]]'
      name: '[[room]]'
      icon: '[[icon]]'
      features:
        - type: toggle
    default:
      - icon: mdi:lightbulb

views:
  - title: Library
    cards: []

# every other dashboard
decluttering_templates_from:
  - shared-templates

views:
  - title: Home
    cards:
      - type: custom:decluttering-card-plus
        template: house_room
        variables:
          - light: light.kitchen
          - room: Kitchen

A dashboard rendering borrowed templates

See Sharing Templates Between Dashboards.

10. A template built from other templates

decluttering_templates:
  room_light:
    card:
      type: tile
      entity: '[[light]]'
      name: '[[room]]'
      features:
        - type: toggle

  room_pair:
    card:
      type: horizontal-stack
      cards:
        - type: custom:decluttering-card-plus
          template: room_light
          variables:
            - light: '[[light_a]]'
            - room: '[[room_a]]'
        - type: custom:decluttering-card-plus
          template: room_light
          variables:
            - light: '[[light_b]]'
            - room: '[[room_b]]'

- type: custom:decluttering-card-plus
  template: room_pair
  variables:
    - light_a: light.living_room
    - room_a: Living Room
    - light_b: light.kitchen
    - room_b: Kitchen

Edit room_light and both halves change.