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 for Callout Customization  Unstack Demo 2020-09-10 at 12.53.54 PM

Code:

 

Code Example #2

Note: We know they're VERY alike options and are actively working on other designs that we can provide code examples for. If you have a specific idea email chris (at) unstack.com.

Code for Callout Customization  Unstack Demo 2020-09-10 at 12.59.38 PM

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.

    Editing Code for Callout Customization copy 2020-09-10 at 1.18.58 PM

    Then from the side drawer, select "Custom Code"

    Editing Code for Callout Customization copy 2020-09-10 at 1.19.25 PM
  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:

    Editing Code for Callout Customization copy 2020-09-10 at 1.20.19 PM
  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:
    Editing Code for Callout Customization copy 2020-09-10 at 1.20.42 PM

    Next, add "custom" for the anchor link:
    Editing Code for Callout Customization copy 2020-09-10 at 1.21.15 PM

    Last, you'll add "#custom {display:none !important;} into the custom code block:
    Editing Code for Callout Customization copy 2020-09-10 at 1.22.09 PM