# Card

{% hint style="success" %}
Free Macro
{% endhint %}

## Screenshot

<figure><img src="https://3271911861-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDHpX6TOKpku17lmsHem1%2Fuploads%2FJIiWKm54QzF2VuiRxTz8%2Fcard-screenshot-768x385.jpg?alt=media&#x26;token=5ab275d9-9508-45bb-b2bc-1b53972d70dd" alt=""><figcaption></figcaption></figure>

## Description

A Bootstrap card has several sections that you can show or hide with the macro. See the following diagram:

<figure><img src="https://3271911861-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDHpX6TOKpku17lmsHem1%2Fuploads%2FmvwFlGos5mdgoAGls8TC%2Fcard-sections-768x782.jpg?alt=media&#x26;token=0a302c05-9ae4-424a-8f5b-07aea98905cc" alt=""><figcaption></figcaption></figure>

## Adding the Macro

Edit your page.

Select “+” => Other macros

Type in “Bootstrap” in the Search box

Select the “Bootstrap Card” macro

## Macro Options

<figure><img src="https://3271911861-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDHpX6TOKpku17lmsHem1%2Fuploads%2FFbP7muC7ILIJYNmM2wDm%2Fcard-macro-768x470.jpg?alt=media&#x26;token=4ac8e610-63ff-4fc5-bfd1-19047e4f84cf" alt=""><figcaption></figcaption></figure>

### **Header**

Enter the header of your card. If you leave this empty, the header section will not be shown.

### **Header Level**

Select the Confluence header level to be used for the card header.

### **Title**

Enter the title of your card. If you leave this empty, the title section will not be shown.

### **Title Level**

Select the Confluence header level to be used for the card title.

### **Subtitle**

Enter the subtitle of your card. If you leave this empty, the subtitle section will not be shown.

### **Subtitle Level**

Select the Confluence header level to be used for the card subtitle.

### **Width**

Specify the width of your card in pixel or in percent of the parent object.

If you leave this empty, the card’s width will be adjusted to 99.6% of the parent object. If that is the page itself, it will stretch along the whole page width. The default is set a littler lower than 100% to avoid vertical scroll bars that might occur in Confluence page sections.

If you enter a pixel value here, e.g. 300px, the width of the parent object will not matter. The card’s width will be what you enter.

### **Float Left**

The content on your page after the card will always be displayed below the card, even if you only set it to 300px for example. With this option enabled, the next content will be displayed on the right of it if the space available allows. Use this option if you want to place another card or some free text right next to it.

### **Style**

Select one of the [Bootstrap color styles.](bootstrap-color-styles)

<figure><img src="https://3271911861-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDHpX6TOKpku17lmsHem1%2Fuploads%2FHxmuJxdxIAnHqYpswMyV%2Fcard-styles-768x182.jpg?alt=media&#x26;token=c91f2a93-f1e5-40cc-a1f0-be64ae827991" alt=""><figcaption></figcaption></figure>

**Outline**

The same styles are also available as outline cards.

<figure><img src="https://3271911861-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDHpX6TOKpku17lmsHem1%2Fuploads%2FFwzceEDUm6sgKv76wSeC%2Fcard-styles-outline-768x180.jpg?alt=media&#x26;token=3149ba04-7378-470c-b46e-1c574e7806dc" alt=""><figcaption></figcaption></figure>

### **Use Image**

You can use an image in your card. It will be displayed at the top, underneath the Header. Allowed are image files of type GIF, JPG and PNG. You have to attach the image to the page first.

Switch this option on if you want to use an image in your card.

### **Image**

Select the image from your attachments that you want to use in your card. It is recommended that you size your image according to the width of your card. If your card is 300px wide, make your image so as well.

<figure><img src="https://3271911861-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDHpX6TOKpku17lmsHem1%2Fuploads%2FOTYIuTuO3HI0xV9tCD8n%2Fcard-image.jpg?alt=media&#x26;token=9e2bb820-bd58-4fcb-b435-8f11e3e1e006" alt=""><figcaption></figcaption></figure>

### **Footer**

Enter the footer of your card. If you leave this empty, the footer section will not be shown.

### Body

This macro supports a body. The content that you place in the content will be displayed in the card as regular text. See diagram above to locate the body.

After you save the macro while editing the page, put any text or another macro in the body:

<figure><img src="https://3271911861-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDHpX6TOKpku17lmsHem1%2Fuploads%2FD0yIDZfGpTT9qCPoF63K%2Fcard-body-768x158.jpg?alt=media&#x26;token=dc6af473-2929-4142-b3f3-cc04fe018172" alt=""><figcaption></figcaption></figure>
