# Background Indicators

{% 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 %}

Input variables:

```python
title: str
```

And accepts the following input variables as optional:

```python
background_url: Optional[str]
href: Optional[str]
```

 Example of use:

```python
s.plt.html(
    order=0,
    html=s.html_components.beautiful_indicator(
        title='Start',
        href='https://docs.shimoku.com/development/'
    )
)
```

![You can click on any place of the indicator to reach the link embedded. The page will open in the same window.](https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FeDqsPIIdJcjjLZWdQh0r%2FHTML_beautiful_indicator.png?alt=media\&token=5ba9ede0-158e-4ca3-af7d-0266d76af5da)

You can resize, change position and text at will, for example:

```python
s.plt.html(
    order=0, cols_size=5,
    padding='1,0,0,2',
    html=s.html_components.beautiful_indicator(
        title='Start reading',
        background_url='https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8N3x8dGVjaG5vbG9neXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=600&q=60',
        href='https://docs.shimoku.com/development/'
    )
)
```

![Note the space before the component obtained using  padding='1,0,0,2'. The order of the spaces is Top, Right, Bottom, Left. If you clock on the ribbon, you are redirected to https://docs.shimoku.com/development/, that is a link you can modify as you want.](https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FDSvZIGcF9JvLaRCqQFOp%2FHTML_beautiful_indicator%20padding.png?alt=media\&token=f9e62b28-7e08-48b7-bfb0-c1897f3fcadc)

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/32deadc5403b4217a0a33434ed26fac3>" %}