> For the complete documentation index, see [llms.txt](https://lewe.gitbook.io/lewe-bootstrap-visuals/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lewe.gitbook.io/lewe-bootstrap-visuals/shortcodes/panel.md).

# Panel

The “panel” is not a Bootstrap component itself. The plugin provides the panel shortcut as a kind of toolbox to create your individual panel out of common Bootstrap styles. Review the parameters and play around with the options.

## Examples

{% code overflow="wrap" %}

```
[bsv-panel]This is the simplest panel[/bsv-panel]
```

{% endcode %}

<figure><img src="/files/t6rL3mdcPzoxZWUjQA7c" alt=""><figcaption></figcaption></figure>

{% code overflow="wrap" %}

```
[bsv-panel textstyle="light" bgstyle="info" bordertop="no" borderright="no" borderbottom="no" borderleft="yes" borderstyle="warning" borderradius="rounded" styles="padding:8px;border-width:8px !important;width:400px;"]This is a panel with light textstyle, info style background and a left warning style border 8px thick.[/bsv-panel]
```

{% endcode %}

<figure><img src="/files/OmKxrPWDopWfM88asddr" alt=""><figcaption></figcaption></figure>

{% code overflow="wrap" %}

```
[bsv-panel textstyle="light" bgstyle="danger" borderstyle="warning" borderradius="rounded-circle" styles="width:50px;height:50px;border-width:4px !important;text-align:center;font-size:24px;font-weight:bold !important;padding-top:0px !important;padding-bottom:14px !important;"]A[/bsv-panel]
```

{% endcode %}

<figure><img src="/files/8T7AnEidC9iNV0uVSUof" alt=""><figcaption></figcaption></figure>

## Format

{% code overflow="wrap" %}

```
[bsv-panel parameter="value" ...]your content here[/bsv-panel]
```

{% endcode %}

## Parameters

| Parameter    | Description                                                                                                                                                                                                    | Default    |
| ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
| textstyle    | <p>Defines the Bootstrap style for the text. Supported values:</p><ul><li>danger</li><li>dark</li><li>info</li><li>light</li><li>primary</li><li>secondary</li><li>success</li><li>warning</li></ul>           | *no value* |
| bgstyle      | <p>Defines the Bootstrap style for the background. Supported values:</p><ul><li>danger</li><li>dark</li><li>info</li><li>light</li><li>primary</li><li>secondary</li><li>success</li><li>warning</li></ul>     | *no value* |
| bordertop    | <p>Whether or not to draw a top border. Supported values are:</p><ul><li>no</li><li>yes</li></ul>                                                                                                              | yes        |
| borderright  | <p>Whether or not to draw a right border. Supported values are:</p><ul><li>no</li><li>yes</li></ul>                                                                                                            | yes        |
| borderbottom | <p>Whether or not to draw a bottom border. Supported values are:</p><ul><li>no</li><li>yes</li></ul>                                                                                                           | yes        |
| borderleft   | <p>Whether or not to draw a left border. Supported values are:</p><ul><li>no</li><li>yes</li></ul>                                                                                                             | yes        |
| borderstyle  | <p>Defines the Bootstrap style for the border. Supported values:</p><ul><li>danger</li><li>dark</li><li>info</li><li>light</li><li>primary</li><li>secondary</li><li>success</li><li>warning</li></ul>         | *no value* |
| borderradius | <p>What radius to apply to the border corners. Supported values are:</p><ul><li>rounded</li><li>rounded-top</li><li>rounded-right</li><li>rounded-bottom</li><li>rounded-left</li><li>rounded-circle</li></ul> | *no value* |
| id           | You can define anm ID for the element here in case you want to address it from a Javascript.                                                                                                                   | *no value* |
| classes      | Apply other CSS classes here. Separate the class names by blank.                                                                                                                                               | *no value* |
| styles       | Apply other CSS styles here. Separate the styles by semicolon.                                                                                                                                                 | *no value* |