# Beautiful Titles

{% hint style="info" %}
WARNING avoid special symbols such as `(, ), [, ]` and similar in the texts of this component because it could break the look\&feel
{% endhint %}

This component is used to highlight text.

The input variables are:

```python
title: str
subtitle: str
```

 Example of use:

```python
s.plt.html(
    order=0,
    html=s.html_components.create_h1_title(
        title='Easy-to-use AI',
        subtitle='Build a model to predict outcomes!'
    )
)
```

![Use text to highlight topics on your results page and separate themes.](https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FapxKNGa2g6vZEZlwgfqj%2FHTML_h1_title.png?alt=media\&token=7d0553f1-9240-47c6-bdee-6f6396b39e05)

It can be resized and positioned with the use of `padding`:

```python
s.plt.html(
    order=1, 
    cols_size=4,
    padding='0,0,0,8',
    html=s.html_components.create_h1_title(
        title='Easy-to-use AI',
        subtitle='Build a model to predict probabilities!'
    )
)
```

![You can use to display longer text than 'Artificial Intelligence Tools', note the use of padding='0,0,0,8' to position the component.](https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FwQ1P4afC4v2FsXWaBSz5%2FHTML_h1_title%20padding.png?alt=media\&token=46d95f10-e7a8-4776-862b-c8cd7b4f2c3b)

More on how to use the [Grid](https://docs.shimoku.com/dev/building-web-app/grid).

#### Video demonstration <a href="#video-demonstration-of-the-bar-chart" id="video-demonstration-of-the-bar-chart"></a>

{% embed url="<https://www.loom.com/share/25ec252aec0446c5801bad19ebd3ed3e>" %}