h3n3/nspanel-lovelace-ui
1
0
Fork 0
mirror of https://github.com/joBr99/nspanel-lovelace-ui.git synced 2026-02-23 13:02:14 +01:00
Code Issues Packages Projects Releases Wiki Activity
Files
e3f3858d1e5edf94b9ba561cc350d7d71ac7001d
nspanel-lovelace-ui/standalone/cards/index.html
joBr99 e3f3858d1e deploy: d745d63def
2026-02-22 00:21:10 +00:00

964 lines
30 KiB
HTML
Raw Blame History

<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="Documentation for the standalone/Home Assistant add-on rewrite in nspanel-lovelace-ui.">
<meta name="author" content="Johannes Braun">
<link rel="canonical" href="https://jobr99.github.io/nspanel-lovelace-ui/standalone/cards/">
<link rel="prev" href="../screensaver/">
<link rel="next" href="../entities/">
<link rel="icon" href="../assets/images/favicon.png">
<meta name="generator" content="zensical-0.0.23">
<title>Cards - NsPanel Lovelace UI Standalone Docs</title>
<link rel="stylesheet" href="../assets/stylesheets/modern/main.1e989742.min.css">
<link rel="stylesheet" href="../assets/stylesheets/modern/palette.dfe2e883.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=arial,+sans-serif:300,300i,400,400i,500,500i,700,700i%7Cmonospace:400,400i,700,700i&display=fallback">
<style>:root{--md-text-font:"arial, sans-serif";--md-code-font:"monospace"}</style>
<link rel="stylesheet" href="../_assets/user.css">
<script>__md_scope=new URL("..",location),__md_hash=e=>[...e].reduce(((e,t)=>(e<<5)-e+t.charCodeAt(0)),0),__md_get=(e,t=localStorage,a=__md_scope)=>JSON.parse(t.getItem(a.pathname+"."+e)),__md_set=(e,t,a=localStorage,_=__md_scope)=>{try{a.setItem(_.pathname+"."+e,JSON.stringify(t))}catch(e){}},document.documentElement.setAttribute("data-platform",navigator.platform)</script>
</head>
<body dir="ltr" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="blue">
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
<a href="#cards" class="md-skip">
Skip to content
</a>
</div>
<div data-md-component="announce">
</div>
<header class="md-header md-header--shadow" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="Header">
<a href="./.." title="NsPanel Lovelace UI Standalone Docs" class="md-header__button md-logo" aria-label="NsPanel Lovelace UI Standalone Docs" data-md-component="logo">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="lucide lucide-book-open" viewBox="0 0 24 24"><path d="M12 7v14M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></svg>
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="lucide lucide-menu" viewBox="0 0 24 24"><path d="M4 5h16M4 12h16M4 19h16"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
NsPanel Lovelace UI Standalone Docs
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
Cards
</span>
</div>
</div>
</div>
<form class="md-header__option" data-md-component="palette">
<input class="md-option" data-md-color-media="none" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="blue" aria-hidden="true" type="radio" name="__palette" id="__palette_0">
</form>
<script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="lucide lucide-search" viewBox="0 0 24 24"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg>
</label>
<div class="md-search" data-md-component="search" role="dialog" aria-label="Search">
<button type="button" class="md-search__button">
Search
</button>
</div>
<div class="md-header__source">
<a href="https://github.com/jobr99/nspanel-lovelace-ui" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path fill="currentColor" d="M439.6 236.1 244 40.5c-5.4-5.5-12.8-8.5-20.4-8.5s-15 3-20.4 8.4L162.5 81l51.5 51.5c27.1-9.1 52.7 16.8 43.4 43.7l49.7 49.7c34.2-11.8 61.2 31 35.5 56.7-26.5 26.5-70.2-2.9-56-37.3L240.3 199v121.9c25.3 12.5 22.3 41.8 9.1 55-6.4 6.4-15.2 10.1-24.3 10.1s-17.8-3.6-24.3-10.1c-17.6-17.6-11.1-46.9 11.2-56v-123c-20.8-8.5-24.6-30.7-18.6-45L142.6 101 8.5 235.1C3 240.6 0 247.9 0 255.5s3 15 8.5 20.4l195.6 195.7c5.4 5.4 12.7 8.4 20.4 8.4s15-3 20.4-8.4l194.7-194.7c5.4-5.4 8.4-12.8 8.4-20.4s-3-15-8.4-20.4"/></svg>
</div>
<div class="md-source__repository">
jobr99/nspanel-lovelace-ui
</div>
</a>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href="./.." title="NsPanel Lovelace UI Standalone Docs" class="md-nav__button md-logo" aria-label="NsPanel Lovelace UI Standalone Docs" data-md-component="logo">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="lucide lucide-book-open" viewBox="0 0 24 24"><path d="M12 7v14M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></svg>
</a>
NsPanel Lovelace UI Standalone Docs
</label>
<div class="md-nav__source">
<a href="https://github.com/jobr99/nspanel-lovelace-ui" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path fill="currentColor" d="M439.6 236.1 244 40.5c-5.4-5.5-12.8-8.5-20.4-8.5s-15 3-20.4 8.4L162.5 81l51.5 51.5c27.1-9.1 52.7 16.8 43.4 43.7l49.7 49.7c34.2-11.8 61.2 31 35.5 56.7-26.5 26.5-70.2-2.9-56-37.3L240.3 199v121.9c25.3 12.5 22.3 41.8 9.1 55-6.4 6.4-15.2 10.1-24.3 10.1s-17.8-3.6-24.3-10.1c-17.6-17.6-11.1-46.9 11.2-56v-123c-20.8-8.5-24.6-30.7-18.6-45L142.6 101 8.5 235.1C3 240.6 0 247.9 0 255.5s3 15 8.5 20.4l195.6 195.7c5.4 5.4 12.7 8.4 20.4 8.4s15-3 20.4-8.4l194.7-194.7c5.4-5.4 8.4-12.8 8.4-20.4s-3-15-8.4-20.4"/></svg>
</div>
<div class="md-source__repository">
jobr99/nspanel-lovelace-ui
</div>
</a>
</div>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="./.." class="md-nav__link">
<span class="md-ellipsis">
Overview
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../getting-started/" class="md-nav__link">
<span class="md-ellipsis">
Getting Started
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../configuration/" class="md-nav__link">
<span class="md-ellipsis">
Configuration
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../migration-appdaemon/" class="md-nav__link">
<span class="md-ellipsis">
Migration from AppDaemon
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../screensaver/" class="md-nav__link">
<span class="md-ellipsis">
Screensaver
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
<span class="md-ellipsis">
Cards
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<a href="././" class="md-nav__link md-nav__link--active">
<span class="md-ellipsis">
Cards
</span>
</a>
<nav class="md-nav md-nav--secondary" aria-label="On this page">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
On this page
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#supported-card-types" class="md-nav__link">
<span class="md-ellipsis">
Supported card types
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#common-card-keys" class="md-nav__link">
<span class="md-ellipsis">
Common card keys
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#cardentities-and-cardgrid" class="md-nav__link">
<span class="md-ellipsis">
cardEntities and cardGrid
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#cardqr" class="md-nav__link">
<span class="md-ellipsis">
cardQR
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#cardpower" class="md-nav__link">
<span class="md-ellipsis">
cardPower
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#cardmedia" class="md-nav__link">
<span class="md-ellipsis">
cardMedia
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#cardthermo" class="md-nav__link">
<span class="md-ellipsis">
cardThermo
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#cardalarm" class="md-nav__link">
<span class="md-ellipsis">
cardAlarm
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#cardunlock" class="md-nav__link">
<span class="md-ellipsis">
cardUnlock
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../entities/" class="md-nav__link">
<span class="md-ellipsis">
Entities
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../connection-modes/" class="md-nav__link">
<span class="md-ellipsis">
Connection Modes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../troubleshooting/" class="md-nav__link">
<span class="md-ellipsis">
Troubleshooting
</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--secondary" aria-label="On this page">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
On this page
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#supported-card-types" class="md-nav__link">
<span class="md-ellipsis">
Supported card types
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#common-card-keys" class="md-nav__link">
<span class="md-ellipsis">
Common card keys
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#cardentities-and-cardgrid" class="md-nav__link">
<span class="md-ellipsis">
cardEntities and cardGrid
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#cardqr" class="md-nav__link">
<span class="md-ellipsis">
cardQR
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#cardpower" class="md-nav__link">
<span class="md-ellipsis">
cardPower
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#cardmedia" class="md-nav__link">
<span class="md-ellipsis">
cardMedia
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#cardthermo" class="md-nav__link">
<span class="md-ellipsis">
cardThermo
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#cardalarm" class="md-nav__link">
<span class="md-ellipsis">
cardAlarm
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#cardunlock" class="md-nav__link">
<span class="md-ellipsis">
cardUnlock
</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<article class="md-content__inner md-typeset">
<h1 id="cards">Cards<a class="headerlink" href="#cards" title="Permanent link">&para;</a></h1>
<h2 id="supported-card-types">Supported card types<a class="headerlink" href="#supported-card-types" title="Permanent link">&para;</a></h2>
<ul>
<li><code>cardEntities</code></li>
<li><code>cardGrid</code></li>
<li><code>cardQR</code></li>
<li><code>cardPower</code></li>
<li><code>cardMedia</code></li>
<li><code>cardThermo</code></li>
<li><code>cardAlarm</code></li>
<li><code>cardUnlock</code></li>
</ul>
<h2 id="common-card-keys">Common card keys<a class="headerlink" href="#common-card-keys" title="Permanent link">&para;</a></h2>
<table>
<thead>
<tr>
<th>key</th>
<th>required</th>
<th>type</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>type</code></td>
<td>yes</td>
<td>string</td>
<td>Card type.</td>
</tr>
<tr>
<td><code>title</code></td>
<td>no</td>
<td>string</td>
<td>Card title.</td>
</tr>
<tr>
<td><code>key</code></td>
<td>no</td>
<td>string</td>
<td>Navigation key used by <code>navigate.&lt;key&gt;</code>.</td>
</tr>
</tbody>
</table>
<h2 id="cardentities-and-cardgrid"><code>cardEntities</code> and <code>cardGrid</code><a class="headerlink" href="#cardentities-and-cardgrid" title="Permanent link">&para;</a></h2>
<div class="highlight"><pre><span></span><code><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">type</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">cardEntities</span>
<span class="w"> </span><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">Main</span>
<span class="w"> </span><span class="nt">key</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">main</span>
<span class="w"> </span><span class="nt">entities</span><span class="p">:</span>
<span class="w"> </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">entity</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">light.kitchen</span>
<span class="w"> </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">entity</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">navigate.settings</span>
<span class="w"> </span><span class="nt">icon</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">mdi:cog</span>
</code></pre></div>
<ul>
<li><code>entities</code> is required.</li>
<li><code>cardGrid</code> auto-switches to <code>cardGrid2</code> if more than 6 entities are present.</li>
</ul>
<h2 id="cardqr"><code>cardQR</code><a class="headerlink" href="#cardqr" title="Permanent link">&para;</a></h2>
<div class="highlight"><pre><span></span><code><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">type</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">cardQR</span>
<span class="w"> </span><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">Guest WiFi</span>
<span class="w"> </span><span class="nt">qrCode</span><span class="p">:</span><span class="w"> </span><span class="s">&quot;WIFI:S:myssid;T:WPA;P:mypassword;;&quot;</span>
<span class="w"> </span><span class="nt">entities</span><span class="p">:</span>
<span class="w"> </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">entity</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">iText.myssid</span>
<span class="w"> </span><span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">SSID</span>
<span class="w"> </span><span class="nt">icon</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">mdi:wifi</span>
</code></pre></div>
<p>Keys:</p>
<ul>
<li><code>qrCode</code> optional (default value exists, but set it explicitly)</li>
<li>supports optional <code>entity</code> / <code>entities</code></li>
</ul>
<h2 id="cardpower"><code>cardPower</code><a class="headerlink" href="#cardpower" title="Permanent link">&para;</a></h2>
<div class="highlight"><pre><span></span><code><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">type</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">cardPower</span>
<span class="w"> </span><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">Energy</span>
<span class="w"> </span><span class="nt">entities</span><span class="p">:</span>
<span class="w"> </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">entity</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">sensor.house_power</span>
<span class="w"> </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">entity</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">delete</span>
<span class="w"> </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">entity</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">sensor.solar_power</span>
</code></pre></div>
<p>Notes:</p>
<ul>
<li><code>entities</code> is required.</li>
<li><code>speed</code> key is accepted in config but currently not applied by the renderer.</li>
</ul>
<h2 id="cardmedia"><code>cardMedia</code><a class="headerlink" href="#cardmedia" title="Permanent link">&para;</a></h2>
<div class="highlight"><pre><span></span><code><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">type</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">cardMedia</span>
<span class="w"> </span><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">Living Room</span>
<span class="w"> </span><span class="nt">entity</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">media_player.living_room</span>
<span class="w"> </span><span class="nt">entities</span><span class="p">:</span>
<span class="w"> </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">entity</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">light.ambient</span>
<span class="w"> </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">entity</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">switch.tv_bias_light</span>
</code></pre></div>
<p>Notes:</p>
<ul>
<li>Main media entity must exist (<code>entity</code> or first generated entity).</li>
<li>Additional <code>entities</code> are rendered as action buttons on the bottom row.</li>
</ul>
<h2 id="cardthermo"><code>cardThermo</code><a class="headerlink" href="#cardthermo" title="Permanent link">&para;</a></h2>
<div class="highlight"><pre><span></span><code><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">type</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">cardThermo</span>
<span class="w"> </span><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">Heating</span>
<span class="w"> </span><span class="nt">entity</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">climate.downstairs</span>
<span class="w"> </span><span class="nt">supported_modes</span><span class="p">:</span><span class="w"> </span><span class="p p-Indicator">[</span><span class="s">&quot;heat&quot;</span><span class="p p-Indicator">,</span><span class="w"> </span><span class="s">&quot;off&quot;</span><span class="p p-Indicator">]</span>
</code></pre></div>
<p>Keys:</p>
<ul>
<li><code>entity</code> required</li>
<li><code>supported_modes</code> optional (filters shown HVAC mode buttons)</li>
</ul>
<h2 id="cardalarm"><code>cardAlarm</code><a class="headerlink" href="#cardalarm" title="Permanent link">&para;</a></h2>
<div class="highlight"><pre><span></span><code><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">type</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">cardAlarm</span>
<span class="w"> </span><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">House Alarm</span>
<span class="w"> </span><span class="nt">entity</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">alarm_control_panel.house</span>
<span class="w"> </span><span class="nt">supported_modes</span><span class="p">:</span><span class="w"> </span><span class="p p-Indicator">[</span><span class="s">&quot;arm_home&quot;</span><span class="p p-Indicator">,</span><span class="w"> </span><span class="s">&quot;arm_away&quot;</span><span class="p p-Indicator">,</span><span class="w"> </span><span class="s">&quot;arm_night&quot;</span><span class="p p-Indicator">]</span>
</code></pre></div>
<p>Keys:</p>
<ul>
<li><code>entity</code> required</li>
<li><code>supported_modes</code> optional</li>
</ul>
<h2 id="cardunlock"><code>cardUnlock</code><a class="headerlink" href="#cardunlock" title="Permanent link">&para;</a></h2>
<div class="highlight"><pre><span></span><code><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">type</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">cardUnlock</span>
<span class="w"> </span><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">Admin</span>
<span class="w"> </span><span class="nt">pin</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">1234</span>
<span class="w"> </span><span class="nt">destination</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">navigate.admin</span>
</code></pre></div>
<p>Keys:</p>
<ul>
<li><code>pin</code> required</li>
<li><code>destination</code> required</li>
</ul>
<p>Typical target in <code>hiddenCards</code>:</p>
<div class="highlight"><pre><span></span><code><span class="nt">hiddenCards</span><span class="p">:</span>
<span class="w"> </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">type</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">cardGrid</span>
<span class="w"> </span><span class="nt">key</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">admin</span>
<span class="w"> </span><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">Admin</span>
<span class="w"> </span><span class="nt">entities</span><span class="p">:</span>
<span class="w"> </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">entity</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">switch.maintenance_mode</span>
</code></pre></div>
</article>
</div>
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
</div>
<button type="button" class="md-top md-icon" data-md-component="top" hidden>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="lucide lucide-circle-arrow-up" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="m16 12-4-4-4 4M12 16V8"/></svg>
Back to top
</button>
</main>
<footer class="md-footer">
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-copyright">
<div class="md-copyright__highlight">
Copyright © 2026 Johannes Braun
</div>
Made with
<a href="https://zensical.org/" target="_blank" rel="noopener">
Zensical
</a>
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"annotate":null,"base":"..","features":["navigation.indexes","navigation.sections","navigation.top","navigation.tracking","navigation.expand","search.highlight","search.share","search.suggest"],"search":"../assets/javascripts/workers/search.e2d2d235.min.js","tags":null,"translations":{"clipboard.copied":"Copied to clipboard","clipboard.copy":"Copy to clipboard","search.result.more.one":"1 more on this page","search.result.more.other":"# more on this page","search.result.none":"No matching documents","search.result.one":"1 matching document","search.result.other":"# matching documents","search.result.placeholder":"Type to start searching","search.result.term.missing":"Missing","select.version":"Select version"},"version":null}</script>
<script src="../assets/javascripts/bundle.5fcf0de6.min.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink