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.

    ParameterDescriptionRequiredNotes
    Card TitleType the desired header or label of your card. It is a fixed size, bold font. 

    (tick)

    		Maximum character length is 50 characters
    Card BodyType the card content or description. 

    (tick)

    		Maximum character length is 255 characters
    Page or destination URLType the title of the Confluence page or enter the complete destination URL. 

    (error)

    		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

    (tick)

    		You can create a horizontal card without an image using the Simple option.
    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.

    (tick)

    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.

    Image AssetDrag 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 .

    (error)

    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

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 .