# titles

This component displays a title, subtitle, comment, or any type of text content. As the titles component is always part of a widget, this text will be displayed on the widget.

Titles are available in the following content widgets:

* [avatar](https://docs.jigx.com/examples/readme/widgets/avatar)
* [chart](https://docs.jigx.com/examples/readme/widgets/chart)
* [image](https://docs.jigx.com/examples/readme/widgets/image)
* [location](https://docs.jigx.com/examples/readme/widgets/location)
* [status](https://docs.jigx.com/examples/readme/widgets/status)
* [value](https://docs.jigx.com/examples/readme/widgets/value)

## Configuration options

<table><thead><tr><th width="133.9375">Core structure</th><th></th></tr></thead><tbody><tr><td><code>title</code></td><td>Display the text content for the title.</td></tr><tr><td><code>subtitle</code></td><td>Add a subtitle under the title text.</td></tr></tbody></table>

<table><thead><tr><th width="136.79296875">Other options</th><th></th></tr></thead><tbody><tr><td><code>align</code></td><td><code>center</code>, <code>left</code>, <code>right</code></td></tr><tr><td><code>icon</code></td><td>icon used in the widget.</td></tr><tr><td><code>iconColor</code></td><td>Sets the icon's color. Choose a color from the provided palette. If the property is not specified in the YAML, the default color is black.</td></tr><tr><td><code>style</code></td><td>Properties used for component styling.</td></tr></tbody></table>

## Examples and code snippets

## Titles in the image widget

{% columns %}
{% column %}

<figure><img src="https://1414514342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHcPzbms3kZejTmFd500V%2Fuploads%2FWgYGio9bQyhwV39ZmASm%2FWD-image-titles.png?alt=media&#x26;token=9ac26abe-ee57-48da-a44c-17333c0e46e6" alt="Image widget with titles" width="188"><figcaption><p>Image widget with titles</p></figcaption></figure>
{% endcolumn %}

{% column %}
A descriptive title added to the image widget.

**Examples:**

See the full example using static data in [GitHub](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/jigs/jigx-components/titles/static-data/titles-widget-image/titles-widget-image.jigx) See the full example using dynamic data in [GitHub](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/jigs/jigx-components/titles/dynamic-data/titles-widget-image/titles-widget-image-dynamic.jigx).

**Datasource**: See the full datasource for static data in [GitHub](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/datasources/adhoc-components/titles-static.jigx) See the full datasource for dynamic data in [GitHub](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/datasources/adhoc-components/titles.jigx).
{% endcolumn %}
{% endcolumns %}

{% tabs %}
{% tab title="titles-widget (static)" %}

```yaml
widgets:
  image-title:
    type: widget.image
    options:
      isContentOverlaid: true
      source:
        uri: =@ctx.datasources.titles-static.image
      bottom:
        type: component.titles
        options:
          align: center
          title: =@ctx.datasources.titles-static.title
```

{% endtab %}

{% tab title="title-widget (dynamic)" %}

```yaml
widgets:
  image-title-dd:
    type: widget.image
    options:
      isContentOverlaid: true
      source:
        uri: =@ctx.datasources.titles.image
      bottom:
        type: component.titles
        options:
          align: center
          title: =@ctx.datasources.titles.title
```

{% endtab %}

{% tab title="datasource (static)" %}

```yaml
type: datasource.static
options:
  data:
    - address: Národní 135/14, 110 00 Praha
      image: https://images.unsplash.com/photo-1472289065668-ce650ac443d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1738&q=80
      locationSubtitle: Prague Czech Republic
      locationTitle: Co-working space
      title: Work productivity
```

{% endtab %}

{% tab title="datasource (dynamic)" %}

```yaml
type: datasource.sqlite
options:
  provider: DATA_PROVIDER_DYNAMIC
  entities:
    - entity: default/location
  query: |
    SELECT
      '$.id',
      '$.title',
      '$.image',
      '$.address',
      '$.locationtitle',
      '$.locationsubtitle',
      '$.category'
    FROM [default/location] 
    WHERE '$.category' = "titles"
```

{% endtab %}

{% tab title="grid-item" %}

```yaml
# Grid-item for the static jig.
children:
  - type: component.grid-item
    options:
      size: "4x4"
      children: 
        type: component.jig-widget
        options:
          jigId: titles-widget-image
          widgetId: image-title
```

{% endtab %}
{% endtabs %}

## Titles in the location widget

{% columns %}
{% column %}

<figure><img src="https://1414514342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHcPzbms3kZejTmFd500V%2Fuploads%2FsD961AAEfyYsMWKkUdYe%2FWD-location-titles.png?alt=media&#x26;token=b4605ef9-93e3-4185-9fee-a24fa52abb2e" alt="Location widget with titles" width="188"><figcaption><p>Location widget with titles</p></figcaption></figure>
{% endcolumn %}

{% column %}
The title/description of the place displayed on the location widget.

**Examples**: See the full example using static data in [GitHub](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/jigs/jigx-components/titles/static-data/titles-widget-location/titles-widget-location.jigx). See the full example using dynamic data in [GitHub](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/jigs/jigx-components/titles/dynamic-data/titles-widget-location/titles-widget-location-dynamic.jigx).

**Datasource**: See the full datasource for static data in [GitHub](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/datasources/adhoc-components/titles-static.jigx). See the full datasource for dynamic data in [GitHub](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/datasources/adhoc-components/titles.jigx).
{% endcolumn %}
{% endcolumns %}

{% tabs %}
{% tab title="titles-widget-location.jigx" %}

```yaml
widgets:
  location-title-s:
    type: widget.location
    options:
      viewPoint:  
       address: =@ctx.datasources.titles-static.address
      bottom:
        type: component.titles
        options:
          title: =@ctx.datasources.titles-static.locationTitle
          subtitle: =@ctx.datasources.titles-static.locationSubtitle
          align: left
```

{% endtab %}

{% tab title="titles-widget-location-dd.jigx" %}

```yaml
widgets:
  location-titles-dd:
    type: widget.location
    options:
      viewPoint:
        address: =@ctx.datasources.titles.address
      bottom:
        type: component.titles
        options:
          title: =@ctx.datasources.titles.locationtitle
          subtitle: =@ctx.datasources.titles.locationsubtitle
```

{% endtab %}

{% tab title="grid-item" %}

```yaml
# Grid-item for the static jig.
children:
  - type: component.grid-item
    options:
      size: "2x2"
      children: 
        type: component.jig-widget
        options:
          jigId: titles-widget-image
          widgetId: image-title
```

{% endtab %}
{% endtabs %}