Lozenge

The Lozenge macro creates a lozenge button with an optional link that's ideal for highlighting important information or directing users to additional resources. It is designed for small amounts of content (although the width can be changed to accommodate more content if required). This is to ensure that the content contained within the lozenge is concise and, in turn, leads to an improved user experience.

Example Lozenge with an Except

Learn more here about how to use each of our macros to increase functionality, engagement, and collaboration within your Confluence. 

Instructions

1. Navigate to the page you want to edit.
2. Click  Edit.
3. Click the position where you want to add a lozenge. This can be repositioned later if required.
4. Click Insert More Content  >  Other Macros.
5. Select the  Lozenge macro from the Macro Browser.
   

6. Customize the macro using the following parameters:

   Parameter	Description	Type	Default	Required
   Icon	The URL for an image (no larger than 48x48 pixels) or simply type in text to use as a label.	string	none
   Title	Enter the title of the lozenge, also used as the tooltip for links.	string	none
   Destination	The page, URL, or file to which the user will be directed when they click the button. The field will auto-complete for pages within the Confluence site, but can also take a full URL or file link , e.g. file:///c:/read_me.txt . You may also specify an email destination, e.g.  mailto:someone@somewhere.com  which will launch the default email client when the button is clicked.	string	none
   Color	Select the color of the left portion of the lozenge.	single select	silver
   Arrow	Select the arrow to use on the left portion of the lozenge: none: (default if no link is specified)  blue: (default if a link is specified) - a blue arrow is displayed green: a green arrow is displayed	single select	none, or blue
   Width	Define the width of the entire lozenge in pixels or %. Specify auto to automatically stretch the lozenge to fit its contents.	string	none
   Table based lozenge	Compatibility setting for use if the lozenge does not display correctly in older browsers.	checkbox	unselected

7. Click Insert. The macro placeholder displays.
   
8. Enter the text to display in the macro body, e.g. a description, summary text, or add an Excerpt Include macro.
   

9. Save the page to view the rendered lozenge.

   Published Result

   Example

   Your content goes here

10. Test any defined links.

    Page or URL parameter: If the defined URL or Confluence page does not exist, a new child page is created when the lozenge is first clicked using the value supplied in the "Page or URL" parameter. On subsequent clicks, Confluence will navigate to the created page. To ensure the link goes to an external webpage put 'https://' in front of the URL

Colors

There are nine colors to choose from for the left section of the lozenge, and two colors for the arrow.

Examples

Basic lozenge

Create a simple lozenge as follows:

Add an Icon

Any images you add are not held within the macro. You need to provide a URL for the image. One way to do this is to add the image to the page as an attachment. You can then use the URL for this image in the Icon field. 

Put the URL for your image in the icon field.

Published Result

Add a Label

If you want text to show in the left-hand section you can just input that text into the Icon field.

Lozenge Links

When a link is added to the lozenge, it displays a blue arrow by default:

Published Result

Click Me

This lozenge links to the Adaptavist website.

The title is linked so that browsers with JavaScript disabled can still follow the link. If a title is not specified, the link will disappear so browsers without JavaScript won’t be able to follow the link.

If you want a different color arrow or no arrow, select the option you want from the Arrow field.

Published Result

Click Me

This lozenge links to the Kolekti website

Lozenge Width

By default, all lozenges are 347px wide. However, they can be stretched to fit their contents.

For a lozenge that changes size to match the size of the content and the webpage type auto into the Width field.

Published Result

Click Me

This lozenge links to the Kolekti website and has the width set to auto

You can also set a percentage width, for example, 70%:

Published Result

Click Me

This lozenge links to the Kolekti website.

Or, a pixel width, for example 200px:

Published Result

Click Me

This lozenge links to the Kolekti website.