The Modular Block System.
Every card is built from blocks. Drag them from the palette, nest them inside layouts, bind them to Home Assistant entities, and style every detail. From a simple text label to a fully interactive climate controller — it all starts with a block.
- 4
- Block categories
- 13
- Block types
- 10+
- HA domains supported
- ∞
- Nesting depth
A Block for Every Job
Blocks are organized into four focused categories, each with a clear purpose — so you can find exactly what you need without hunting through a long list.
Static content blocks — text labels, icons, and images. The building blocks of any visual design.
Structural containers that organize other blocks into flex layouts, equal columns, or fully custom CSS grids.
Display live data from your Home Assistant entities — states, names, icons, attributes, and entity images.
Interactive blocks that let you control your entities directly from the dashboard.
Static Content, Perfectly Styled
Basic blocks display text, icons, and images. Simple in purpose, powerful in styling — every pixel is under your control.
Text
Displays a static text string — or bind it dynamically to an entity state. The foundation of every card label, value, or heading.
Supports binding · Static or dynamic content
Icon
Renders any MDI or Home Assistant icon. Choose from a list or use a Jinja2 template. Add optional pre/post text with independent style targets.
Icon source: List or Template · Pre/Post templates · 3 style targets
Image
Displays an image from a URL or the built-in Media Manager. Control how it fills its container: contain, cover, stretch, scale-down, or original size.
Media Manager integration · 6 fit modes · Custom position
Structure Your Cards Your Way
Layout blocks are the only blocks that accept children. Use them to build any composition — from a simple flex row to a fully named CSS Grid.
Container
A generic flex container. Group blocks inside, then configure flex direction, gap, justification, and alignment in the Styles panel.
Entity set on a container is inherited by all its children.
Columns
Split the layout into 2–12 equal columns with a configurable gap. Drag the separator handles to resize individual column widths.
Each column is an independent drop zone.
Grid
A full CSS Grid container with a dedicated visual editor. Define rows, columns, sizes (px, %, fr, auto, minmax), named areas, and gaps.
The most powerful layout tool — grid cells and named areas are independent drop zones.
Note: All entity blocks require an entity to function. The entity can come from direct binding, entity slot, or container inheritance.
Your Entities, Beautifully Displayed
Entity blocks pull live data from Home Assistant and display it exactly how you want — formatted, labelled, and styled.
Entity State
The current state value of an entity. Format it as text, number, integer, date/time, boolean, or a fully custom Jinja2 template. Show or hide the unit of measurement.
Entity Name
The friendly name of an entity with case transformation (Upper, Lower, Title, Kebab, Camel), max length, and ellipsis truncation.
Entity Icon
The entity's icon with configurable size and three color modes: Fixed, State-based (color changes with entity state), or Availability-based.
Entity Attribute
A single entity attribute with optional label, format, prefix, and suffix. Label position can be Top, Left, or Inline — each with independent style targets.
Entity Image
Renders the entity's picture (entity_picture attribute) with a configurable fallback icon when no image is available.
Interact with Your Home, Visually
Control blocks turn your cards into functional dashboards. They auto-configure for your entity's domain — no setup needed in most cases.
Slider
A fully-featured slider for any entity with a numeric value — lights, fans, covers, climate, media players, input numbers, and more. Auto-detects the right range, unit, and service.
- Horizontal or vertical orientation
- Single thumb or range (min/max) mode
- Configurable commit mode (release, throttle, debounce)
- Value display: inline, inside, or tooltip
- 10 supported HA domains
Button Toggle
A segmented button group for switching between entity modes — climate HVAC modes, fan presets, light effects, media sources, and more. Auto-detects available options.
- Horizontal or vertical layout
- Icon + label with configurable order
- Active state with independent style targets
- 15 supported HA domains
- Auto-detects entity features
Select Menu
A compact dropdown that works exactly like the Button Toggle but opens as a popover — ideal when there are many options or space is limited.
- Dropdown above or below
- Configurable icon/label visibility
- Independent style targets for container and dropdown
- Same 15 supported HA domains as Button Toggle
Ready to Build?
Install CardBuilder on your Home Assistant instance and start composing cards with the full block library — free.