https://github.com/PiotrMachowski/lovelace-html-card

This card displays provided data as an HTML content of a card.
https://github.com/PiotrMachowski/lovelace-html-card

home-assistant lovelace-card

Last synced: 4 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/PiotrMachowski/lovelace-html-card
• Owner: PiotrMachowski
• License: mit
• Created: 2019-06-24T00:21:20.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-07-20T20:13:11.000Z (over 1 year ago)
• Last Synced: 2024-08-02T15:36:08.957Z (7 months ago)
• Topics: home-assistant, lovelace-card
• Homepage:
• Size: 1.61 MB
• Stars: 52
• Watchers: 4
• Forks: 7
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# Lovelace HTML card

[![hacs_badge](https://img.shields.io/badge/HACS-Default-orange.svg)](https://github.com/custom-components/hacs)

[![Ko-Fi][ko_fi_shield]][ko_fi]

[![buycoffee.to][buycoffee_to_shield]][buycoffee_to]

[![PayPal.Me][paypal_me_shield]][paypal_me]

[![Revolut.Me][revolut_me_shield]][revolut_me]

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](https://github.com/PiotrMachowski/lovelace-html-card/raw/master/example.gif)

```yaml

views:

- name: Example

  cards:

    - type: custom:html-card

      title: 'HTML card'

      content: |

        Sun state: [[sun.sun]], elevation: [[sun.sun.attributes.elevation]]

        Hello there!
General Kenobi!

        

         Volume: [[input_number.system_volume]]%

        

```


## Installation

1. Download [*html-card.js*](https://github.com/PiotrMachowski/lovelace-html-card/raw/master/dist/html-card.js) to `/www/custom_lovelace/html_card` directory:

    ```bash

    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:

    ```yaml

    resources:

      - url: /local/custom_lovelace/html_card/html-card.js

        type: js

    ```

## Hints

* To use mdi icon follow example: ``

* If you need more powerful templates check out [*HTML Template card*](https://github.com/PiotrMachowski/Home-Assistant-Lovelace-HTML-Template-card)

* The only improvement over [*markdown-mod*](https://github.com/thomasloven/lovelace-markdown-mod) that *html-card* provides is ability to use css styles.

* This card is available in [*HACS*](https://github.com/custom-components/hacs/)

## Support

If you want to support my work with a donation you can use one of the following platforms:

  

    Platform

    Payment methods

    Link

    Comment

  

  

    Ko-fi

    

      
PayPal

      
Credit card

    

    

      

    

    

      
No fees

      
Single or monthly payment

    

  

  

    buycoffee.to

    

      
BLIK

      
Bank transfer

    

    

      

    

    

  

  

    PayPal

    

      
PayPal

    

    

      

    

    

      
No fees

    

  

  

    Revolut

    

      
Revolut

      
Credit Card

    

    

      

    

    

      
No fees

    

  


[ko_fi_shield]: https://img.shields.io/static/v1.svg?label=%20&message=Ko-Fi&color=F16061&logo=ko-fi&logoColor=white

[ko_fi]: https://ko-fi.com/piotrmachowski

[buycoffee_to_shield]: https://shields.io/badge/buycoffee.to-white?style=flat&labelColor=white&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABhmlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw1AUhU9TpaIVh1YQcchQnayIijhKFYtgobQVWnUweemP0KQhSXFxFFwLDv4sVh1cnHV1cBUEwR8QVxcnRRcp8b6k0CLGC4/3cd49h/fuA4R6malmxzigapaRisfEbG5FDLzChxB6MIZ+iZl6Ir2QgWd93VM31V2UZ3n3/Vm9St5kgE8knmW6YRGvE09vWjrnfeIwK0kK8TnxqEEXJH7kuuzyG+eiwwLPDBuZ1BxxmFgstrHcxqxkqMRTxBFF1ShfyLqscN7irJarrHlP/sJgXltOc53WEOJYRAJJiJBRxQbKsBClXSPFRIrOYx7+QcefJJdMrg0wcsyjAhWS4wf/g9+zNQuTE25SMAZ0vtj2xzAQ2AUaNdv+PrbtxgngfwautJa/UgdmPkmvtbTIEdC3DVxctzR5D7jcAQaedMmQHMlPSygUgPcz+qYcELoFulfduTXPcfoAZGhWSzfAwSEwUqTsNY93d7XP7d+e5vx+AIahcq//o+yoAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5wETCy4vFNqLzwAAAVpJREFUOMvd0rFLVXEYxvHPOedKJnKJhrDLuUFREULE7YDCMYj+AydpsCWiaKu29hZxiP4Al4aWwC1EdFI4Q3hqEmkIBI8ZChWXKNLLvS0/Qcza84V3enm/7/s878t/HxGkeTaIGziP+EB918nawu7Dq1d0e1+2J2bepnk2jFEUVVF+qKV51o9neBCaugfge70keoxxUbSWjrQ+4SUyzKZ5NlnDZdzGG7w4DIh+dtZEFntDA98l8S0MYwctNGrYz9WqKJePFLq80g5Sr+EHlnATp+NA+4qLaZ7FfzMrzbMBjGEdq8GrJMZnvAvFC/8wfAwjWMQ8XmMzaW9sdevNRgd3MFhvNpbaG1u/Dk2/hOc4gadVUa7Um425qii/7Z+xH9O4jwW8Cqv24Tru4hyeVEU588cfBMgpPMI9nMFe0BkFzVOYrYqycyQgQJLwTC2cDZCPeF8V5Y7jGb8BUpRicy7OU5MAAAAASUVORK5CYII=

[buycoffee_to]: https://buycoffee.to/piotrmachowski

[buy_me_a_coffee_shield]: https://img.shields.io/static/v1.svg?label=%20&message=Buy%20me%20a%20coffee&color=6f4e37&logo=buy%20me%20a%20coffee&logoColor=white

[buy_me_a_coffee]: https://www.buymeacoffee.com/PiotrMachowski

[paypal_me_shield]: https://img.shields.io/static/v1.svg?label=%20&message=PayPal.Me&logo=paypal

[paypal_me]: https://paypal.me/PiMachowski

[revolut_me_shield]: https://img.shields.io/static/v1.svg?label=%20&message=Revolut&logo=revolut

[revolut_me]: https://revolut.me/314ma