Forum GitHub Discussions Downloads Latest release downloads

Flex Cells Card

A Lovelace card for Home Assistant that lets you add icons, text, entities, attributes, or input controls in flexible cell layouts — fully configurable from a visual editor (EN/PL/IT/DE), so no documentation is required to get started.

If you like this card, please consider giving it a ⭐ on GitHub: Star on GitHub

Features

Installation

Choose one installation method, via HACS or manually.

Compatibility: Flex Cells Card v0.23.0+ requires Home Assistant Core ≥ 2026.2 (MD3 frontend). On older cores the visual editor dropdowns will not work; use an earlier FCC release if you must stay on an older HA version.

HACS

  1. In HACS use the search bar and type Flex Cells Card.
  2. Install the card.
  3. The resource is added automatically as /hacsfiles/flex-cells-card/flex-cells-card.js.
  4. Reload browser cache or refresh resources in Home Assistant if needed.
  5. If you previously added this repo as a custom repository, you can remove that entry now.

Manual

  1. Download flex-cells-card.js from the latest release and place it under
    config/www/flex-cells-card/flex-cells-card.js.
  2. Add a resource in Edit Dashboard → ⋮ → Manage resources:
    /local/flex-cells-card/flex-cells-card.js (type: JavaScript module).
  3. Hard refresh the browser.

Usage

Add the card in the UI and configure everything from the visual editor.

Video

Olli from the YouTube channel @smarterkram recorded a video explaining this card. If you know German, I encourage you to watch it https://www.youtube.com/watch?v=oh36grjbPDQ

Tips & Tricks

Templates

Card-level (global) template

Per-cell templates

Example (two cells embedding each other and reusing an entity picture):

Flex Cells Card

rows:
  - cells:
      - type: entity
        value: media_player.lg_webos_smart_tv
        align: center
        custom_template_enabled: true
        use_entity_unit: true
        entity_display: icon
        tap_action:
          action: toggle
        custom_template_html: |-
          this is <span style="color: red">cell</span> 1
          <br/>
          <fcc row="1" col="1" />
          <br />
          entity_picture as image:
          <br />
          <img src="<fcc row='1' col='1' as='text' />" />
        attribute: entity_picture
        style:
          background: "#f7ff85"
      - type: string
        value: aaaaaaaaa
        align: center
        style:
          background: "#b8fff3"
        custom_template_enabled: true
        custom_template_html: |-
          this is cell 2 with<br />content coming from cell 1
          <br/>
          <fcc row="1" col="1" />
          <br/>
          cell 2 content: <fcc row="1" col="2" />
          <br />
          This comes from row 2 col 2:
          <br />
          <fcc row="2" col="2" style="width: 100px; text-align: center; border: 1px dashed red;" />
  - cells:
      - type: string
        value: bbbbbbbbbbb
        align: left
        style:
          background: "#c2d4ff"
      - type: icon
        value: mdi:airplane
        align: right
        style:
          background: "#85ff93"
    dyn_row_rules: []
column_count: 2
card_padding: ""
overflow_x: true
header_from_first_row: false
zebra: false
narrow_breakpoint: ""
text_size: ""
cell_padding:
  top: 4
  right: 0
  bottom: 4
  left: 0
custom_template_enabled: false
custom_template_html: ""
type: custom:flex-cells-card

Examples

Translations

If you’d like to help translate FCC editor, or improve an existing translation, please do so! You don’t have to translate everything - just one string will do - and it’s not difficult.

Quick start for translators:

Auto-entities

Experimental feature! I do not plan to evolve it to parity with full FCC. With auto-entities you lose:

FCC accepts an entities array (e.g., from auto-entities). If entities is present, FCC builds rows from it; classic rows keep working as before. Control the generated table with entity_row_template (optional header and cells). Tokens: @entity, @friendly_name, @name, @state, @attr:<attribute>, @icon.

Example with auto-entities:

type: custom:auto-entities
card_param: entities
card:
  type: custom:flex-cells-card
  entity_row_template:
    header:
      - type: string
        value: Icon
      - type: string
        value: Name
      - type: string
        value: State
    cells:
      - type: entity
        value: "@entity"
        entity_display: icon
      - type: string
        value: "@friendly_name"
      - type: entity
        value: "@entity"
  column_count: 3
filter:
  include:
    - domain: light

Changelog

Screenshots

Flex Cells Card Flex Cells Card Flex Cells Card Flex Cells Card

Example YAML

type: 'custom:flex-cells-card'