Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Tip

New Feature

Experience effortless card creation with Caelor AI. Simply use prompts to generate cards quickly and easily. Learn more about how it works.

Cards in Optics offer a visually appealing and organized way to present information on a Confluence page. They segment content into easily readable pieces, making it more accessible and engaging for readers. By using cards, teams can highlight key points, draw attention to specific pieces of content, and structure their pages in a way that guides readers through the information seamlessly.

...

Caelor cards macro v2
titleij19r6
content{"cards":[{"id":"209","title":"Project planning","text":"Type text here","label":"CARD LABEL","button":"View more","quote":"Design is not just what it looks like and feels like. Design is how it works.","author":"Steve Jobs","icon":"bootstrap/CloudsFill","themeColor":"#0065ff","image":{"imageUrl":"https://images.unsplash.com/photo-1598349326101-fc9e68975a52?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMzQyNzV8MHwxfHNlYXJjaHwzMnx8aWxsdXN0cmF0aW9ufGVufDB8fHx8MTY1Nzc5ODY5Mw&ixlib=rb-1.2.1&q=80&w=1080","source":"unsplash","link":"https://images.unsplash.com/photo-1598349326101-fc9e68975a52?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMzQyNzV8MHwxfHNlYXJjaHwzMnx8aWxsdXN0cmF0aW9ufGVufDB8fHx8MTY1Nzc5ODY5Mw&ixlib=rb-1.2.1&q=80&w=1080","id":"s8wknXs_O7U"},"newTab":"false","link":"","overlay":{"isActive":true,"color":"#000","opacity":0.2}},{"id":"xt3cl","title":"Architecture","text":"Type text here","label":"CARD LABEL","button":"View more","quote":"Design is not just what it looks like and feels like. Design is how it works.","author":"Steve Jobs","icon":"bootstrap/CloudsFill","themeColor":"#6083ff","image":{"imageUrl":"https://images.unsplash.com/photo-1518005020951-eccb494ad742?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMzQyNzV8MHwxfHNlYXJjaHw2fHxBcmNoaXRlY3R1cmV8ZW58MHx8fHwxNjU4MzE1NDEw&ixlib=rb-1.2.1&q=80&w=1080","source":"unsplash","link":"https://images.unsplash.com/photo-1518005020951-eccb494ad742?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMzQyNzV8MHwxfHNlYXJjaHw2fHxBcmNoaXRlY3R1cmV8ZW58MHx8fHwxNjU4MzE1NDEw&ixlib=rb-1.2.1&q=80&w=1080","id":"ACt8ycSzpdE"},"newTab":"false","link":"","overlay":{"isActive":true,"color":"#000","opacity":0.3}}],"config":{"type":"image","columns":2,"layout":["arrow"],"design":"hong_kong","textAlign":"left","height":180}}

...

How to use

To add the Please follow these steps to insert a Cards macro to on a Confluence page: 

  • Choose “+” in the Confluence editor

  • Search the “cards” and select the Optics - Cards.

Alternatively, type '/' on the Confluence page to see a list of suggestions and type 'Card.' Intuitive configuration dialogue helps users to create and customize buttons fast and easily.

...

Inline editing

...

Use inline editing feature and seamlessly edit the content of your cards. Write your cards copy directly in macro preview and make quick changes with one click.

...

Icons and emojis

...

Click on icon and choose from more than 5000 icons available and attract even more attention with Atlassian built-in emojis.

...

Color

...

Choose a theme color from the Atlassian primary and secondary colour palette. To define your company colours only, use Optics Styleguide.

...

Card Link

...

Add links to Confluence content (pages and attachments) and external URLs, giving them a more polished look. Use the email tab to open the mail client with the click on the button.

...

Elements

...

  1. Navigate to the Confluence page you wish to edit or create a new page.

  2. Once in edit mode, either click the plus icon in the navigation bar (insert elements) or press '/' on your keyboard to bring up the macro list.

  3. Type "Optics" in the search bar, then choose the Cards macro from the options displayed.

When the configuration dialog opens, it guides you through customizing cards, with a live preview showing changes in real-time. Once you're satisfied, click Save to add the button to your Confluence page. If you decide not to proceed, clicking Cancel will cancel the setup without inserting the macro.

Screenshot 2024-02-21 at 23.16.31.pngImage Added

Layout and Selected Card

The sidebar is divided into two tabs: Layout and Selected Card. Changes made in the Layout tab will apply to all cards, while the Selected Card tab has options specific to the currently selected card.

Inline editing

All options for editing your cards are available in two places: in the sidebar under the Selected Card tab and directly within the macro preview using the inline editing feature.

Card style and type

Design styles offer flexibility and creativity. Choose from a variety of city-themed styles and customize your cards to suit your needs. With options for text, icon, and image cards, you can easily select the elements you want to include, ensuring your content is visually appealing and engaging

Elements to display

Enable/disable card elements. By default, all elements are enabled.

Design styles

