# 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="https://2850223474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOT4oO0pn3LrvJLuVbRqg%2Fuploads%2Fgit-blob-c4f01f45db7cb6e5bb4055f08fd5dcecda85d36e%2Fscreenshot-panel-1.png?alt=media" 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="https://2850223474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOT4oO0pn3LrvJLuVbRqg%2Fuploads%2Fgit-blob-7e30f36b01cbcfcdab661571cc6a865b8ba15b9f%2Fscreenshot-panel-2.png?alt=media" 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="https://2850223474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOT4oO0pn3LrvJLuVbRqg%2Fuploads%2Fgit-blob-12e9f5874b2d3067fd04613efb0cd14e14e906c0%2Fscreenshot-panel-3.png?alt=media" 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* |