# Panel

{% 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
text: str
button_panel: str
symbol_name: str = ‘insights’
```

 Example of use:

```python
s.plt.html(
    order=0,
    html=s.html_components.panel(
        href='https://docs.shimoku.com/development/',
        text='Attention, this is a link to the documentation you need',
        button_panel='Read more',
        symbol_name='insights'
    )
)
```

![symbol\_name is a fixed small drawing at the left, you can add an explanatory text and the link is accessed on the button to open it in a new window. ](https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2F78sOr5MQVI31GTo33evJ%2FHTML%20panel.png?alt=media\&token=4147e8fe-9dfc-4677-8859-ff67f103cdde)

You can customize it using other symbols and text, and changing its size.

This is an example:

```python
s.plt.html(
    order=0, cols_size=4,
    html=s.html_components.panel(
        href='https://docs.shimoku.com/development/',
        text='Warning: Connect the equipment to the right Voltage Source: 220V',
        button_panel='Read more',
        symbol_name='safety'
    )
)
```

![](https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FzCBeTO67hUqzlZbwF1Ha%2FHTML%20panel%20custom.png?alt=media\&token=c97bb783-126a-4b06-b195-8db03fb87167)

You can change the small symbol at the left:

```python
s.plt.html(
    order=0, cols_size=4,
    html=s.html_components.panel(
        href='https://docs.shimoku.com/development/',
        text='Warning: Connect the equipment to the right Voltage Source: 220V',
        button_panel='Read more',
        symbol_name='warning'
    )
)
```

![](https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2Fi5M5y5PRlb35sJzvnHte%2FHTML%20panel%20warning.png?alt=media\&token=882b9153-ec71-4557-a16b-6c975fb6fe27)

The text in the button and other symbols ([Google Material Symbols](https://fonts.google.com/icons?icon.set=Material+Symbols)) can be added, and the position is modified too:

```python
s.plt.html(
    order=0, cols_size=4, padding='1,0,0,8',
    html = s.html_components.panel(
        href='https://docs.shimoku.com/development/',
        text='Warning: Connect the equipment to the right Voltage Source: 220V',
        button_panel='User Guide',
        symbol_name='safety_check'
    ) 
)
```

![The use of padding='1,0,0,8' moves down one space and 8 to the left.](https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FYdBB4U3xeoqHMrWCYlEV%2FHTML%20panel%20padding.png?alt=media\&token=3666459d-c587-46bd-9fa5-11d8f8d46cb8)

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/12a08663b99d457f9a96c7861f78b9b9>" %}