# heading

## Overview

Displays text in a large format to serve as a heading (e.g. for a section of one of your app's screens).

{% hint style="info" %}
`heading` was visually updated in version **4.73.0** of the JourneyApps Runtime.
{% endhint %}

### Basic Example

```xml
<heading>Create New Work Order</heading>
```

You can use a XML String Formatting to make the text inside the heading dynamic:

```xml
<heading>Work Order: {work_order.reference_number}</heading>
```

## Standard Attributes

### `value`

**Optional**

**Type**: `string`

**Default**: unset

The text in the `heading`. This is an alternative to specifying the text directly inside the `<heading>...</heading>` tags.

#### Example: Without `value`

```xml
<heading>Heading text</heading>
```

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-725145d8ef1def70c241d6f50cc044cffb1b7129%2Fheading-value.png?alt=media)

#### Example: With `value`

```xml
<heading value="Heading text"/>
```

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-725145d8ef1def70c241d6f50cc044cffb1b7129%2Fheading-value.png?alt=media)

## Advanced Attributes

### `align-text`

**Optional**

**Type**: `center` | `left` | `right`

**Default**: `left`

Specify how the heading text should be aligned.

#### Example: `heading` with center-aligned text

```xml
<heading value="Heading text" sub-heading="This is my subheading" align-text="center"/>
```

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-12d3c199a0da41615e98e602d12bb31ba361e585%2Fheading-align-text.png?alt=media)

### `color` and `divider-color`

**Optional**

**Type**: `string` - can be a named color or #HEX value

**Default**: Primary font color

Specify the text color of the particular heading component.

```xml
<heading color="primary" divider-color="negative">Heading text</heading>
```

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-bbf8f24db071754f400f5f8fd420d206d5a51d77%2Fheading-divider-color.png?alt=media)

### `id`

{% content-ref url="../xml-fields/id" %}
[id](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/id)
{% endcontent-ref %}

### `show-if` and `hide-if`

{% content-ref url="../xml-fields/show-if" %}
[show-if](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/show-if)
{% endcontent-ref %}

{% content-ref url="../xml-fields/hide-if" %}
[hide-if](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/hide-if)
{% endcontent-ref %}

### `sub-heading`

**Optional**

**Type**: `string`

**Default**: unset

Specify sub-heading text that will display in a smaller font below the heading.

### `sub-heading-color`

**Optional**

**Type**: `string`

**Default**: Primary font color

Specify the text color of the heading's sub-heading text.

## Component Methods

The following component methods are available when an [`id`](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/id) is assigned to the component and `component.heading({id:'my-id'})` is called from JS/TS:

### `scrollIntoView`

Programmatically scroll until the `heading` is visible in the view.