Versions Compared

Old Version 17

changes.mady.by.user Ana Borosa

Saved on

compared with

New Version 18

changes.mady.by.user Marin Varvodic

Saved on

Key

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

Panels are UI elements that allow users to quickly and easily display content, such as text and images, in a visually appealing way. Additionally, all MacroSuite macros can be displayed within the customized panels. Panels can be used to display information in a more organized fashion, or to highlight specific content. They can also be used as a way to group content into sections for easier navigation.

...

Examples

Caelor panel macro
panelBorder1px solid
iconAndTitleSize16
customBodyColor#0065FF
selectedEmoji{"id":"smile","name":"Smiling Face with Open Mouth and Smiling Eyes","short_names":["smile"],"colons":":smile:","emoticons":["C:","c:",":D",":-D"],"unified":"1f604","skin":null,"native":"😄"}
titleExploring Early 19th Century Artifacts
panelStyleinfo
customTitleColor#ffffff
customHeaderColor#0065FF
hasIcontrue
hasTitletrue
customBorderColortransparent
alignment{"title":"left","body":"left"}
customIconColor#ffffff
emojiEnabledfalse
panelTypestandard
customIconatlaskit/EditorInfoIcon

This exhibit showcases a variety of artifacts from the early 19th century.

Caelor panel macro
panelBorder1px solid
iconAndTitleSize16
customBodyColor#6a4ec7ff
selectedEmoji{"id":"smile","name":"Smiling Face with Open Mouth and Smiling Eyes","short_names":["smile"],"colons":":smile:","emoticons":["C:","c:",":D",":-D"],"unified":"1f604","skin":null,"native":"😄"}
titleA Note of Gratitude
panelStylecustom
customTitleColor#ffffff
customHeaderColor#6a4ec7ff
hasIconfalse
hasTitletrue
customBorderColortransparent
alignment{"title":"center","body":"center"}
customIconColor#ffffff
emojiEnabledfalse
panelTypestandard
customIconatlaskit/LightbulbIcon

Thank you for your support!

Caelor panel macro
panelBorder1px solid
iconAndTitleSize16
customBodyColor#ff4310ff
selectedEmoji{"id":"smile","name":"Smiling Face with Open Mouth and Smiling Eyes","short_names":["smile"],"colons":":smile:","emoticons":["C:","c:",":D",":-D"],"unified":"1f604","skin":null,"native":"😄"}
titleError Message
panelStylecustom
customTitleColor#172b4dff
customHeaderColor#ff4310ff
hasIcontrue
hasTitletrue
customBorderColortransparent
alignment{"title":"left","body":"left"}
customIconColor#172b4dff
emojiEnabledfalse
panelTypenotification
customIconatlaskit/LightbulbIcon

We apologize for the inconvenience, an error has occurred.

Caelor panel macro
panelBorder1px solid
iconAndTitleSize16
customBodyColor#ffc300ff
selectedEmoji{"id":"smile","name":"Smiling Face with Open Mouth and Smiling Eyes","short_names":["smile"],"colons":":smile:","emoticons":["C:","c:",":D",":-D"],"unified":"1f604","skin":null,"native":"😄"}
titleCaution: Sharp Edges
panelStylecustom
customTitleColor#ffffff
customHeaderColor#ffc300ff
hasIcontrue
hasTitletrue
customBorderColortransparent
alignment{"title":"left","body":"left"}
customIconColor#ffffff
emojiEnabledfalse
panelTypestandard
customIconatlaskit/LightbulbIcon

This product contains sharp edges. Handle with care.

Caelor panel macro
panelBorder1px solid
iconAndTitleSize15
customBodyColor#00b779ff
selectedEmoji{"id":"smile","name":"Smiling Face with Open Mouth and Smiling Eyes","short_names":["smile"],"colons":":smile:","emoticons":["C:","c:",":D",":-D"],"unified":"1f604","skin":null,"native":"😄"}
titleThe Key to Success: Happiness
panelStylecustom
customTitleColor#172b4dff
customHeaderColor#00b779ff
hasIcontrue
hasTitletrue
customBorderColor#00b779ff
alignment{"title":"center","body":"left"}
customIconColor#172b4dff
emojiEnabledfalse
panelTypeatlassian
customIconatlaskit/LightbulbIcon

Success is not the key to happiness. Happiness is the key to success.

...

How to use

To add the Panel macro to a Confluence page: 

  • Choose “+” in the Confluence editor

  • Search “panel” and select the Panel (by MacroSuite)

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

...

...

Type

The panel type setting is used to define the type of panel; Standard, Notification, or Atlassian style.

Design style

Panel design style settings refer to the overall look and feel of a panel. These setting includes; Info, Note, Error, Warning, Success, and Custom design styles. All of these elements work together to create a cohesive design style for the panel.

Elements

The Elements setting allows you to add or remove elements from a Panel. Elements consist of Icon and Title.

Note

Panel title and icon are edited inline, while the content is edited on the Confluence page once clicked on the

...

save button.

Icon and Title size

