Customizing callout component for a tile look

Code examples for customizing a callout component to be in a tile format.

While customizing pages within Unstack you might notice that callout sections don't fit every marketers' needs. That's why we've built an extremely CSS-friendly HTML structure which may be adjusted to fit any needs. However, we also, of course, understand CSS is not a language every marketer understands. To help with that, below are two code snippets.

Table of Contents

- Code Example #1

- Code Example #2

- How to Install the Code

Code Example #1

Code:

Code Example #2

Code:

Installing this code

TL;DR - Decide on the option you'd like to go with from above, copy the code, and add it into one of your Unstack pages via a custom code component.

1. Within your Unstack page which contains the callout component, you'd like to customize the design of via CSS click "Add Component" and add a new "Custom Code" component, preferably to the bottom of the page.
   
   
   
   Then from the side drawer, select "Custom Code"
   
   
2. Once the custom code component is at the bottom of the page, you'll want to copy the code example you'd like to use.
   
   You'll paste this into the custom code component and sandwich it between <style> and </style>
   
   To look like this:
   
   
   
3. Now, we'll want to add additional code in between those style tags (style tag = <style>) in order to hide the white space this code block will cause. We can do that by assigning the custom code component an anchor link of "custom"
   
   Begin by selecting the anchor icon:
   
   
   Next, add "custom" for the anchor link:
   
   
   Last, you'll add "#custom {display:none !important;} into the custom code block: