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.

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.

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.

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. For Home Assistant Core ≥ 2026.5, use Flex Cells Card ≥ v0.25.0 because older FCC editor builds depended on Home Assistant’s removed ha-textfield component and may show missing text inputs.

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

Metadata paths

For entity cells, the attribute field is a metadata path. It can read:

This lets you display an entity’s area without creating a template sensor:

rows:
  - cells:
      - type: entity
        value: sensor.bedroom_temperature
        attribute: area.name
        use_entity_unit: false

Common registry shortcuts are also exposed as area_name, area_id, device_name, and device_id.

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, @area_name, @area_id.

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

Date and Time Format Tokens

These tokens can be used in Date/Time format & Text override fields. The examples below use this raw value:

2026-04-05T13:03:07

Relative examples assume the current time is 2026-04-05T14:34:37 and the locale is English, so the raw value is 1 hour 31 minutes 30 seconds in the past. Relative output uses the Home Assistant language when available, then falls back to the browser locale.

Token Description Example output
RAW Outputs the original unformatted value exactly as it was read. 2026-04-05T13:03:07
YYYY Outputs the four-digit year. 2026
YY Outputs the two-digit year. 26
MMMM Outputs the localized full month name. April
MM Outputs the month number with a leading zero. 04
M Outputs the month number without a leading zero. 4
DD Outputs the day of month with a leading zero. 05
D Outputs the day of month without a leading zero. 5
HH Outputs the 24-hour clock hour with a leading zero. 13
H Outputs the 24-hour clock hour without a leading zero. 13
hh Outputs the 12-hour clock hour with a leading zero. 01
h Outputs the 12-hour clock hour without a leading zero. 1
AMPM Outputs the uppercase 12-hour period marker. PM
ampm Outputs the lowercase 12-hour period marker. pm
mm Outputs minutes with a leading zero. 03
m Outputs minutes without a leading zero. 3
ss Outputs seconds with a leading zero. 07
s Outputs seconds without a leading zero. 7
REL Outputs a localized elapsed duration with up to two units and no past/future direction. 1 hour 31 minutes
REL_SHORT Outputs a localized short elapsed duration with up to two units and no past/future direction. 1h 31m
REL_SHORT_AGO Outputs the same precise short duration as REL_SHORT, with localized past/future direction. 1h 31m ago
REL_SHORT_ROUNDED Outputs a rounded one-unit short duration with no past/future direction. 2h
REL_SHORT_AGO_ROUNDED Outputs a rounded one-unit short duration with localized past/future direction. 2h ago
[literal text] Outputs text inside brackets literally, without parsing it as tokens. Pattern [Updated: ]YYYY[-]MM[-]DD gives Updated: 2026-04-05

Changelog

Screenshots

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

Example YAML

type: 'custom:flex-cells-card'