Summary-Card

KO | EN

gitlite — search

#react #golang #rust #linux #java #windows #awesome #cli #kubernetes #awesome-list #security #ios #mcp #openai

(★ 21)

Transform your Home Assistant dashboard into a responsive, intelligent, and beautiful control center. Summary Card lets you create compact, domain-based visual summaries with dynamic styling, real-time templating, and smart defaults.

Summary-Card 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Summary Card for Home Assistant

![Downloads](https://img.shields.io/github/downloads/cataseven/Summary-Card/total?color=41BDF5&logo=home-assistant&label=Downloads&suffix=%20downloads&style=for-the-badge)
[![hacs_badge](https://img.shields.io/badge/HACS-Custom-orange.svg)](https://github.com/hacs/frontend)
[![GitHub Release](https://img.shields.io/github/release/cataseven/Summary-Card.svg)](https://github.com/cataseven/Summary-Card/releases)
[![License](https://img.shields.io/github/license/cataseven/Summary-Card.svg)](https://raw.githubusercontent.com/cataseven/Summary-Card/main/LICENSE)
![Home Assistant](https://img.shields.io/badge/Home%20Assistant-2024.1.0%2B-blue.svg)
![Maintenance](https://img.shields.io/maintenance/yes/2026.svg)
[![GitHub Stars](https://img.shields.io/github/stars/cataseven/Summary-Card?style=social)](https://github.com/cataseven/Summary-Card)
[![GitHub Issues](https://img.shields.io/github/issues/cataseven/Summary-Card?style=flat-square)](https://github.com/cataseven/Summary-Card/issues)
---
![image11](https://raw.githubusercontent.com/cataseven/Summary-Card/main/images/top.png)

Transform your Home Assistant dashboard into a responsive, intelligent, and beautiful control center. **Summary Card** lets you create compact, domain-based visual summaries with dynamic styling, real-time templating, and smart defaults.

This is not just another Lovelace card. It's a highly customizable system for building status dashboards that feel alive.

![image8](https://raw.githubusercontent.com/cataseven/Summary-Card/main/images/sample.png)

![image12](https://raw.githubusercontent.com/cataseven/Summary-Card/main/images/111.png)

![image9](https://raw.githubusercontent.com/cataseven/Summary-Card/main/images/summary.gif)
---

## ✨ Features

- **Responsive Grid Layout:** Define the number of columns and height per row.
- **Domain-Aware Conditions:** Each domain has intelligent predefined conditions like `if_any_on`, `if_all_idle`, `if_any_heating`, etc.
- **Template-Backed Conditions:** Use full Jinja templates for advanced logic in combination with default logic.
- **Clock Support:** Add a live-updating card showing the current time and date.
- **Auto-Fill on First Use:** Automatically fills in cards based on detected domains on first load.
- **Fully Visual Editor:** No YAML required. Add/edit cards, conditions, and templates via a clean UI.
- **Jinja in Text:** Use domain-specific count placeholders like `{{ on_count }}`, `{{ heating_count }}` or full backend-evaluated Jinja strings inside `text` and `secondary_text`.
- **Tap & Hold Actions:** More Info, Navigate, URL, Perform Action, Toggle, Nothing — with full **confirmation dialog** support (HA native).
- **Vacuum Popup with Input Select:** Optionally display `input_select` entities (e.g., map selection) directly inside the vacuum more-info popup.
- **Domain-Specific Popup Controls:** Covers, valves, lawn mowers, media players, climate and more get tailored controls in the more-info popup — e.g. Open/Stop/Close and a position slider for valves.
- **Group by Area:** Optionally group the entities inside a card's popup under Home Assistant area headers — entities without an area are listed under "Other".
  
---

## 🛠 Installation

### HACS (Recommended)

1. Go to **HACS > Frontend**.
2. Click "Explore & Download Repositories".
3. Search for **Summary Card** and install it.
4. Refresh your browser.

### Manual

1. Download `summary-card.js` from the [releases](https://github.com/cataseven/Summary-Card/releases).
2. Place it in `config/www/`.
3. Add as a resource:

```yaml
# Configuration > Dashboards > Resources
url: /local/summary-card.js
type: module
```

---

## ⚙ Configuration Options

### ADDING CARD TO DASHBOARD
Search from the picker: Summary Card
Card detects your available domains automatically. You can modify as you want
![image6](https://raw.githubusercontent.com/cataseven/Summary-Card/main/images/picker.png)

### UI EDITOR
![image7](https://raw.githubusercontent.com/cataseven/Summary-Card/main/images/ui2.png)

### HIERARCHY

ADD DOMAIN CARD -> SELECT DOMAIN -> ADD SCENARIO -> SET OUTPUTS 
Also you can OPTIONALLY: add template conditions to your scenarios 
Also you can OPTIONALLY: include only spesific entities of the domain 
Also you can OPTIONALLY: exclude spesific entities from the domain

Card try to create card for all available domains. You can modify auto-prepared card!

### Root Config

| Option        | Type     | Required | Description                                 | Default |
| ------------- | -------- | -------- | ------------------------------------------- | ------- |
| `type`        | string   | ✅       | Always `custom:summary-card`                | -       |
| `columns`     | integer  | ❌       | Number of cards per row                     | `6`     |
| `row_height`  | string   | ❌       | CSS height like `60px`, `10vh`, etc.        | `55px`  |
| `cards`       | array    | ✅       | List of cards (domain or clock)             | -       |

---

#### 1. **Domain Card**

| Option         | Type     | Required | Description                                      |
| -------------- | -------- | -------- | ------------------------------------------------ |
| `domain`       | string   | ✅       | Domain like `light`, `switch`, `sensor`, etc.    |
| `name`         | string   | ❌       | Optional - Display name                        |
| `include`      | array    | ❌       | Optional - List of `entity_id`s to include. Only consider these entities. Forget the others               |
| `exclude`      | array    | ❌       | Optional - List of `entity_id`s to exclude. Consider all entities of the domain but exlude this ones                 |
| `styles`       | array    | ✅       | Array of style rules based on conditions         |
| `tap_action`   | object   | ❌       | Action on tap (default: `more-info`). Supports `confirmation` |
| `hold_action`  | object   | ❌       | Action on hold (default: `none`). Supports `confirmation` |
| `group_by_area` | boolean | ❌   | Group the entities in the more-info popup by area. Entities without an area are listed under "Other" |
| `show_input_select` | boolean | ❌  | **Vacuum & Lawn Mower only.** Show input_select entities in more-info popup |
| `input_select_entities` | array | ❌ | **Vacuum & Lawn Mower only.** List of `input_select` entity_ids to display |

#### 2. **Clock Card**

| Option            | Type     | Required | Description                                      |
| ----------------- | -------- | -------- | ------------------------------------------------ |
| `domain`          | string   | ✅       | Must be `"clock"`                                |
| `name`            | string   | ❌       | Display name                                     |
| `color`           | string   | ❌       | Icon circle color (`green`, `#ff0000`, etc.)     |
| `hour_format`     | string   | ❌       | `"24h"` or `"12h"` (default: `24h`)             |
| `time_locale`     | string   | ❌       | Time locale (e.g. `en-US`, `tr-TR`). Auto-detect |
| `date_locale`     | string   | ❌       | Date locale (e.g. `en-US`, `de-DE`). Auto-detect |
| `language_locale` | string   | ❌       | Weekday language (e.g. `en-US`). Auto-detect     |

---

### Style Rules (Inside `styles`)

Each style block is evaluated top to bottom. The first matching rule is applied.

| Option              | Type     | Required | Description |
| -------------------| -------- | -------- | ----------- |
| `condition`         | string   | ✅       | One of the predefined domain-aware keywords like `if_any_on`, `if_all_closed`, `any_unavailable`, etc. |
| `text`              | string   | ❌       | Main line (can include Jinja placeholders) |
| `secondary_text`    | string   | ❌       | Subtext (also supports Jinja)              |
| `icon`              | string   | ❌       | Material Design Icon (`mdi:`)              |
| `color`             | string   | ❌       | CSS color or theme variable                |
| `value`             | number/string | ❌   | Required only for sensor domain rules like `if_any_equal`, `if_any_above`, `if_any_below`, etc. |
| `template_conditions` | array | ❌       | List of Jinja template strings that must evaluate to `true` |

---

### Domain Conditions

Each domain exposes a tailored set of conditions. All domains also include `any_unavailable`.

| Domain | Available Conditions |
|---|---|
| `light`, `switch`, `input_boolean` | `if_any_on`, `if_all_on`, `if_any_off`, `if_all_off` |
| `binary_sensor` | `if_any_true`, `if_all_true`, `if_any_false`, `if_all_false` |
| `cover` | `if_any_open`, `if_all_open`, `if_any_closed`, `if_all_closed`, `if_any_opening`, `if_all_opening`, `if_any_closing`, `if_all_closing`, `if_any_stopped`, `if_all_stopped` |
| `valve` | `if_any_open`, `if_all_open`, `if_any_closed`, `if_all_closed`, `if_any_opening`, `if_all_opening`, `if_any_closing`, `if_all_closing`, `if_any_stopped`, `if_all_stopped`, `if_any_water`, `if_all_water`, `if_any_gas`, `if_all_gas` |
| `media_player` | `if_any_playing`, `if_all_playing`, `if_any_idle`, `if_all_idle`, `if_any_paused`, `if_all_paused`, `if_any_buffering`, `if_all_buffering`, `if_any_on`, `if_all_on`, `if_any_off`, `if_all_off` |
| `person` | `if_any_at_home`, `if_all_at_home`, `if_any_away`, `if_all_away` |
| `alarm_control_panel` | `if_any_armed`, `if_all_armed`, `if_any_disarmed`, `if_all_disarmed`, `if_any_triggered`, `if_all_triggered`, `if_any_arming`, `if_all_arming`, `if_any_pending`, `if_all_pending` |
| `lock` | `if_any_unlocked`, `if_all_unlocked`, `if_any_locked`, `if_all_locked`, `if_any_locking`, `if_all_locking`, `if_any_unlocking`, `if_all_unlocking`, `if_any_jammed`, `if_all_jammed` |
| `vacuum` | `if_any_cleaning`, `if_all_cleaning`, `if_any_docked`, `if_all_docked`, `if_any_returning`, `if_all_returning`, `if_any_paused`, `if_all_paused`, `if_any_idle`, `if_all_idle`, `if_any_error`, `if_all_error` |
| `lawn_mower` | `if_any_mowing`, `if_all_mowing`, `if_any_docked`, `if_all_docked`, `if_any_returning`, `if_all_returning`, `if_any_paused`, `if_all_paused`, `if_any_error`, `if_all_error` |
| `camera` | `if_any_streaming`, `if_all_streaming`, `if_any_idle`, `if_all_idle`, `if_any_recording`, `if_all_recording` |
| `climate` (HVAC mode) | `if_any_heat`, `if_all_heat`, `if_any_cool`, `if_all_cool`, `if_any_heat_cool`, `if_all_heat_cool`, `if_any_auto`, `if_all_auto`, `if_any_dry`, `if_all_dry`, `if_any_fan_only`, `if_all_fan_only`, `if_any_off`, `if_all_off` |
| `climate` (hvac_action) | `if_any_heating`, `if_all_heating`, `if_any_cooling`, `if_all_cooling`, `if_any_idle`, `if_all_idle`, `if_any_fan`, `if_all_fan`, `if_any_drying`, `if_all_drying`, `if_any_preheating`, `if_all_preheating`, `if_any_defrosting`, `if_all_defrosting` |
| `fan` | `if_any_on`, `if_all_on`, `if_any_off`, `if_all_off` |
| `humidifier` | `if_any_on`, `if_all_on`, `if_any_off`, `if_all_off` |
| `plant` | `if_any_problem`, `if_all_problem`, `if_any_ok`, `if_all_ok` |
| `sensor` | `if_any_above`, `if_any_below`, `if_any_equal`, `if_any_not_equal`, `any_unavailable` |
| `siren` | `if_any_on`, `if_all_on`, `if_any_off`, `if_all_off` |
| `update` | `if_any_on`, `if_all_on`, `if_any_off`, `if_all_off` |
| `water_heater` | `if_any_on`, `if_all_on`, `if_any_off`, `if_all_off`, `if_any_eco`, `if_all_eco`, `if_any_electric`, `if_all_electric`, `if_any_performance`, `if_all_performance`, `if_any_high_demand`, `if_all_high_demand`, `if_any_heat_pump`, `if_all_heat_pump`, `if_any_gas`, `if_all_gas` |
| `zone` | `if_any_occupied`, `if_all_empty`, `if_any_above`, `if_any_below`, `if_any_equal`, `if_any_not_equal`, `any_unavailable` |

> **Climate note:** HVAC mode conditions (e.g. `if_any_heat`) reflect what mode the thermostat is *set to*. hvac_action conditions (e.g. `if_any_heating`) reflect what the device is *physically doing right now* — a thermostat set to `heat` may have `hvac_action: idle` if the target temperature is already reached.

> **Valve note:** `if_any_water` / `if_any_gas` match on the valve's **device class**, not its state — useful when one card covers both water and gas valves. Combine them with `template_conditions` if you need e.g. "any *gas* valve open".

For example:

```yaml
- domain: sensor
  name: Temperature
  include:
    - sensor.living_room_temp
  styles:
    - condition: if_any_above
      value: 28
      text: "Hot! ({{ unavailable_count }} unavailable)"
      icon: mdi:thermometer
      color: red
```

---

### Dynamic Template Variables

The following count variables are available in `text` and `secondary_text`. All domains also provide `{{ total_count }}` and `{{ unavailable_count }}`.

| Domain | Available count variables |
|---|---|
| `light` | `{{ on_count }}` `{{ off_count }}` |
| `switch` | `{{ on_count }}` `{{ off_count }}` |
| `input_boolean` | `{{ on_count }}` `{{ off_count }}` |
| `binary_sensor` | `{{ true_count }}` `{{ false_count }}` |
| `cover` | `{{ open_count }}` `{{ closed_count }}` `{{ opening_count }}` `{{ closing_count }}` `{{ stopped_count }}` |
| `valve` | `{{ open_count }}` `{{ closed_count }}` `{{ opening_count }}` `{{ closing_count }}` `{{ stopped_count }}` `{{ water_count }}` `{{ gas_count }}` |
| `media_player` | `{{ playing_count }}` `{{ idle_count }}` `{{ paused_count }}` `{{ buffering_count }}` `{{ on_count }}` `{{ off_count }}` |
| `person` | `{{ at_home_count }}` `{{ away_count }}` — anyone who is not at home (including people in named zones) counts as away |
| `alarm_control_panel` | `{{ armed_count }}` `{{ disarmed_count }}` `{{ triggered_count }}` `{{ arming_count }}` `{{ pending_count }}` |
| `lock` | `{{ unlocked_count }}` `{{ locked_count }}` `{{ locking_count }}` `{{ unlocking_count }}` `{{ jammed_count }}` |
| `vacuum` | `{{ cleaning_count }}` `{{ docked_count }}` `{{ returning_count }}` `{{ paused_count }}` `{{ idle_count }}` `{{ error_count }}` |
| `lawn_mower` | `{{ mowing_count }}` `{{ docked_count }}` `{{ returning_count }}` `{{ paused_count }}` `{{ error_count }}` |
| `camera` | `{{ streaming_count }}` `{{ idle_count }}` `{{ recording_count }}` |
| `climate` (HVAC mode) | `{{ heat_count }}` `{{ cool_count }}` `{{ heat_cool_count }}` `{{ auto_count }}` `{{ dry_count }}` `{{ fan_only_count }}` `{{ off_count }}` |
| `climate` (hvac_action) | `{{ heating_count }}` `{{ cooling_count }}` `{{ idle_count }}` `{{ fan_count }}` `{{ drying_count }}` `{{ preheating_count }}` `{{ defrosting_count }}` |
| `fan` | `{{ on_count }}` `{{ off_count }}` |
| `humidifier` | `{{ on_count }}` `{{ off_count }}` |
| `plant` | `{{ problem_count }}` `{{ ok_count }}` |
| `siren` | `{{ on_count }}` `{{ off_count }}` |
| `update` | `{{ on_count }}` `{{ off_count }}` |
| `water_heater` | `{{ on_count }}` `{{ off_count }}` `{{ eco_count }}` `{{ electric_count }}` `{{ performance_count }}` `{{ high_demand_count }}` `{{ heat_pump_count }}` `{{ gas_count }}` |
| `zone` | `{{ occupied_count }}` `{{ empty_count }}` `{{ total_persons }}` `{{ total_persons_list }}` |

You can also use full Jinja expressions, including custom Home Assistant state queries inside `template_conditions`.

Example:

```yaml
template_conditions:
 - "{{ is_state_attr('switch.kitchen', 'current', 0) }}"
 - "{{ now().hour >= 0 and now().hour < 5 }}"
```

---

### Include / Exclude Entities
Via Include Enitites option, you can easily create card for only one entity of the selected domain (or two, or three.. depens on your need)
Via Exlude Enitites option, you can easily exclude one entitiy (or two, or three.. depens on your needs) from your selected domain and create card for the rest of the domain

### Group Popup Entities by Area

When a card covers many entities with similar names ("Light", "Ceiling Fan Light"...), enable **Group entities by area in popup** in the editor's Entities tab, or add `group_by_area: true` in YAML. The more-info popup then groups its rows under area headers, using each entity's area (or the area of the device it belongs to). Entities without an area are listed at the bottom under **Other**.

```yaml
- domain: light
  name: Lights
  group_by_area: true
  styles:
    - condition: if_any_on
      text: "{{ on_count }} On"
      icon: mdi:lightbulb-on
      color: orange
    - condition: if_all_off
      text: All Off
      icon: mdi:lightbulb-off-outline
      color: green
```

### Tap & Hold Actions
![image15](https://raw.githubusercontent.com/cataseven/Summary-Card/main/images/tap.png)

Both `tap_action` and `hold_action` support the standard HA action types: **More Info**, **Toggle**, **Navigate**, **URL**, **Perform Action**, **Assist**, and **Nothing**.

Actions like `perform-action`, `navigate`, `url`, and `assist` are delegated to Home Assistant's native action handler, which means **confirmation dialogs** work out of the box:

```yaml
tap_action:
  action: perform-action
  confirmation:
    text: "Are you sure you want to restart?"
  perform_action: script.restart
```

## Vacuum & Lawn Mower: Input Select in Popup

For vacuum and lawn mower domain cards, when tap or hold action is set to **More Info**, you can optionally display `input_select` entities inside the popup (e.g., for map selection):

```yaml
- domain: vacuum
  name: Robot Vacuum
  show_input_select: true
  input_select_entities:
    - input_select.vacuum_map
  tap_action:
    action: more-info
  styles:
    - condition: if_any_cleaning
      text: "Cleaning"
      icon: mdi:robot-vacuum
      color: green
```

## Valve: Popup Controls

For valve domain cards, when tap or hold action is set to **More Info**, the popup shows **Open / Stop / Close** buttons for each valve. Valves that report a position (`current_valve_position`) also get a slider to set how far they are open — simple on/off valves just show the buttons.

```yaml
- domain: valve
  name: Water Valves
  tap_action:
    action: more-info
  styles:
    - condition: if_any_opening
      text: "Opening..."
      icon: mdi:valve
      color: orange
    - condition: if_any_open
      text: "{{ open_count }} open"
      icon: mdi:valve-open
      color: "#03a9f4"
    - condition: if_all_closed
      text: "All closed"
      icon: mdi:valve-closed
      color: grey
```

## Lawn Mower: Popup Controls

Lawn mower cards show **Start / Pause / Dock** buttons in the more-info popup, plus the battery level when the mower reports one.

```yaml
- domain: lawn_mower
  name: Mowers
  tap_action:
    action: more-info
  styles:
    - condition: if_any_error
      text: "Check mower"
      icon: mdi:robot-mower-outline
      color: red
    - condition: if_any_mowing
      text: "{{ mowing_count }} mowing"
      icon: mdi:robot-mower
      color: green
    - condition: if_all_docked
      text: "All docked"
      icon: mdi:robot-mower
      color: grey
```

## 🎨 Tap Action - More Info Screenshots
![image2](https://raw.githubusercontent.com/cataseven/Summary-Card/main/images/media.png)

![image1](https://raw.githubusercontent.com/cataseven/Summary-Card/main/images/cover.png)

## 🎨 Configuration Examples
### Example 1: Example form my own Dashboard. This is the start point of this project.
![image1](https://raw.githubusercontent.com/cataseven/Summary-Card/main/images/1.png)
![image2](https://raw.githubusercontent.com/cataseven/Summary-Card/main/images/2.png)
![image3](https://raw.githubusercontent.com/cataseven/Summary-Card/main/images/3.png)
![image4](https://raw.githubusercontent.com/cataseven/Summary-Card/main/images/4.png)
![image5](https://raw.githubusercontent.com/cataseven/Summary-Card/main/images/5.png)

```yaml
type: custom:summary-card # Specifies the card type.
columns: "6"
row_height: 60px
cards:
 - domain: switch # The domain of the entities to be monitored (e.g., switch, light, sensor).
 name: Kitchen Wall Socket # A friendly name for the card.
 include: # only this entity will be listened
 - switch.kitchen
 styles: 
 # Style for when the socket is unavailable.
 - condition: any_unavailable # If any of the included entities are unavailable.
 text: Kitchen Wall Socket is Unavailable # The main text to display.
 secondary_text: Check Device # The smaller text below the main text.
 icon: mdi:lightning-bolt # The icon to show.
 color: red # The color of the icon.
 # Style for when the socket is off and drawing no power.
 - condition: if_all_off # If all of the included entities are off.
 text: Kitchen Wall Socket is Off
 secondary_text: Secure
 icon: mdi:lightning-bolt
 color: green
 template_conditions: # Additional conditions using templates.
 # This template checks if the 'current' attribute of the switch is 0.
 - "{{ is_state_attr('switch.kitchen', 'current', 0) }}"
 # Style for when the socket is on and drawing power.
 - condition: if_any_on # If any of the included entities are on.
 text: Kitchen Wall Socket is On
 secondary_text: >- # The '>' allows for multi-line strings.
 Warning! Check the Device! Current value is
 {{state_attr('switch.kitchen', 'current')}} # Displays the current power draw.
 icon: mdi:lightning-bolt
 color: red
 template_conditions:
 # This template checks if the 'current' attribute is not 0.
 - "{{ not is_state_attr('switch.kitchen', 'current', 0) }}"
 - domain: sensor
 name: Water Level
 include:
 - sensor.current_water_level
 styles:
 # Style for when the sensor is unavailable.
 - condition: any_unavailable
 text: Water Level is Unavailable
 secondary_text: Check Device
 icon: mdi:water-percent-alert
 color: red
 # Style for when the water level is at 0.
 - condition: if_any_equal # Condition based on the sensor's value.
 value: 0 # The value to compare against.
 text: Water Level is 0
 secondary_text: Secure
 icon: mdi:water-percent
 color: green
 template_conditions: [] # No extra template conditions needed here.
 # Style for when the water level is not 0.
 - condition: if_any_not_equal
 value: "0" # The value to compare against (as a string).
 text: >-
 Water Level is {{state_attr('sensor.current_water_level', 'raw_state')}}
 secondary_text: >-
 Warning! Check the Engine Room! Current value is
 {{state_attr('sensor.current_water_level', 'raw_state')}}
 icon: mdi:water-percent-alert
 color: red
 template_conditions: []
 - domain: cover
 name: Shutters & Garage
 styles:
 # Style for when the garage door is open.
 - condition: if_any_open
 text: Garage Door is Open
 secondary_text: Warning!
 icon: mdi:garage-alert-variant
 color: red
 template_conditions:
 # Checks if the garage door binary sensor is 'on'.
 - "{{ is_state('binary_sensor.garage_door', 'on') }}"
 # Style for when all shutters are closed and available.
 - condition: if_all_closed
 text: All Shutters are Closed
 secondary_text: Secure
 icon: mdi:window-shutter
 color: green
 template_conditions:
 # A complex template to check the state of all covers.
 - >-
 {% set un_shutters = states.cover | selectattr('state', 'eq', 'unavailable') | map(attribute='entity_id') | list %}
 {% set open_shutters = states.cover | selectattr('state', 'ne', 'unavailable') | selectattr('attributes.current_position', 'ge', 1) | map(attribute='entity_id') | list %}
 {{ open_shutters | length == 0 and un_shutters | length == 0 }}
 # Style for when any shutter is open during the night.
 - condition: if_any_open
 text: Shutters Open (Night)
 secondary_text: Check Security
 icon: mdi:window-shutter-open
 color: red
 template_conditions:
 # Checks if the current time is between midnight and 5 AM.
 - "{{ now().hour >= 0 and now().hour < 5 }}"
 # Style for when any shutter is open and the family is away.
 - condition: if_any_open
 text: Shutters Open (Away)
 secondary_text: Check Security
 icon: mdi:window-shutter-open
 color: red
 template_conditions:
 - "{{ is_state('group.family', 'away') }}"
 # Style for when any shutter is unavailable and the family is away.
 - condition: any_unavailable
 text: Unavailable Shutters (Away)
 secondary_text: Immediate Attention Needed!
 icon: mdi:window-shutter-alert
 color: red
 template_conditions:
 - "{{ is_state('group.family', 'away') }}"
 # Style for when any shutter is unavailable and the family is home.
 - condition: any_unavailable
 text: Unavailable Shutters (Home)
 secondary_text: Check Devices!
 icon: mdi:window-shutter-alert
 color: orange
 template_conditions:
 - "{{ is_state('group.family', 'home') }}"
 # Style for when any shutter is open during the day and the family is home.
 - condition: if_any_open
 text: Shutters Open (Daytime)
 secondary_text: Enjoy the View!
 icon: mdi:window-shutter-open
 color: green
 template_conditions:
 # Checks if the family is home and the time is between 5 AM and 11:59 PM.
 - >-
 {{ is_state('group.family', 'home') and ('05:00' <= now().strftime('%H:%M') <= '23:59')}}
 - domain: switch
 name: Sprinklers
 include:
 - switch.zone_1
 - switch.zone_2
 - switch.zone_3
 - switch.zone_4
 - switch.zone_5
 - switch.zone_6
 - switch.zone_7
 - switch.zone_8
 - switch.zone_9
 - switch.zone_10
 - switch.zone_11
 styles:
 # Style for when any sprinkler switch is unavailable.
 - condition: any_unavailable
 text: Unavailable
 secondary_text: Check Device
 icon: mdi:wifi-off
 color: red
 # Style for when all sprinklers are off.
 - condition: if_all_off
 text: Sprinklers are Off
 secondary_text: Secure
 icon: mdi:sprinkler
 color: green
 # Style for when any sprinkler is on.
 - condition: if_any_on
 # Displays the name of the active sprinkler.
 text: >-
 {% set zone_switches = expand('switch.zone_1', 'switch.zone_2', 'switch.zone_3', 'switch.zone_4', 'switch.zone_5', 'switch.zone_6', 'switch.zone_7', 'switch.zone_8', 'switch.zone_9', 'switch.zone_10', 'switch.zone_11') %}
 {% set on_switch = zone_switches | selectattr('state', 'eq', 'on') | first %}
 {{on_switch.name}} is On
 secondary_text: Watering
 icon: mdi:sprinkler-variant
 color: blue
 - domain: camera
 name: Cameras
 styles:
 # Style for when one or more cameras are offline.
 - condition: any_unavailable
 text: One or More Cameras are Offline
 secondary_text: Check Cameras
 icon: mdi:video-box-off
 color: red
 # Style for when all cameras are streaming.
 - condition: if_all_streaming
 text: Cameras are Online
 secondary_text: Secure
 icon: mdi:video-check
 color: green
 include:
 - camera.front
 - camera.garage
 - camera.side
 - camera.pool
 - domain: clock
 name: Clock
 color: green # The color of the clock icon.
```

### Example 2: Basic Lights & Switches Setup

A great starting point that covers the most common use case.

```yaml
# The card type must always be 'custom:summary-card'.
type: custom:summary-card

#================================================
# GENERAL SETTINGS
#================================================
# Defines how many cards are displayed in a single row.
columns: 2
# Sets the height of each card in pixels.
row_height: 80px

#================================================
# CARDS LIST
# Each section starting with a dash (-) defines a new card.
#================================================
cards:
  # --- EXAMPLE 1: LIGHTS CARD ---
  # This card tracks all entities in the 'light' domain.
  # Use 'include' or 'exclude' to specify which lights to track.
  - domain: light
    name: Lights

# STYLES (SCENARIOS)
    # The card evaluates these styles from top to bottom and applies the FIRST one that meets the conditions.
    # Therefore, you should place your most specific or highest-priority conditions at the top.
    styles:
      # Scenario 1: Is at least one light currently on?
      - condition: if_any_on
        # '{{ on_count }}' shows the number of lights that are currently on.
        text: '{{ on_count }} On'
        icon: mdi:lightbulb-on
        color: 'rgb(255, 193, 7)' # Amber color for the icon

# Scenario 2: Are all lights off? (And not unavailable)
      # This acts as the default state if no other condition is met.
      - condition: if_all_off
        text: All Off
        icon: mdi:lightbulb-off-outline
        # Uses your theme's primary text color.
        color: 'var(--primary-text-color)'

# --- EXAMPLE 2: SWITCHES CARD ---
  # This card tracks all entities in the 'switch' domain.
  - domain: switch
    name: Switches
    styles:
      # Scenario 1 (HIGHEST PRIORITY): Is any switch unavailable/offline?
      # This condition is checked first to immediately report connectivity issues.
      - condition: any_unavailable
        # '{{ unavailable_count }}' shows how many entities are unavailable.
        text: '{{ unavailable_count }} Offline'
        icon: mdi:power-plug-off
        color: 'grey'

# Scenario 2: If none are unavailable, is at least one switch on?
      - condition: if_any_on
        text: '{{ on_count }} Active'
        icon: mdi:power-plug
        color: 'dodgerblue'

# Scenario 3: If all switches are available and none are on, they must all be off.
      - condition: if_all_off
        text: All Off
        icon: mdi:power-plug-off-outline
        color: 'var(--primary-text-color)'
```
### Example 3: Advanced "Home Status" Dashboard

This example demonstrates filtering, multiple conditions, and a mix of card types for a comprehensive overview.

```yaml
type: custom:summary-card
columns: 4
row_height: 95px
cards:
  # --- CARD 1: Clock ---
  # This is a special card that doesn't track any entities; it simply displays the current time.
  - domain: clock
    # Uses your theme's primary color for the icon.
    color: 'var(--primary-color)'

# --- CARD 2: Person Status Summary ---
  # This card tracks entities in the 'person' domain to summarize who is at home.
  - domain: person
    name: People
    styles:
      # Rule 1: If at least one person is home...
      # For the 'person' domain, the 'home' state is considered "active".
      - condition: if_any_at_home
        # '{{ at_home_count }}' shows the number of people currently at home.
        text: '{{ at_home_count }} at Home'
        icon: mdi:home-account
        color: '#4CAF50' # Green

# Rule 2: If everyone is away...
      - condition: if_all_away
        text: Everyone Away
        icon: mdi:home-export-outline
        color: '#FF9800' # Orange

# --- CARD 3: Security (Door/Window) Summary ---
  # This card only tracks the specified door and window sensors.
  - domain: binary_sensor
    name: Security
    # With 'include', only the status of sensors in this list is considered.
    include:
      - binary_sensor.front_door
      - binary_sensor.back_door
      - binary_sensor.living_room_window
    styles:
      # Rule 1: If any door or window is open...
      # For 'binary_sensor', the 'on' (true) state is considered "active".
      - condition: if_any_true
        text: '{{ true_count }} Open!'
        secondary_text: Unsecured
        icon: mdi:shield-alert
        color: 'crimson'

# Rule 2: If all doors and windows are closed...
      - condition: if_all_false
        text: All Secure
        secondary_text: House is locked down
        icon: mdi:shield-check
        color: 'teal'

# --- CARD 4: Media Player Summary ---
  # This card summarizes media players, EXCLUDING the one in the guest room.
  - domain: media_player
    name: Media
    # With 'exclude', entities in this list are not included in the summary calculation.
    exclude:
      - media_player.guest_room_display
    styles:
      # Rule 1: If any media player is playing...
      - condition: if_any_playing
        text: '{{ playing_count }} Playing'
        icon: mdi:cast-connected
        color: 'deepskyblue'

# Rule 2: If any media player is paused...
      - condition: if_any_paused
        text: '{{ paused_count }} Paused'
        icon: mdi:pause-circle
        color: 'var(--secondary-text-color)'

# Rule 3: If all media players are idle...
      - condition: if_all_idle
        text: All Idle
        icon: mdi:cast
        color: 'var(--secondary-text-color)'
```

### Example 4: Creative Use Case - Plant Care Dashboard
Do you have plant moisture sensors? You can create a card to tell you when your plants are thirsty! This assumes your moisture sensors are binary_sensors that are 'on' (active) when the plant is dry.

```yaml
type: custom:summary-card
columns: 1
cards:
  # --- PLANT CARE CARD ---
  # This card summarizes the status of multiple plant moisture sensors.
  - domain: binary_sensor
    name: Plant Care
    # You should list the entity_ids of your own plant moisture sensors in the 'include' section.
    # This list ensures that only the specified sensors are tracked.
    include:
      - binary_sensor.fiddle_leaf_fig_moisture
      - binary_sensor.snake_plant_moisture
      - binary_sensor.monstera_moisture

# STYLES (SCENARIOS)
    # The card evaluates conditions from top to bottom and applies the first style that matches.
    styles:
      # Rule 1: Does any plant need water?
      # For a 'binary_sensor', the 'on' (true) state is considered "active".
      # In this example, an 'on' state from the sensor means the soil is dry.
      - condition: if_any_true
        # '{{ true_count }}' shows the number of plants that need water.
        text: '{{ true_count }} Thirsty Plant(s)'
        secondary_text: Time to get the watering can!
        icon: mdi:water-alert
        color: '#E53935' # Red

# Rule 2: Are all plants sufficiently watered?
      # If the above condition is not met, this will be shown as the default state.
      - condition: if_all_false
        text: Plants are Happy
        secondary_text: All watered and content
        icon: mdi:leaf
        color: '#388E3C' # Green
```

### Example 5: Just Icons For Mobile Phone
No need to words? Are icons are ok for your small screen?

![image10](https://raw.githubusercontent.com/cataseven/Summary-Card/main/images/mobile.png)
```yaml
type: custom:summary-card
columns: "10"
row_height: 60px
cards:
 - domain: switch
 include:
 - switch.kitchen
 styles:
 - condition: any_unavailable
 icon: mdi:lightning-bolt
 color: red
 - condition: if_all_off
 icon: mdi:lightning-bolt
 color: green
 template_conditions:
 - "{{ is_state_attr('switch.kitchen', 'current', 0) }}"
 - condition: if_any_on
 icon: mdi:lightning-bolt
 color: red
 template_conditions:
 - "{{ not is_state_attr('switch.kitchen', 'current', 0) }}"
 - domain: sensor
 include:
 - sensor.current_water_level
 styles:
 - condition: any_unavailable
 icon: mdi:water-percent-alert
 color: red
 - condition: if_any_equal
 value: "0"
 icon: mdi:water-percent
 color: green
 template_conditions: []
 - condition: if_any_not_equal
 value: "0"
 icon: mdi:water-percent-alert
 color: red
 template_conditions: []
 - domain: cover
 styles:
 - condition: if_any_open
 icon: mdi:garage-alert-variant
 color: red
 template_conditions:
 - "{{ is_state('binary_sensor.garage_door', 'on') }}"
 - condition: if_all_closed
 icon: mdi:window-shutter
 color: green
 template_conditions:
 - >-
 {% set un_shutters = states.cover | selectattr('state', 'eq',
 'unavailable') | map(attribute='entity_id') | list %} {% set
 open_shutters = states.cover | selectattr('state', 'ne',
 'unavailable') | selectattr('attributes.current_position', 'ge', 1)
 | map(attribute='entity_id') | list %} {{ open_shutters | length ==
 0 and un_shutters | length == 0 }}
 - condition: if_any_open
 icon: mdi:window-shutter-open
 color: red
 template_conditions:
 - "{{ now().hour >= 0 and now().hour < 5 }}"
 - condition: if_any_open
 icon: mdi:window-shutter-open
 color: red
 template_conditions:
 - "{{ is_state('group.family', 'away') }}"
 - condition: any_unavailable
 icon: mdi:window-shutter-alert
 color: red
 template_conditions:
 - "{{ is_state('group.family', 'away') }}"
 - condition: any_unavailable
 icon: mdi:window-shutter-alert
 color: orange
 template_conditions:
 - "{{ is_state('group.family', 'home') }}"
 - condition: if_any_open
 icon: mdi:window-shutter-open
 color: green
 template_conditions:
 - >-
 {{ is_state('group.family', 'home') and ('05:00' <=
 now().strftime('%H:%M') <= '23:59')}}
 - domain: switch
 include:
 - switch.zone_1
 - switch.zone_2
 - switch.zone_3
 - switch.zone_4
 - switch.zone_5
 - switch.zone_6
 - switch.zone_7
 - switch.zone_8
 - switch.zone_9
 - switch.zone_10
 - switch.zone_11
 styles:
 - condition: any_unavailable
 icon: mdi:wifi-off
 color: red
 - condition: if_all_off
 icon: mdi:sprinkler
 color: green
 - condition: if_any_on
 text: >-
 {% set zone_switches = expand('switch.zone_1', 'switch.zone_2',
 'switch.zone_3', 'switch.zone_4', 'switch.zone_5', 'switch.zone_6',
 'switch.zone_7', 'switch.zone_8', 'switch.zone_9', 'switch.zone_10',
 'switch.zone_11') %} {% set on_switch = zone_switches |
 selectattr('state', 'eq', 'on') | first %} {{on_switch.name}} is On
 icon: mdi:sprinkler-variant
 color: blue
 - domain: camera
 styles:
 - condition: any_unavailable
 icon: mdi:video-box-off
 color: red
 - condition: if_any_streaming
 icon: mdi:video-check
 color: green

```
### Example 6: Just Icons For Mobile Phone with more info popups

![image10](https://raw.githubusercontent.com/cataseven/Summary-Card/main/images/moreinfos.png)
```
type: custom:summary-card
row_height: 73px
cards:
 - domain: light
 styles:
 - condition: any_unavailable
 color: red
 icon: mdi:lightbulb-alert
 - condition: if_any_on
 value: "0.0"
 icon: mdi:lightbulb-on
 template_conditions: []
 color: "#ffa500"
 - condition: if_all_off
 value: "0.0"
 icon: mdi:lightbulb-outline
 color: "#4caf50"
 template_conditions: []
 tap_action:
 action: more-info
 include:
 - light.veranda_back_2
 - light.veranda_back_1
 - light.backyard
 - light.veranda_front
 - light.on_bahce
 - light.pool_light
 - light.salon_aplik
 - domain: cover
 styles:
 - condition: if_any_open
 icon: mdi:garage-alert-variant
 color: red
 template_conditions:
 - "{{ is_state('binary_sensor.garage_door', 'on') }}"
 - condition: if_all_closed
 icon: mdi:window-shutter
 color: "#4caf50"
 template_conditions: []
 - condition: if_any_open
 icon: mdi:window-shutter-open
 color: red
 template_conditions:
 - "{{ now().hour >= 0 and now().hour < 5 }}"
 - condition: if_any_open
 icon: mdi:window-shutter-open
 color: red
 template_conditions:
 - "{{ is_state('group.family', 'not_home') }}"
 - condition: any_unavailable
 icon: mdi:window-shutter-alert
 color: red
 template_conditions:
 - "{{ is_state('group.family', 'not_home') }}"
 - condition: any_unavailable
 icon: mdi:window-shutter-alert
 color: orange
 template_conditions:
 - "{{ is_state('group.family', 'home') }}"
 - condition: if_any_open
 icon: mdi:window-shutter-open
 color: "#4caf50"
 template_conditions:
 - >-
 {{ is_state('group.family', 'home') and ('05:00' <=
 now().strftime('%H:%M') <= '23:59')}}
 tap_action:
 action: more-info
 - domain: switch
 include:
 - switch.zone_1
 - switch.zone_2
 - switch.zone_3
 - switch.zone_4
 - switch.zone_5
 - switch.zone_6
 - switch.zone_7
 - switch.zone_8
 - switch.zone_9
 - switch.zone_10
 - switch.zone_11
 styles:
 - condition: any_unavailable
 icon: mdi:wifi-off
 color: red
 - condition: if_all_off
 icon: mdi:sprinkler
 color: "#4caf50"
 - condition: if_any_on
 text: >-
 {% set zone_switches = expand('switch.zone_1', 'switch.zone_2',
 'switch.zone_3', 'switch.zone_4', 'switch.zone_5', 'switch.zone_6',
 'switch.zone_7', 'switch.zone_8', 'switch.zone_9', 'switch.zone_10',
 'switch.zone_11') %} {% set on_switch = zone_switches |
 selectattr('state', 'eq', 'on') | first %} {{on_switch.name}} is On
 icon: mdi:sprinkler-variant
 color: "#3399ff"
 tap_action:
 action: navigate
 navigation_path: /lovelace-phone/garden?y=940
 hold_action:
 action: more-info
 - domain: media_player
 styles:
 - condition: if_any_playing
 icon: mdi:television
 color: "#ffa500"
 - condition: if_any_off
 icon: mdi:television-off
 color: "#4caf50"
 template_conditions: []
 - condition: if_any_paused
 icon: mdi:television
 color: "#ffa500"
 - condition: if_any_idle
 icon: mdi:television
 color: "#ffa500"
 - condition: if_any_on
 icon: mdi:television
 color: "#ffa500"
 include:
 - media_player.living_room
 - media_player.toshiba
 - media_player.spotify_cenkataseven
 - domain: alarm_control_panel
 styles:
 - condition: any_unavailable
 icon: mdi:wifi-off
 color: "#ff0000"
 - condition: if_any_disarmed
 icon: mdi:security
 color: red
 template_conditions:
 - "{{ is_state('group.family', 'not_home') }}"
 - condition: if_any_disarmed
 template_conditions:
 - "{{ is_state('group.family', 'home') }}"
 color: "#4caf50"
 icon: mdi:shield-off
 - condition: if_any_armed
 icon: mdi:shield-lock
 color: "#4caf50"
 template_conditions: []
 - condition: if_any_triggered
 color: "#ff0000"
 text: Triggered
 icon: mdi:alarm-light
 include:
 - alarm_control_panel.alarm_home_alarm
 tap_action:
 action: navigate
 navigation_path: /lovelace-phone/Alarm
 - domain: camera
 styles:
 - condition: any_unavailable
 icon: mdi:video-box-off
 color: red
 - condition: if_any_idle
 icon: mdi:video-check
 color: "#4caf50"
 tap_action:
 action: more-info
 navigation_path: /lovelace-phone/garden
 include:
 - camera.front
 - camera.garage
 - camera.side
 - camera.pool
 - domain: vacuum
 styles:
 - condition: if_all_docked
 icon: mdi:robot-vacuum
 color: "#4caf50"
 - condition: if_any_cleaning
 color: "#0000ff"
 - condition: if_any_returning
 color: "#ffff00"
 - condition: if_any_error
 text: Active
 color: "#ff0000"
 - condition: any_unavailable
 text: Active
 color: "#ff0000"
 include:
 - vacuum.viomi_v13
 tap_action:
 action: more-info
 show_input_select: true
 input_select_entities:
 - input_select.map
 hold_action:
 action: navigate
 navigation_path: /lovelace-phone/vacuum-media
 - domain: switch
 styles:
 - condition: any_unavailable
 icon: mdi:pool
 color: "#ff0000"
 - condition: if_any_on
 color: "#00d5ff"
 icon: mdi:pool
 - condition: if_all_off
 color: "#4caf50"
 icon: mdi:pool
 include:
 - switch.pool
 - domain: binary_sensor
 include:
 - binary_sensor.garage_door
 styles:
 - condition: any_unavailable
 icon: mdi:gate-alert
 color: red
 - condition: if_all_false
 icon: mdi:garage-variant
 color: "#4caf50"
 template_conditions: []
 - condition: if_any_true
 icon: mdi:garage-open-variant
 color: "#ffa500"
 tap_action:
 action: perform-action
 confirmation:
 text: Are you sure to toggle Garage Door?
 perform_action: switch.toggle
 target:
 entity_id: switch.garage_door
 data: {}
 hold_action:
 action: perform-action
 confirmation:
 text: Are you sure to toggle Driveway Gate?
 perform_action: switch.toggle
 target:
 entity_id: switch.driveway
 data: {}
 - domain: zone
 styles:
 - condition: if_any_above
 icon: mdi:account
 color: "#4caf50"
 value: 0
 template_conditions:
 - >-
 {{ is_state('person.cenk', 'home') and is_state('person.derya',
 'home') }}
 - condition: if_any_equal
 icon: mdi:account
 color: "#ff0000"
 template_conditions: []
 value: 0
 - condition: if_any_above
 template_conditions:
 - >-
 {{ is_state('person.cenk', 'not_home') or is_state('person.derya',
 'not_home') }}
 value: 0
 color: "#ffa500"
 icon: mdi:account
 include:
 - zone.home
 tap_action:
 action: navigate
 navigation_path: /lovelace-phone/navigation
 hold_action:
 action: more-info
 - domain: sensor
 include:
 - sensor.current_water_level
 styles:
 - condition: any_unavailable
 icon: mdi:water-percent-alert
 color: red
 - condition: if_any_equal
 value: "0.0"
 icon: mdi:water-percent
 color: "#4caf50"
 template_conditions: []
 - condition: if_any_not_equal
 value: "0.0"
 icon: mdi:water-percent-alert
 color: red
 template_conditions: []
 hold_action:
 action: none
 double_tap_action:
 action: more-info
 tap_action:
 action: more-info
 - domain: input_boolean
 styles:
 - condition: if_all_off
 icon: mdi:exclamation-thick
 color: "#ff0000"
 - condition: if_any_on
 color: "#4caf50"
 template_conditions:
 - "{{ is_state('input_boolean.home', 'on') }}"
 icon: mdi:home-circle-outline
 - condition: if_any_on
 icon: mdi:food-turkey
 template_conditions:
 - "{{ is_state('input_boolean.guest', 'on') }}"
 color: "#ffa500"
 - condition: if_any_on
 template_conditions:
 - "{{ is_state('input_boolean.holiday', 'on') }}"
 color: "#00fffb"
 icon: mdi:beach
 include:
 - input_boolean.home
 - input_boolean.guest
 - input_boolean.holiday
columns: "4"

```
### Example 7: Template Text

![image10](https://raw.githubusercontent.com/cataseven/Summary-Card/main/images/pool1.png)

```
type: custom:summary-card
row_height: 60px
cards:
  - domain: switch
    name: Pool
    include:
      - switch.pool
    styles:
      - condition: any_unavailable
        text: Unavailable
        secondary_text: Check Device
      - condition: if_any_on
        text: >-
          {% set on_ts = states('sensor.pool_is_on') | float(0) %} {% set diff =
          (as_timestamp(now()) - on_ts) | int(0) %} {% set h = diff // 3600 %}
          {% set m = (diff % 3600) // 60 %} {% set s = diff % 60 %}

{% if diff < 60 %}
 Running for {{ s }}s
 {% else %}
 Running for {% if h > 0 %}{{ h }}h {% endif %}{{ m }}m
 {% endif %}
 icon: mdi:pool
 color: "#0079fa"
 - condition: if_all_off
 text: >-
 {% set off_ts = states('sensor.pool_is_off') | float(0) %} {% set
 on_ts = states('sensor.pool_is_on') | float(0) %}

{# Ne kadar süre önce kapandığı (ago) hesaplaması #} {% set diff_ago =
 (as_timestamp(now()) - off_ts) | int(0) %} {% set ago_h = diff_ago //
 3600 %} {% set ago_m = (diff_ago % 3600) // 60 %} {% set ago_s =
 diff_ago % 60 %} {% set ago_str = ago_s ~ 's' if diff_ago < 60 else
 ((ago_h ~ 'h ' if ago_h > 0 else '') ~ ago_m ~ 'm') %}

{# Ne kadar süre çalıştığı (duration) hesaplaması #} {% set diff_dur =
 (off_ts - on_ts) | int(0) %} {% set dur_h = diff_dur // 3600 %} {% set
 dur_m = (diff_dur % 3600) // 60 %} {% set dur_s = diff_dur % 60 %} {%
 set dur_str = dur_s ~ 's' if diff_dur < 60 else ((dur_h ~ 'h ' if
 dur_h > 0 else '') ~ dur_m ~ 'm') %}

Turned Off {{ ago_str }} ago after running {{ dur_str }}
        icon: mdi:pool
        color: "#4caf50"
    tap_action:
      action: more-info
```
---
## ⭐ Support

If you like this card, feel free to ⭐ star the project on GitHub and share it with the Home Assistant community!
---

## 📄 License

---

Summary-Card

Summary-Card 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Summary-Card

Summary-Card 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README