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 |
|---|
| panelBorder | 1px solid |
|---|
| iconAndTitleSize | 16 |
|---|
| 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":"😄"} |
|---|
| title | Exploring Early 19th Century Artifacts |
|---|
| panelStyle | info |
|---|
| customTitleColor | #ffffff |
|---|
| customHeaderColor | #0065FF |
|---|
| hasIcon | true |
|---|
| customBorderColor | transparent |
|---|
| hasTitle | true |
|---|
| customBorderColorcustomIconColor | transparent#ffffff |
|---|
| alignment | {"title":"left","body":"left"} | customIconColor |
|---|
| #ffffff | emojiEnabled | false |
|---|
| panelType | standard |
|---|
| customIcon | atlaskit/EditorInfoIcon |
|---|
|
This exhibit showcases a variety of artifacts from the early 19th century. |
| Caelor panel macro |
|---|
| panelBorder | 1px solid |
|---|
| iconAndTitleSize | 16 |
|---|
| 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":"😄"} |
|---|
| title | A Note of Gratitude |
|---|
| panelStyle | custom |
|---|
| customTitleColor | #ffffff |
|---|
| customHeaderColor | #6a4ec7ff |
|---|
| hasIcon | false |
|---|
| customBorderColor | transparent |
|---|
| hasTitle | true |
|---|
| customBorderColorcustomIconColor | transparent#ffffff |
|---|
| alignment | {"title":"center","body":"center"} |
|---|
| customIconColor | #ffffff |
|---|
| emojiEnabled | false |
|---|
| panelType | standard |
|---|
| customIcon | atlaskit/LightbulbIcon |
|---|
|
Thank you for your support! |
| Caelor panel macro |
|---|
| panelBorder | 1px solid |
|---|
| iconAndTitleSize | 16 |
|---|
| 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":"😄"} |
|---|
| title | Error Message |
|---|
| panelStyle | custom |
|---|
| customTitleColor | #172b4dff |
|---|
| customHeaderColor | #ff4310ff |
|---|
| hasIcon | true |
|---|
| customBorderColor | transparent |
|---|
| hasTitle | true |
|---|
| customBorderColorcustomIconColor | transparent#172b4dff |
|---|
| alignment | {"title":"left","body":"left"} | customIconColor | #172b4dff |
|---|
| emojiEnabled | false |
|---|
| panelType | notification |
|---|
| customIcon | atlaskit/LightbulbIcon |
|---|
|
We apologize for the inconvenience, an error has occurred. |
| Caelor panel macro |
|---|
| panelBorder | 1px solid |
|---|
| iconAndTitleSize | 16 |
|---|
| 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":"😄"} |
|---|
| title | Caution: Sharp Edges |
|---|
| panelStyle | custom |
|---|
| customTitleColor | #ffffff |
|---|
| customHeaderColor | #ffc300ff |
|---|
| hasIcon | true |
|---|
| customBorderColor | transparent |
|---|
| hasTitle | true |
|---|
| customBorderColorcustomIconColor | transparent#ffffff |
|---|
| alignment | {"title":"left","body":"left"} | customIconColor |
|---|
| #ffffff | emojiEnabled | false |
|---|
| panelType | standard |
|---|
| customIcon | atlaskit/LightbulbIcon |
|---|
|
This product contains sharp edges. Handle with care. |
| Caelor panel macro |
|---|
| panelBorder | 1px solid |
|---|
| iconAndTitleSize | 15 |
|---|
| 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":"😄"} |
|---|
| title | The Key to Success: Happiness |
|---|
| panelStyle | custom |
|---|
| customTitleColor | #172b4dff |
|---|
| customHeaderColor | #00b779ff |
|---|
| hasIcon | true |
|---|
| customBorderColor | #00b779ff |
|---|
| hasTitle | true |
|---|
| customBorderColorcustomIconColor | #00b779ff#172b4dff |
|---|
| alignment | {"title":"center","body":"left"} |
|---|
| customIconColor | #172b4dff |
|---|
| emojiEnabled | false |
|---|
| panelType | atlassian |
|---|
| customIcon | atlaskit/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:
...
Type | The panel type setting is used to define the type of panel; Standard, Notification, or Atlassian style. |
Advanced options | Our Advanced options are designed for users seeking more detailed customization: Button width → use the slider to increase or decrease the button's width, affecting the internal spacing. Rounded edges → select from predefined values to give your button rounded corners for a softer look. Shadow → enhance your button with depth by choosing one of the predefined shadow styles: Outer Shadow and Drop Shadow.
|
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. |
...
Insert macros within Panel macro
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.
...
| Caelor panel macro |
|---|
| panelBorder | 1px 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":"😄"} |
|---|
| title | Panel Title |
|---|
| panelStyle | success |
|---|
| customTitleColor | #ffffff |
|---|
| customHeaderColor | #36B37E |
|---|
| hasIcon | true |
|---|
| customBorderColor | transparent |
|---|
| hasTitle | true |
|---|
| customBorderColorcustomIconColor | transparent#ffffff |
|---|
| alignment | left | customIconColor | #ffffff |
|---|
| emojiEnabled | false |
|---|
| panelType | standard |
|---|
| customIcon | atlaskit/EditorSuccessIcon |
|---|
|
|
...
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.
...