Versions Compared

Key

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

...

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 panelAdvanced 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.

...

{"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}}
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

...

Macro templates and library

...