📝 Material Template Card

NOTE

✨ Available on 💎 Pro & Ultimate Version Only

🌟 Overview

The Material Template Card is a highly flexible and customizable card that allows you to display dynamic content based on Home Assistant entity states and templates. It's perfect for creating unique visual elements and interactive controls tailored to your specific needs.

☀️ Light Mode

🌙 Dark Mode

✨ Features

• Dynamic Content: Use Jinja2-like templates to display entity states, attributes, and custom text.
• Customizable Appearance: Full control over icon, text, and background colors.
• Actionable: Supports tap_action, hold_action, and double_tap_action for interactive control.
• Icon Support: Display any Home Assistant icon or Material Design icon.
• Offline State Handling: Visually indicates when an entity is offline.
• Responsive Design: Adapts to different screen sizes.

⚙️ Configuration

The material-template-card offers extensive configuration options to tailor its appearance and behavior.

type: custom:material-template-card
entity: light.your_light_entity # Optional: The entity to associate with the card
name: "[[[ return states['light.your_light_entity'].attributes.friendly_name ]]]" # Optional: Display name, supports templating
icon: "[[[ return states['light.your_light_entity'].state === 'on' ? 'mdi:lightbulb' : 'mdi:lightbulb-off' ]]]" # Optional: Icon, supports templating
text: "[[[ return states['light.your_light_entity'].state === 'on' ? 'Accesa' : 'Spenta' ]]]" # Optional: Text below the name, supports templating
icon_color: "[[[ return states['light.your_light_entity'].state === 'on' ? 'var(--google-green-500)' : 'var(--google-grey-500)' ]]]" # Optional: Color of the icon, supports templating
text_color: "var(--primary-text-color)" # Optional: Color of the text
background_color: "var(--card-background-color)" # Optional: Background color of the card
tap_action:
  action: toggle # Action when the card is tapped
hold_action:
  action: more-info # Action when the card is held
double_tap_action:
  action: call-service
  service: light.turn_on
  data:
    entity_id: light.your_light_entity
control_type: ACTION # Optional: Can be used to influence icon display (e.g., THERMOMETER, MEDIA_PLAYER, ACTION, STATE)

📊 Options Reference

Name	Type	Description	Default	Required
type	string	custom:material-template-card		✅ Yes
entity	string	The entity ID to associate with the card. 🆔		❌ No
name	string	The title to display on the card. Supports JavaScript templating. 📛		❌ No
icon	string	A custom icon to display (e.g., mdi:lightbulb). Supports JavaScript templating. ✨		❌ No (If empty, uses entity default)
text	string	Supplementary text to display below the name. Supports JavaScript templating. 🔡		❌ No
icon_color	string	Color code or CSS variable for the icon. Supports JavaScript templating. 🎨		❌ No
text_color	string	Color code or CSS variable for the text elements.		❌ No
background_color	string	Color code or CSS variable for the card background.		❌ No
control_type	string	Type of control layout to influence the icon display (THERMOMETER, MEDIA_PLAYER, ACTION, STATE).	ACTION	❌ No
tap_action	object	Action to perform on single tap. See Actions for options. 👇		❌ No (Defaults to more-info)
hold_action	object	Action to perform on long press. See Actions for options. ⏱️		❌ No
double_tap_action	object	Action to perform on double tap. See Actions for options. ⚡		❌ No

🔗 Templating (Jinja2 & JavaScript)

The card offers comprehensive support for dynamic templating, allowing you to use both Home Assistant's native syntax (Jinja2) and JavaScript expressions to evaluate states, attributes, and styles in real-time.

The following fields support templating: name, icon, text, icon_color, text_color, and background_color.

🔹 Jinja2 Syntax (Home Assistant Native)

Ideal for quickly fetching states and attributes using standard Home Assistant template methods.

🔹 JavaScript Syntax

Perfect for advanced logical manipulations and complex conditions evaluated directly on the frontend.

TIP

For a comprehensive guide, ready-to-use code snippets, and structured examples on how to make the most of both engines, check out our Template Configurations Documentation.

⚠️ Note: Highly complex templates, loops, or advanced custom JS scripts must be configured and edited directly via the YAML editor.