The Cards module in Optics makes Confluence pages more visual and organized by breaking content into clear, readable sections. It highlights key points and guides readers through information effortlessly, improving communication and making pages more engaging and user-friendly.

Open

Insert Cards

Follow these steps to insert a Cards module to your Confluence page:

1. Open the page you want to edit, or create a new one.

2. In edit mode, click the ‘+' icon in the toolbar or press '/' on your keyboard to open the module menu.

3. Type "Cards" or "Optics" in the search bar and select "Cards (by Optics)" or "Optics" from the list to open a configuration dialogue.

4. In the configuration dialog, choose a Card template and customize it using the live preview. The available customization options depend on the template you choose.

5. Once you're happy with the setup, click Add to page to insert the module. To cancel, simply click Cancel, and the module won’t be added.

Open

Start with templates

Creating cards start with choosing a template: Image, Emoji, or Illustration. Each one is crafted by our design experts to help you build outstanding, consistent content in Confluence. We’re continuously adding new templates to keep your pages fresh and visually engaging.

Open

Configuration

All card templates include two types of settings: global settings that apply to all cards, and individual settings that appear when you select a specific card.

Global settings

Global settings are visible only when no card is selected, allowing you to apply consistent styling and layout across the entire set. These settings affect all cards within the module and cannot be customized individually.

Open

Flexible display elements

Card elements such as subtext, label, arrow, and link text can be enabled or disabled, providing flexibility to adapt cards to different use cases. Available elements vary depending on the selected card template.

Styling options

Global styling options include corner rounding and color customization. The color picker follows a two-color scheme with accent and text colors to ensure visual consistency across light and dark modes, and to align with the overall design system. Available colors are defined in the  Optics Style Guide to maintain consistency across all formatting modules.

Individual Settings

Individual settings appear when a card is selected, allowing you to customize that specific card’s content and layout. These options allow you to customize the selected card’s content, and styling, such as text, icons, images, and colors, without affecting other cards in the module or the global settings.

Open

Inline editing

Card content can be edited directly within preview mode using inline editing, allowing for quick and seamless adjustments.

When hovering over a card, a quick-access toolbar appears. It includes commonly used options such as the image picker, link picker, emoji picker, as well as actions to reorder or delete the card. This toolbar is designed to streamline access to the most frequently used customization options.

Open

Image

Image templates allow setting background images for cards, making them more visually engaging. Supported image sources include the following:

• Unsplash: Provides a built-in library of high-quality, royalty-free images that can be added to cards with a single click. No manual uploads are required.

• Direct link: Displays an image by pasting its URL. Ideal for externally hosted images, just copy the link, and the image will appear on the card without uploading.

• Library: Connected to the  Optics Style Guide , this option supports uploading company-approved images. These can be reused across cards and other macros to ensure consistent branding.

• Page attachments: Supports selecting PNG or JPG images stored on any Confluence page, across any space. It also allows uploading new images directly, making it easy to incorporate both existing and newly added content.

Link

Each card can link to one of the following destinations, with settings to choose whether the link opens in the same tab or a new one:

• Confluence page: Includes filtering and search functionality to quickly locate and link relevant content within Confluence.

• External URL: Accepts any valid web address, simply paste the link and save.

• Email address: Opens the default email client with the address pre-filled, making it ideal for contact or support-related actions.

Content

While all content can be edited inline, the right sidebar also provides full access to content settings. It adjusts based on the selected template and reflects the visibility of options set in Global Settings. Cards under the Emoji templates support three types of visual elements:

• Emoji: Used to add personality and expressiveness to cards, making content feel more engaging and friendly.

• Icons: Available from four built-in libraries, offering a wide variety of styles to suit different use cases, from playful to professional.

• Logos: Part of a dedicated feature connected to the  Optics Style Guide . Allows Confluence admins to upload, manage, and use approved company logos across cards and other modules.

Styling options

Colors for specific elements can be customized on the selected card, overriding the global settings. Available colors are defined in the  Optics Style Guide  to maintain consistency across all formatting modules.

Group cards in tabs

Tabs in Cards help organize related content in a clean, structured way, all within a single module. Instead of creating multiple separate Cards modules for different topics, tabs allow grouping them together, making content easier to manage and navigate.

Open

Edit/Remove Cards

To edit or remove a Cards module from a Confluence page, follow these steps:

• Open the page where the Cards module is located

• Click Edit to enter page editing mode

• Locate and select the Cards module that needs to be updated or removed

• A small Confluence toolbar will appear above the module, offering options to edit, duplicate, or delete

• Click Edit to update the content or Delete to remove the module from the page

Need Help or Want to Connect?