titles

The titles component displays a title, subtitle, comment, or any type of text content with an icon which is optional.

Titles Preview

Configuration options

Some properties are common to all components, see Common component properties for a list and their configuration options.

Core structure
title	Add text on the centerElements of the component.expander. You can add text, expressions or Text with Format in the field. Text with format includes, currency, decimal, dateTime and more.

Other options
align	The alignment of the content inside of your component. Where the container and text should be aligned, the options are: left right center
icon	Add an icon to the title. A list of icons is available. See for more information.
iconColor	Sets the color of the icon, choose a color from the provided color palette. Default color is black if the property is not specified in the YAML. See the list of available colors in .
style	The following styling sets are available: isNegative isPositive isWarning
subtitle	Add a subtitle/ short description of the component.

Consideration

• component.titles can only be used in the centerElement of the component.expander

Examples and code snippets

Expander with titles in a header

Expander with titles

Expander with titles

Examples:

See the full example using static data in GitHub. See the full example using dynamic data in GitHub.

Datasource:

See the full datasource for dynamic data in GitHub

expander (static)

children:
  - type: component.expander
    options:
      header:
        centerElement:
          type: component.titles
          options:
            title: July Nelson
            subtitle: Manager
            icon: person
            align: left
      children:
        - type: component.entity
          options:
            children:
              - type: component.field-row
                options:
                  children:
                    - type: component.entity-field
                      options:
                        label: Phone
                        value: "3249432812"
                    - type: component.entity-field
                      options:
                        label: Email
                        value: [email protected]
              - type: component.entity-field
                options:
                  label: Address
                  value: 141 Harbor Dr Claymont, Delaware(DE), 19703
        - type: component.bar-chart
          options:
            chart:
              title:
                text: Last year revenue
            legend:
              isHidden: true
            series:
              - data: [email protected]

expander (dynamic)

datasources (dynamic)