90 |
91 | ```yaml
92 | type: 'custom:button-text-card'
93 | title: Large version
94 | subtitle: Ideal for important messages
95 | icon: 'mdi:battery-high'
96 | large: true
97 | ```
98 |
99 | **Custom background & font colors**
100 |
101 |
102 |
103 |
104 | ```yaml
105 | type: 'custom:button-text-card'
106 | title: Warning!
107 | subtitle: Draw attention with custom colors
108 | icon: 'mdi:comment-alert'
109 | large: true
110 | font_color: '#fff'
111 | background_color: '#A81419'
112 | ```
113 |
114 | # Templating
115 |
116 | For templating, we do **NOT** support Jinja2. Instead we opted to use Javascript as templating language (like [button-card](https://github.com/custom-cards/button-card)).
117 |
118 | Templating is supported in most fields (see [options](#options) for more details). Since these templates are executed in the front-end, there is no impact on the performance of your Home Assistant installation. It does, however, mean that you have to learn some Javascript.
119 |
120 | Templates are enclosed by tripple brackets and can contain any valid Javascript: `[[[ return "Hello from Javascript!" ]]]`
121 |
122 | **Example: counting people home**
123 |
124 |
125 |
126 |
127 | ```yaml
128 | type: 'custom:button-text-card'
129 | icon: >
130 | [[[
131 | const count = Object.entries(states).filter(e => e[0].indexOf('person.') === 0 && e[1].state === "home").length;
132 |
133 | if(count === 0){
134 | return "mdi:home-export-outline";
135 | }else{
136 | return "mdi:home-import-outline";
137 | }
138 | ]]]
139 | title: |
140 | [[[
141 | const count = Object.entries(states).filter(e => e[0].indexOf('person.') === 0 && e[1].state === "home").length;
142 | return "People home: " + count;
143 | ]]]
144 | subtitle: Support for templating!
145 | ```
146 |
147 | # Conditional hiding
148 | You can use a Javascript template to dynamically hide a card. This can be useful to create contextual cards (eg: only show when the front door is open, when there are lights on, ...).
149 |
150 | To do so, write a Javascript template in the `hide_condition` attribute and return `true` if the card should be hidden.
151 |
152 |
153 | **Example: Only show card when music is playing**
154 |
155 |
156 |
157 |
158 | ```yaml
159 | type: 'custom:button-text-card'
160 | title: There is music playing
161 | icon: 'mdi:music-circle'
162 | hide_condition: |
163 | [[[
164 | const active_players = Object.entries(states).filter(e => e[0].indexOf('media_player.')===0 && e[1].state === 'playing');
165 | return active_players.length === 0;
166 | ]]]
167 | ```
168 |
169 | Cool feature: when you go into edit mode, all hidden cards will appear with an opacity of 50%. That way you can easily manage all your cards.
170 |
171 |
172 |
173 |
174 |
175 | **Example: Only show card when the front door is open**
176 |
4 | 
66 | 
78 | 
89 | 
102 | 
125 | 
156 | 
173 | 
178 |