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.
To add one or more cards, complete the following steps:
Navigate to the page you would like to edit.
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.
Click the position where you want to display your card.
Select Insert > View More in the Confluence editor.
Select the Card macro in the Select Macro screen.
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
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
- Click Insert. The card preview displays. To add more cards, complete the above steps. Multiple cards are rendered according to your page setup.
- Click Publish.
- If your card is clickable, remember to test the defined link destination.
- If adding more cards, complete the steps above.
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.
- Click the card, then click the Edit icon.
- 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.
- Click the card, then click the Trash icon.
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 .