home-assistant.io/source/developers/frontend_add_card.markdown

layout, title, description, date, sidebar, comments, sharing, footer

layout	title	description	date	sidebar	comments	sharing	footer
page	Adding state card	Adding a state card to the frontend	2016-04-16 14:40 -07:00	true	false	true	true

The main interface of Home Assistant is a list of the current entities and their states. For each entity in the system, a state card will be rendered. State cards will show an icon, the name of the entity, when the state has last changed and the current state or a control to interact with it.

The different card types can be found here.

Sensors, when not grouped, are shown as so-called badges on top of the state cards.

The different badges are located in the file /src/components/entity/ha-state-label-badge.html.

Adding a custom card type can be done with a few simple steps. For this example we will add a new state card for the domain camera:

1. Add 'camera' to the array DOMAINS_WITH_CARD in the file /util/hass-util.html.
2. Create the files state-card-camera.html in the folder /state-summary/.
3. Add <link rel="import" href="state-card-camera.html"> to state-card-content.html.