The design style feature allows you to explore and play with different design styles until you find one perfect for your use case. Also, you get to select which elements you want to include and visually present in your cards.

Tabs

Tabs in macros are better than creating many macros because they help to keep macros organized and easy to access. They also help to streamline the workflow by allowing users to group related topics into one tab, making it simpler to find the desired information.

Card templates

For starters, let's welcome and give a big round of applause for our newly added Templates. Although our design team had a field day getting them ready for you, they are primarily (pre)designed to make your life and work easier. Save your time and creative juices and choose from a cool selection of Text, Icon, and Image templates. Watch our new video → https://www.youtube.com/watch?v=W_DY6g03d8E

...

Of course, nothing is set in stone, so feel free to add your personal touch and further customize them to better suit your needs. And if you wish to show your work and share your creativity with others, you can create your own templates by adding the Library section. The library section allows you to store all your custom-designed cards in one place.

Tabs in Cards

Tabs in Cards make it easier to organize and keep track of content. They also make it easier to quickly access specific content, saving time and making it easier to find the content you need. This will eliminate the need to create five different Cards macros for five topics.

...

Tabs in macros are better than creating many macros because they help to keep macros organized and easy to access. They also help to streamline the workflow by allowing users to group related topics into one tab, making it simpler to find the desired information. Furthermore, tabs help to save space on a Confluence page, which many individual macros would otherwise occupy.

Roadmap

The button will receive updates to improve performance and user experience. We will introduce the following features soon:

  • Add to library

    Status
    colourGreen
    titleRELEASED

  • Card templates

    Status
    colourGreen
    titleRELEASED

  • Design styles

    Status
    colourGreen
    titleRELEASED

  • UX/UI improvements

    Status
    colourGreen
    titleRELEASED

  • Add to card library

    Status
    colourGreen
    titleRELEASED

  • Dynamic cards powered by Content Viz

    Status
    colourBlue
    titleprogress

  • More styles

    Status
    colourBlue
    titleprogress

  • Personalization powered by Cosmos

    Status
    colourBlue
    titleprogress

  • Design options for tabs

    Status
    colourBlue
    titleprogress

If you have any questions, need more detailed information, or want to share feature suggestions, please feel free to contact us via our service desk.

...

Tabs

Tabs in macros simplify card organization. Group related topics into tabs for easy access and streamline your workflow. It's a simple way to keep your content organized and find information quickly.

Note

Number of cards per tab is limited to 30.

Icons and emojis

Click on icon and choose from more than 5000 icons available and attract even more attention with Atlassian built-in emojis.

Color

Choose a theme color from the Atlassian primary and secondary colour palette. To define your brand colours, use Optics Styleguide.

Card Link

Add links to Confluence content (pages and attachments) and external URLs. Use the email tab to open the mail client with the click on the button.

Advanced options

Explore our Advanced Options for users seeking more design flexibility and additional features. Customize corner radius, card spacing, icon size, and title size to suit your preferences and enhance your design.

Caelor AI 🆕

Experience effortless card creation with Caelor AI. Simply use prompts to generate cards quickly and easily. Learn more about how it works.

...

Card templates

For starters, let's welcome and give a big round of applause for our newly added Templates. Although our design team had a field day getting them ready for you, they are primarily (pre)designed to make your life and work easier. Save your time and creative juices and choose from a cool selection of Text, Icon, and Image templates. Watch our new video → https://www.youtube.com/watch?v=W_DY6g03d8E

Of course, nothing is set in stone, so feel free to add your personal touch and further customize them to better suit your needs. And if you wish to show your work and share your creativity with others, you can create your own templates by adding the Library section. The library section allows you to store all your custom-designed cards in one place.

...

Tabs in Cards

Tabs in Cards make it easier to organize and keep track of content. They also make it easier to quickly access specific content, saving time and making it easier to find the content you need. This will eliminate the need to create five different Cards macros for five topics.

Tabs in macros are better than creating many macros because they help to keep macros organized and easy to access. They also help to streamline the workflow by allowing users to group related topics into one tab, making it simpler to find the desired information. Furthermore, tabs help to save space on a Confluence page, which many individual macros would otherwise occupy.

...

Roadmap

The button will receive updates to improve performance and user experience. We will introduce the following features soon:

  • Add to library

    Status
    colourGreen
    titleRELEASED

  • Card templates

    Status
    colourGreen
    titleRELEASED

  • Design styles

    Status
    colourGreen
    titleRELEASED

  • UX/UI improvements

    Status
    colourGreen
    titleRELEASED

  • Add to card library

    Status
    colourGreen
    titleRELEASED

  • Caelor AI

    Status
    colourGreen
    titleRELEASED

  • Dynamic cards powered by Content Viz

    Status
    colourBlue
    titleprogress

  • Personalization powered by Cosmos

    Status
    colourBlue
    titleprogress

  • Design options for tabs

    Status
    colourBlue
    titleprogress

If you have any questions, need more detailed information, or want to share feature suggestions, please feel free to contact us via our service desk.