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
Permalink
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
README.md Updated README Oct 31, 2019
example.gif Updated example Jul 5, 2019
info.md Updated documentation Aug 29, 2019

README.md

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

Templates

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

Example usage

Example

views:
- name: Example
  cards:
    - 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="https://i.redd.it/ltxppihy4cyy.jpg" width="70%"/></br>
        <ha-icon icon="mdi:speaker"></ha-icon> Volume: [[input_number.system_volume]]%</br>
        <center><img src="https://vignette.wikia.nocookie.net/starwars/images/f/fa/Modal_Nodes_02.jpg" width="[[input_number.system_volume]]%"/></center>

Installation

  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/
    wget https://github.com/PiotrMachowski/lovelace-html-card/raw/master/dist/html-card.js
  2. Add card to resources in ui-lovelace.yaml or in raw editor if you are using frontend UI editor:
    resources:
      - url: /local/custom_lovelace/html_card/html-card.js
        type: js

Hints

  • 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.