The size of the icon and title in the Panel can be changed using the slider.

Title Alignment

Title alignment can be set using the Title Alignment option. There are three different title alignment options, including Left, Center, and Right.

Body Alignment

Body alignment can be set using the Body Alignment option. There are three different body alignment options, including Left, Center, and Right.

...

Macro templates and

...

library

We heard you and finally introduced templates for Panels

...

. Check them out in our redesigned MacroSuite Styleguide.

If you want to save your custom-designed Panel, you can do so easily by adding it to the 

...

library. Additionally, saving your Panel to the Library makes it accessible to everyone on your team. So, don't lose it even if you don't use it! Save it for later and help your teammates overcome their creative blocks.

...

Not all Confluence users have permissions to save created panels to library. Open MacroSuite Styleguilde and add users

...

or Confluence groups that can create library

...

panels. Confluence admins have all permissions enabled.

...

Macro templates and library

MacroSuite panel provides users with the flexibility to enhance their content presentation. Within our panel macro you can seamlessly insert and utilize various Atlassian-native macros, but also our MacroSuite macros for a richer content experience.

Important Note: Please be aware that the compatibility of macros inside the panel may change with each new cloud version that Atlassian releases. Some of the macros are still not compatible.

Caelor panel macro
panelBorder1px solid
customBodyColor#36B37E
selectedEmoji{"id":"smile","name":"Smiling Face with Open Mouth and Smiling Eyes","short_names":["smile"],"colons":":smile:","emoticons":["C:","c:",":D",":-D"],"unified":"1f604","skin":null,"native":"😄"}
titlePanel Title
panelStylesuccess
customTitleColor#ffffff
customHeaderColor#36B37E
hasIcontrue
hasTitletrue
customBorderColortransparent
alignmentleft
customIconColor#ffffff
emojiEnabledfalse
panelTypestandard
customIconatlaskit/EditorSuccessIcon
Caelor cards macro v2
titleylb296
content{"cards":[{"id":"208","title":"Our new office in New York!","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","color":{"san_francisco":{"background":"#ffffff1f","color":"#0099ff"},"austin":{"background":"#0099ff","color":"#000000"},"mumbai":{"background":"#0099ff"},"hong_kong":{"background":"#0099ff"},"cape_town":{"background":"#0099ff"},"palo_alto":{"color":"#0099ff"},"new_york":{"color":"#0099ff"},"madrid":{"color":"#0099ff"},"berlin":{"color":"#0099ff"},"la_paz":{"color":"#0099ff"},"sydney":{"color":"#0099ff"},"tokyo":{"background":"#ffffff1f","color":"#027655ff"}},"image":{"imageUrl":"https://images.unsplash.com/photo-1524758631624-e2822e304c36?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMzQyNzV8MHwxfHNlYXJjaHw4fHxvZmZpY2V8ZW58MHx8fHwxNjU3Nzk4MTQ1&ixlib=rb-1.2.1&q=80&w=1080","source":"unsplash","link":"https://images.unsplash.com/photo-1524758631624-e2822e304c36?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMzQyNzV8MHwxfHNlYXJjaHw4fHxvZmZpY2V8ZW58MHx8fHwxNjU3Nzk4MTQ1&ixlib=rb-1.2.1&q=80&w=1080","id":"FV3GConVSss"},"newTab":"false","link":"","overlay":{"isActive":true,"color":"#000","opacity":0.3}},{"id":"1oi9h7","title":"Our new office in Austin!","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","color":{"san_francisco":{"background":"#ffffff1f","color":"#0099ff"},"austin":{"background":"#0099ff","color":"#000000"},"mumbai":{"background":"#0099ff"},"hong_kong":{"background":"#0099ff"},"cape_town":{"background":"#0099ff"},"palo_alto":{"color":"#0099ff"},"new_york":{"color":"#0099ff"},"madrid":{"color":"#0099ff"},"berlin":{"color":"#0099ff"},"la_paz":{"color":"#0099ff"},"sydney":{"color":"#0099ff"},"tokyo":{"background":"#ffffff1f","color":"#027655ff"}},"image":{"imageUrl":"https://images.unsplash.com/photo-1532323544230-7191fd51bc1b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMzQyNzV8MHwxfHNlYXJjaHwxOXx8SW50ZXJpb3J8ZW58MHx8fHwxNjcyNDAwNzA5&ixlib=rb-4.0.3&q=80&w=1080","source":"unsplash","link":"https://images.unsplash.com/photo-1532323544230-7191fd51bc1b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMzQyNzV8MHwxfHNlYXJjaHwxOXx8SW50ZXJpb3J8ZW58MHx8fHwxNjcyNDAwNzA5&ixlib=rb-4.0.3&q=80&w=1080","id":"9mPl0Zo7_gQ"},"newTab":"false","link":"","overlay":{"isActive":true,"color":"#000","opacity":0.3}}],"config":{"borderRadius":0,"gap":15,"type":"image","columns":2,"layout":[],"design":"tokyo","textAlign":"left","height":240,"iconRadius":50,"iconSize":100}}