/lovelace-text-row

:pencil: Home-Assistant Lovelace Text Row

Primary LanguageJavaScriptMIT LicenseMIT

Lovelace Text Row

Add a simple (styled) text to a row of the lovelace entities cards, this can be used to add subheaders or explanatory text.

Installation

  1. Copy the latest release of text-row.js into your config/www directory.
  2. Add a reference to text-row.js inside your configuration:
resources:
- url: /local/text-row.js?v=0.0.1
  type: module

Usage

Options

Name Type Default Description
text (required) string The text that will be be showed.
style map color: var(--primary-text-color), margin-left: 8px; Style the showed text using CSS.

Example

Add text-row to an entities card:

type: entities
entities:
  - light.spots
  - type: divider
  - type: custom:text-row
    text: This is an unstyled example text
  - type: custom:text-row
    text: This is a red styled example text without left margin
    style:
      color: red
      margin-left: 0
  - type: custom:text-row
    text: This is bigger and blue styled example text
    style:
      color: '#0000ff'
      font-size: '20px'
  - type: custom:text-row
    text: This very long styled example text is using a theme variable as color and an even bigger left margin
    style:
      color: var(--accent-color)
      margin-left: '16px;'

text-row

Credits

thomasloven for creating lovelace-card-tools.