# Raw HTML

## The method to use <a href="#the-method-to-use" id="the-method-to-use"></a>

The method is `s.plt.html()`

It must contain the following input variables:

```python
html: str
order: int
```

And accepts the following input variables as optional:

```python
rows_size: Optional[int]
cols_size: Optional[int]
padding: Optional[List[int]]
```

## Examples <a href="#examples" id="examples"></a>

### 1. Default Configuration <a href="#id-1.-default-configuration" id="id-1.-default-configuration"></a>

```python
s.plt.html(
    order=0,
    html=(
        "<p style='background-color: #daf4f0';>"
        "Comparing the results of predictions that happened in previous "
        "periods vs reality, so that you can measure the accuracy of our predictor."
        "</p>"
    ) 
)
```

![](https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FvCZrnpgqV8zbwMwRVjbd%2FSimple%20HTML.png?alt=media\&token=e79dcc65-4c34-4f52-9440-e7274325fcb0)

### 2. Title for HTML, changing data, size and padding <a href="#id-2.-title-for-the-chart-and-changing-data" id="id-2.-title-for-the-chart-and-changing-data"></a>

```python
s.plt.html(
    order=0, cols_size=8,
    padding='0,0,0,2',
    html=(
        "<p style='background-color: #daf4f0';>"
        "The goal of this logistics plan is to meet customer "
        "requirements in a timely, cost-effective manner."
        "</p>"
    )
)
```

![Note the space before the component using padding='0,0,0,2', and size with cols\_size=8.](https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FxjJ8H2zTEKdqWo4g9eDZ%2FSimple%20HTML%202.png?alt=media\&token=40c58845-c421-4ee8-bdcc-5162cd3f47c2)

### 3. Adding graphic HTML component <a href="#id-2.-title-for-the-chart-and-changing-data" id="id-2.-title-for-the-chart-and-changing-data"></a>

> Warning: We do not recommend to abuse on this technique since it can remarkably reduce the performance of your Data App, if possible use Shimoku components.

This component is done using:

```python
html = '''<div class="styles_grid_item_padding__MzexJ" style="grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); grid-area: span 1 / span 2 / span 2 / span 3; gap: 32px 16px;">
    <div class="css-upombs" data-testid="GRID_ITEM-92c7bf38-abb2-473e-8e10-7a446a93d9a5" style="grid-area: 1 / 1 / span 2 / span 2; min-height: 352px; max-height: 352px;">
        <div type="HTML" data-testid="REPORT-HTML-92c7bf38-abb2-473e-8e10-7a446a93d9a5" class="css-cgjako">
            <div class="ReportWrapper_container_report__cT7bu">
                <div class="styles_container__html__pgebp">
                    <div class="">
                        <style>.rectangle{height:300px; width:166px; background-color:#13bfa8; border-radius:0px 100px 0px 100px;}</style>
                        <div class="rectangle">
                            <h1 style="color:#fff; padding:10%;">This is a title</h1>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>'''

s.plt.html(
    order=0,
    html=html
)
```

![The code for background color is #13bfa8.](https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2F6mthbUBeYG0yrQ5gCzbn%2FCustom%20Title%20HTML.png?alt=media\&token=481deb0e-feee-4007-ba8a-7aaa20b6da83)