Skip to content
KONIGI Patterns

Products

Home Assistant

Room-based card layouts combine household device states with controls.

Open Home Foundation Live public demo both theme IoT and energy

home-assistant.io , opens in a new tab Live demo , opens in a new tab

Patterns seen here 8

Captures

2 captures, newest first. Hover any box for the pattern and the note.

Home Assistant — Demo dashboard at phone width
Mobile adaptation. The phone layout changes the reading order of the desktop sections. Resizable card grid. Two card columns remain within each section. Header KPI strip. Summary chips stay above the room sections. Sidebar and canvas. Navigation moves behind a menu button.
Demo dashboard at phone width September 10, 2026 Home Assistant public demo (signed out, 390px viewport) medium · light · mobile
The desktop dashboard reflows into a narrow phone layout while keeping its room sections and controls. Cards remain in two columns within sections, limiting the page’s length. The section order differs from the desktop columns, so the responsive layout changes what people encounter first. Navigation moves behind a menu button, while the summary chips remain at the top.
Home Assistant — Demo dashboard
Resizable card grid. Room sections organize the cards in columns. Semantic grouping. Room names and local readings appear together in section headers. Sidebar and canvas. The collapsed rail saves width but hides navigation labels. Sparkline. A compact card combines a value with a small trend chart. Semantic status color. The numeric state remains readable without relying on the amber icon. Header KPI strip. Summary chips show outdoor conditions and occupancy. Dashboard builder. The edit control is available from the dashboard.
Demo dashboard September 10, 2026 Home Assistant public demo (signed out) medium · light · desktop-web
Cards are grouped by rooms such as Living room, Kitchen, and Study. States are written in words, with icon color providing a second cue. Section headers add useful room summaries, such as temperature or meeting status. The page also contains controls, including lighting sliders and thermostat buttons, so people can act in the same place they check the state.