What are the Building Blocks?

Building Blocks are stripped down email components that can be arranged in any order to build an email. A layer of styling is then added to all the blocks selected for a specific email, allowing for easy and consistant branding.

The building blocks live in your Braze instance content blocks, so they can be called to build templates, or directly in canvases and campaigns.

How to add your own content to a block?

The Building Blocks leverage liquid - in the content blocks, each piece of content (images, urls, or copy for example) is assigned as a liquid variable. That variable can then be assigned when you build an email, just before calling the content block.

Still sounds obscure? Let’s have a quick example!

Below is the html code for one of the banner blocks, as it sits within content blocks in a Braze instance:

<style>
  @media only screen and (max-device-width: 480px) {
    .banner__content {
      font-size: {{mobile_main_body_font_size}} !important;
      line-height: {{mobile_main_body_line_height}} !important;
    }
  }
</style>

<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" bgcolor="{{banner_bg_color}}">
  <tr>
    <td style="padding:16px" class="sm-px-b sm-py-b">
      <p class="banner__content" style="font-family: {{font_family}}; font-size: 18px; font-weight: 500; line-height: 20px; text-align: center; color: {{banner_text_color}};">
        {{banner_copy}}
      </p>
    </td>
  </tr>
</table>

The banner copy is defined as a variable by {{banner_copy}}.

When you need to add this Building Block to an email, you would copy/paste the following from your documentation hub:

{% capture banner_copy %}Copy{% endcapture %}
{{content_blocks.${B1}}}

The above lets you define what you want the variable {{banner_copy}} to contain in this email, and the second line {{content_blocks.${B1}}} calls the content blocks code.

So what happens under the hood?

As a result, when your email builds, this is the code that will get compiled, thanks to the Braze content blocks feature:

{% capture banner_copy %}Copy{% endcapture %}
<style>
  @media only screen and (max-device-width: 480px) {
    .banner__content {
      font-size: {{mobile_main_body_font_size}} !important;
      line-height: {{mobile_main_body_line_height}} !important;
    }
  }
</style>

<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" bgcolor="{{banner_bg_color}}">
  <tr>
    <td style="padding:16px" class="sm-px-b sm-py-b">
      <p class="banner__content" style="font-family: {{font_family}}; font-size: 18px; font-weight: 500; line-height: 20px; text-align: center; color: {{banner_text_color}};">
        {{banner_copy}}
      </p>
    </td>
  </tr>
</table>

<aside> ❗ The assigned variables in an email always need to sit above the content block call, or their content will not be picked up in the block

</aside>

How to use your Documentation Hub?

How to build an email?

There are two blocks that always need to be added to your emails, one at the very top: