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:
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 Style 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. Title Type the desired header or label of your card. It is a fixed size, bold font. Maximum character length is 50 characters Body Type the card content or description. Maximum character length is 255 characters Image 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
Destination 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.
Color Scheme Choose the background color for the card. There are four preselected options
White (default)
Dark Grey
Sky Blue
Mint Green
Or you can select the Pencil: to open a color picker and choose any color you want.The appearance of the color picker will depend on which browser you are using.
The text will automatically change to a contrasting color to maintain clarity.
- Click Save. The card preview displays.
- Click Publish.
- If your card is clickable, remember to test the defined link destination.
- 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.
- 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.
Examples
Limitations
Due to Atlassian limitations, there are a couple of things that do not behave as you might expect:
- 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 .