# Card

The versatile card styles that this plugin still provides are not available in the newest Bootstrap 4.4.1 anymore. Since I like them a lot I left this just as is.

## Examples

{% code overflow="wrap" %}

```
[bsv-card heading="Heading" title="Title" subtitle="Subtitle" footer="Footer"]This is the content of the card[/bsv-card]
```

{% endcode %}

<figure><img src="https://2850223474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOT4oO0pn3LrvJLuVbRqg%2Fuploads%2Fgit-blob-c2995178364de7914e097d9c623012d39ee23b55%2Fscreenshot-card-1.png?alt=media" alt=""><figcaption></figcaption></figure>

{% code overflow="wrap" %}

```
[bsv-card heading="Heading" width="400px" style="info" img="/wp-content/uploads/2019/12/duelmen.jpg"]City Gate of Dülmen[/bsv-card]
```

{% endcode %}

<figure><img src="https://2850223474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOT4oO0pn3LrvJLuVbRqg%2Fuploads%2Fgit-blob-3026c42de3fd3b84094537a7f07c304918c76e57%2Fscreenshot-card-2.png?alt=media" alt=""><figcaption></figcaption></figure>

## Format

{% code overflow="wrap" %}

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

{% endcode %}

## Parameters

| Parameter     | Description                                                                                                                                                | Value      |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
| style         | <p>Defines the Bootstrap style. Supported values:</p><ul><li>danger</li><li>default</li><li>info</li><li>primary</li><li>success</li><li>warning</li></ul> | default    |
| heading       | Heading                                                                                                                                                    | *no value* |
| headinglevel  | <p>HTML heading level of the heading. Supported values:</p><ul><li>h1</li><li>h2</li><li>h3</li><li>h4</li><li>h5</li><li>h6</li></ul>                     | h4         |
| title         | Title                                                                                                                                                      | *no value* |
| titlelevel    | <p>HTML heading level of the title. Supported values:</p><ul><li>h1</li><li>h2</li><li>h3</li><li>h4</li><li>h5</li><li>h6</li></ul>                       | h4         |
| subtitle      | Sub-title                                                                                                                                                  | *no value* |
| subtitlelevel | <p>HTML heading level of the sub-title. Supported values:</p><ul><li>h1</li><li>h2</li><li>h3</li><li>h4</li><li>h5</li><li>h6</li></ul>                   | h5         |
| width         | Width of the card in px or %. If omitted the width of the parent object applies.                                                                           | *no value* |
| floatleft     | <p>Forces the card to float left. Supported values:</p><ul><li>no</li><li>yes</li></ul>                                                                    | no         |
| outline       | <p>Display the card in outline mode. Supported values:</p><ul><li>no</li><li>yes</li></ul><p>Only has an affect when style is used.</p>                    | no         |
| image         | URL of an image to display inside the card.                                                                                                                | *no value* |
| footer        | Footer text                                                                                                                                                | *no value* |