---
title: "How to customize a showcase using the HTML macro"
canonical: "https://support.appfire.com/space/CT/1562280560/How%20to%20customize%20a%20showcase%20using%20the%20HTML%20macro"
format: markdown
---
> Macro (aura-html)

## Summary

> ⚠️ The steps on this page require the Confluence instance to enable the HTML macro. Enabling these macros will open your Confluence site to cross-site scripting attacks. **Do not enable them** unless you trust all your users!

You can customize the [Showcase](https://appfire.atlassian.net/wiki/spaces/CTFCSM/pages/1562509458) macro by adding an [HTML macro](https://confluence.atlassian.com/doc/html-macro-38273085.html?__hstc=72543820.4e76311f874131a99198a462418b615c.1662100942946.1667208712442.1667211226999.146&__hssc=72543820.176.1667211226999&__hsfp=2024179838) to the page and changing the variables for the following CSS classes:

- `.sr-showcase>.showcase-title`: format the showcase title
- `.sr-showcase>.showcase-caption` to format the showcase description
- `.sr-showcase`** ** to format the showcase

For example, you can use the following syntax in the HTML macro to format the showcase title, description, button, and body:

```
<style>
/* customize Showcase Title */
.sr-showcase>.showcase-title {
background-color:black;
color: white; border-bottom: 2px solid black;
font-size: 30px;
}

/* customize Showcase Caption */
.sr-showcase>.showcase-caption {
background-color:lightblue; 
color: black; 
font-size: 20px;
}


/* customize Showcase Button color */
.showcase-action>.aui-button{ 
background-color:white;
}

/* customize Showcase Button color when hovered */
.showcase-action >.aui-button:hover{ 
background-color:cadetblue;
}


/* customize Showcase Size and color */
.sr-showcase {
height: 200px;
width : 400px; 
background-color: lightgreen;
}
</style>
```

![image](media://bb6c7e89-ed4e-4b6f-a101-b07e4ad06cd9)

![image](media://bd84fb7a-5568-4dc0-823d-98df3a0751c7)

## Notes

- Currently, it is not possible to customize the button's text color.
- For the button to appear in preview or in the page, the `Button Link`** **property must have a link.