Skip to content
This card displays provided data as an HTML content of a card.
Branch: master
Clone or download
Latest commit 67db7af Oct 31, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Optimised rendering Aug 19, 2019
LICENSE Added license Oct 9, 2019 Updated README Oct 31, 2019
example.gif Updated example Jul 5, 2019 Updated documentation Aug 29, 2019

Lovelace HTML card

hacs_badge buymeacoffee_badge

This card displays provided data as an HTML content of a card.

Configuration options

Key Type Required Default Description
title string False - Title of a card
content string True - Content of a card


  • Entity state, example: [[ sun.sun ]], [[ sun.sun.state ]]
  • Entity attribute, example: [[ sun.sun.attrubutes.elevation ]]

Example usage


- name: Example
    - type: custom:html-card
      title: 'HTML card'
      content: |
        Sun state: <b>[[sun.sun]]</b>, elevation: [[sun.sun.attributes.elevation]]</br>
        <b>Hello</b> there!<p>General <u>Kenobi!</u></p>
        <img src="" width="70%"/></br>
        <ha-icon icon="mdi:speaker"></ha-icon> Volume: [[input_number.system_volume]]%</br>
        <center><img src="" width="[[input_number.system_volume]]%"/></center>


  1. Download html-card.js to /www/custom_lovelace/html_card directory:
    mkdir -p www/custom_lovelace/html_card
    cd www/custom_lovelace/html_card/
  2. Add card to resources in ui-lovelace.yaml or in raw editor if you are using frontend UI editor:
      - url: /local/custom_lovelace/html_card/html-card.js
        type: js


  • To use mdi icon follow example: <ha-icon icon="mdi:weather-sunny"></ha-icon>
  • If you need more powerful templates check out HTML Template card
  • The only improvement over markdown-mod that html-card provides is ability to use css styles.
  • This card is available in HACS

Buy Me A Coffee

You can’t perform that action at this time.