# Box With Button

{% 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
href: str
title: str
line: str
button_text: str
```

And accepts the following input variable as optional:

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

Example of use:

```python
s.plt.html(
    order=0,
    html=s.html_components.box_with_button(
        href='https://cutt.ly/qJANGcX',
        title='Success case',
        line='AI Explained',
        button_text='Visit now!',
    )
)
```

![You can add text with t a very nice background to highlight and use as an indication of what will be linked in the button. A new window will open with the link.](https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FuXbv2FJ6H3ZDGRWYyuID%2FHTML%20box%20with%20button.png?alt=media\&token=89552c9c-b936-4489-b1b5-26e2ced5f563)

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

```python
s.plt.html(
    order=0, cols_size=5, padding='1,0,0,6',
    html=s.html_components.box_with_button(
        href='https://cutt.ly/qJANGcX',
        title='Success case',
        line='AI Explained',
        button_text='Visit now!',
    )
)
```

![Note the use of cols\_size=5, padding='1,0,0,6', that change the size and position of the component. The order of spaces is Top, Right, Bottom, Left.](https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FzPuJbSfWgFe5HlPujsBb%2FHTML%20box%20with%20button%20padding.png?alt=media\&token=9a737c0a-4768-4419-af6f-757bca6129b8)

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/02a884b4ddf14697a1498c3ddd18650f>" %}