> For the complete documentation index, see [llms.txt](https://mariohernandez.gitbook.io/components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mariohernandez.gitbook.io/components/basic-components/heading/improving-the-heading.md).

# Improving the Heading

The heading component looks good and it will work great, ...as long as we always want to use a `<h1>`. However, the component is pretty static and it does not offer much flexibility. What if we wanted to use a h2 or h3? or what if the title field is a link to another page? Then the heading component would probably not work because we have no way of changing the heading level from h1 to any other level or add a URL. Let's re-work the heading component so we make it more dynamic.

* Update `heading.json` to look like this:

{% tabs %}
{% tab title="heading.json" %}

```bash
{
  "heading": {
    "heading_level": "",
    "modifier": "",
    "title": "Welcome to Mediacurrent training!",
    "url": ""
  }
}
```

{% endtab %}
{% endtabs %}

We just created a JSON object for the heading with properties that include **heading\_level, modifier, title**, and **url**.

* The **heading\_level** is something we will use later as we start nesting the heading component into other components. This will allow us to change the headings from say, h1 to h2 if we need to.
* The **modifier** key allows us to pass a modifier CSS class when we make use of this component. The modifier class will make it possible for us to style the heading differently than other headings, if needed.
* the **title** key is the title's string of text that will become the title of a page or a component.
* ... and finally, the **url** key, if present, will allow us to wrap the title in an `<a>` tag, to turn it into a link.

### Update the heading's markup and logic

* Update the `heading.twig` file to look like this:

{% tabs %}
{% tab title="heading.twig" %}

```php
<h{{ heading.heading_level|default('2') }} class="heading{{ heading.modifier ? ' ' ~ heading.modifier }}">
  

<div data-gb-custom-block data-tag="if">

    <a href="{{ heading.url }}" class="heading__link">
      {{ heading.title }}
    </a>
  

<div data-gb-custom-block data-tag="else"></div>

    {{ heading.title }}
  

</div>

</h{{ heading.heading_level|default('2') }}>
```

{% endtab %}
{% endtabs %}

Wow! What's all this? 😮

Let's break things down to explain what's happening here since the twig code has changed significantly:

* Line 1, makes use of `heading.heading_level` to complete the number part of the heading. If a value is not provided for `heading_level` in the JSON file, we are setting a default of `2`. This will ensure that by default we will have a `<h2>` as the title, much better than `<h1>` as we had before. This value can be changed per use case if needed. Line 9 closes the heading tag.
* Also in Line 1, we are checking whether there is a value for the `modifier` key in JSON. If there is, we are passing it to the heading as a CSS class. If no value is provided nothing will be added.
* In line 2, we check whether a URL was provided in the JSON file, and if so, we wrap the `{{ title }}` variable in a `<a>` tag to turn the title into a link. The **href** value for the link is `{{ heading.url }}`. If no URL is provided in the JSON file, we simply print the value of `{{ title }}`as plain text.

### Compiling the code

If Pattern Lab is running you should see the updates to the Heading component. Otherwise run the commands below:

```
npm run watch
```

**Just for fun 💥**

* Try changing the heading level in `heading.json` to anything other than H2.
* Inspect your code to see your changes to the Heading pattern.

**Congratulations!** You just built your first reusable component! 🙌 🎉


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://mariohernandez.gitbook.io/components/basic-components/heading/improving-the-heading.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.