Card

Increase user engagement by adding this clickable navigation element to call out important links to content or to add visual interest to a homepage index. If you want to use multiple cards together, for example in a grid or list pattern, these can be arranged horizontally or vertically according to your page setup. Customizing the card with statement images and contrasting color schemes adds instant appeal to your Confluence page.

Walkthrough

Watch our video walkthrough to see the Card macro in action.

Instructions

To add one or more cards, complete the following steps:

1. Navigate to the page you would like to edit.

2. Click the  Edit  icon in the top-right of the page, or simply press `e` on your keyboard to display the page in Edit mode.

3. Click the position where you want to display your card.

4. Select  Insert  >  View More  in the Confluence editor.

5. Select the Card macro in the Select Macro screen. 

6. Customize your card by completing the card parameters. The dynamic preview allows you to instantly view any changes you make to the card before inserting it.
   
   

   Parameter	Description	Required	Notes
   Card Title	Type the desired header or label of your card. It is a fixed size, bold font.		Maximum character length is 50 characters
   Card Body	Type the card content or description.		Maximum character length is 255 characters
   Page or destination URL	Type the title of the Confluence page or enter the complete destination URL.		If you use the page or URL option, the entire card will be clickable; if you do not add a link, it will be a static card.
   Card Layout	This option determines the orientation of the card along with the position of the card image.  See Examples for inspiration. Horizontal (default): card image is positioned above the title and body text Vertical: card image is positioned to the left of the title and body text Simple: card is displayed without an image area; the title appears above the body text		You can create a horizontal card without an image using the Simple option.
   Color Scheme	Choose the color theme to apply to the text area of the card. Light (default): dark text displayed on a white background  Dark: white text displayed on a dark gray background Sky Blue: dark text displayed on light blue background Mint Green: dark text displayed on pale green background		Hex codes: Light: #FFFFFF Dark: #414854 Sky Blue: #B9D4FB Mint Green: #BBF3D3
   Image Asset	Drag and drop an image file into the macro window or click Upload to select an image file from your local file storage. Once you have selected your image, an image cropper displays to allow you to refine the size and section of the image. See Resizing images .		Accepted image formats: JPEG, PNG, GIF, ICO BMP, and WEBP  Maximum file size: 15 MB

7. Click Insert. The card preview displays. To add more cards, complete the above steps. Multiple cards are rendered according to your page setup.
8. Click Publish. 
9. If your card is clickable, remember to test the defined link destination.
10. If adding more cards, complete the steps above.

Resizing images

The image cropper lets you reposition and resize the selection area of your chosen image.

• To reposition the image area, drag it to the desired position. You many need to scroll to display the desired area if your image is large.
• To resize the image, click a corner and drag it until the area is the desired size. The fixed-ratio image size can have a maximum height or width of 300 pixels.

Edit a Card macro

To make changes to a card after it is published, first display the page in Edit mode.

1. Click the card, then click the Edit icon.
2. Make your desired changes, then click Save. If you want to edit a card image, you will need to upload it again.

Remove a Card macro

To remove a card after it is published, first display the page in Edit mode.

1. Click the card, then click the Trash icon.

Examples

Limitations

We are aware of the following behaviors due to Atlassian limitations:

• Copy paste: copying and pasting Card macros that contain image attachments results in the same image ID being assigned to all card copies. Additionally, copied Card macros do not render in Edit mode, but will display in View mode.
• Google Chrome Incognito mode: card image attachments do not render if Confluence is opened in a Chrome Incognito tab.