Versions Compared

Old Version 10

changes.mady.by.user Marin Varvodic

Saved on

compared with

New Version 11

changes.mady.by.user Marin Varvodic

Saved on

Key

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

Cards are a superpowerful UI component similar to playing cards in shape and size, intended to encourage readers to click or tap to view more details. A single card usually contains several elements, such as an image, a title, and a link, all connected to the same content. You can also think of it as a repository for related information that is at the same time easily accessible and eye-catching.

Without a doubt, cards have been a standard element of UI design for quite some time. Or, if you prefer fashion references, a little black dress of the UI design. 🙂 And there are valid reasons for it. They are simple, straightforward, clickable, easy to customize, and not to forget - dazzling! On top of that, using cards allows you to gather multiple pieces of information into one easily readable unit.

Examples

Caelor cards macro v2
titlel581t
content{"cards":[{"id":"202","title":"Are you the one?","text":"If you have a creative, curious mind, then you have what we value the most. ","label":"CARD LABEL","button":"Read article","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":"/img/templates-cards/img1.jpg","link":"/img/templates-cards/img1.jpg","source":"attachments","id":"att21102593"},"newTab":"false","link":"","overlay":{"isActive":true,"color":"#000","opacity":0.3}},{"id":"vx2hnr","title":"Are you the one?","text":"If you have a creative, curious mind, then you have what we value the most. ","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-1498758536662-35b82cd15e29?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMzQyNzV8MHwxfHNlYXJjaHw5fHxtZW4lMjB3b3JrfGVufDB8fHx8MTY1ODMxNTE4Mg&ixlib=rb-1.2.1&q=80&w=1080","source":"unsplash","link":"https://images.unsplash.com/photo-1498758536662-35b82cd15e29?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMzQyNzV8MHwxfHNlYXJjaHw5fHxtZW4lMjB3b3JrfGVufDB8fHx8MTY1ODMxNTE4Mg&ixlib=rb-1.2.1&q=80&w=1080","id":"pzA7QWNCIYg"},"newTab":"false","link":"","overlay":{"isActive":true,"color":"#000","opacity":0.3}}],"config":{"type":"image","columns":2,"layout":["title","text","arrow"],"design":"hong_kong","textAlign":"left","height":240}}
 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}}
 Caelor cards macro v2
title79kvpl
content{"cards":[{"id":"110","title":"Working remotely","text":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis.","label":"CARD LABEL","button":"READ ARTICLE","quote":"Design is not just what it looks like and feels like. Design is how it works.","author":"Steve Jobs","icon":"bootstrap/Stars","themeColor":"#0065ff","image":{"link":"https://images.unsplash.com/photo-1612914380234-b35087733c4e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80","imageUrl":"https://images.unsplash.com/photo-1612914380234-b35087733c4e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"},"newTab":"false","link":"","overlay":{"isActive":true,"color":"#000","opacity":0.3}},{"id":"305pd","title":"Working remotely","text":"TypLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis.e 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":{"link":"https://images.unsplash.com/photo-1494500764479-0c8f2919a3d8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80","imageUrl":"https://images.unsplash.com/photo-1494500764479-0c8f2919a3d8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"},"newTab":"false","link":"","overlay":{"isActive":true,"color":"#000","opacity":0.3}}],"config":{"type":"icon","columns":2,"layout":["title","text","arrow"],"design":"berlin","textAlign":"center","height":180}}
How to use
To add the Cards macro to a Confluence page: 
  • Choose “+” in the Confluence editor
  • Search the “cards” and select the MacroSuite - 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
Usean inline editing feature and seamlessly edit the content of your cards. Write your cards copy directly on-screen and make quick changes with one click. There is no character limit.
Icon
Click on icon and choose from more than 5000 icons available and attract even more attention with Atlassian built-in emojis. To change the icon position or remove label, use the “Icon” dropdown in the macro configuration.
Color
Choose a theme color from the Atlassian primary and secondary colour palette. If you want to add more colours, use the HEX editor.
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
Use the Layout structure option to enable/disable overline, title, line and text. 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.
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. 
Our UX/UI teams works on more button templates and categories. It is not possible to change or delete predefined templates. Use the library feature to create and maintain the company design guidelines.
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'll be glad to hear we're currently working on adding the Library section. The Library section will be available in the new release, and it will allow you to store all your custom-designed cards in one place. Oh, we've just spilled the beans, but, hey, we all get to look forward to it now!
Roadmap
The button will receive updates to improve performance and user experience. We will introduce the following features soon: 
  • Add to library
  • Card templates 
     Status
    colourGreen
    titleRELEASED!
  • Design styles 
     Status
    colourGreen
    titleRELEASED!
  • UX/UI improvements 
     Status
    colourGreen
    titleRELEASED!
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.
 Button macro
buttonTextSuggest new feature
isButtonShadowOntrue
buttonColor#0252cc
buttonBorderColor
buttonNewTabtrue
buttonFontColor#ffffff
buttonSizemedium
buttonWidthDetection260
buttonIconColor#ffffff
buttonHoverColor#0252cc
buttonIconfas/angle-right
buttonTypeicon_right
buttonNewLink
buttonLinkhttps://caelor.atlassian.net/servicedesk/customer/portal/1/group/1/create/8
buttonRadius20
buttonShadow0
buttonWidth260