Styling examples
This is how pages are styled on Braze Docs, including headers, tabs, codeblocks, and more.
Header Test
H1 Banner
H1 Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec tortor at lectus tempus tempor. Suspendisse tellus diam, finibus eu dictum non, varius et ipsum.
H2 Banner
H2 Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec tortor at lectus tempus tempor. Suspendisse tellus diam, finibus eu dictum non, varius et ipsum.
H3 Banner
H3 Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec tortor at lectus tempus tempor. Suspendisse tellus diam, finibus eu dictum non, varius et ipsum.
H4 Banner
H4 Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec tortor at lectus tempus tempor. Suspendisse tellus diam, finibus eu dictum non, varius et ipsum.
H5 Banner
H5 Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec tortor at lectus tempus tempor. Suspendisse tellus diam, finibus eu dictum non, varius et ipsum.
H6 Banner
H6 Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec tortor at lectus tempus tempor. Suspendisse tellus diam, finibus eu dictum non, varius et ipsum.
1
2
3
4
5
6
7
8
9
10
11
# H1 Banner
## H2 Banner
### H3 Banner
#### H4 Banner
##### H5 Banner
###### H6 Banner
Custom Header Anchor
To add an anchor to a heading, add the following code to the end of the line that the heading is on. Replace anchor-text with the anchor for this heading. Use lowercase letters and put hyphens between words.
1
# Heading Text {#anchor-text}
You can link to headings with custom anchors by creating a standard link with a number sign # followed by the custom anchor.
1
Here is my [link](#anchor-text)
Font Test
Normal Text
Emphasize Text
Bold
Bold Emphasize
Strikethrough
1
2
3
4
5
6
7
8
9
Normal Text
*Emphasize Text*
**Bold**
_**Bold Emphasize**_
~~Strikethrough~~
Quote Test
Quoted Text
Inline Quote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec tortor at lectus tempus tempor.
Quote Chunk
1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec tortor at lectus tempus tempor.
1
2
3
4
5
> Quoted Text
Lorem ipsum dolor ``sit amet, consectetur adipiscing elit``. Sed nec tortor at lectus tempus tempor.
``` Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec tortor at lectus tempus tempor. ```
Table Test
| Instance | Dashboard URL | REST Endpoint |
|---|---|---|
| US-01 | https://dashboard.braze.com orhttps://dashboard-01.braze.com |
https://rest.iad-01.braze.com |
| US-02 | https://dashboard-02.braze.com |
https://rest.iad-02.braze.com |
| US-03 | https://dashboard-03.braze.com |
https://rest.iad-03.braze.com |
| US-04 | https://dashboard-04.braze.com |
https://rest.iad-04.braze.com |
| US-05 | https://dashboard-05.braze.com |
https://rest.iad-05.braze.com |
| US-06 | https://dashboard-06.braze.com |
https://rest.iad-06.braze.com |
| US-07 | https://dashboard-07.braze.com |
https://rest.iad-07.braze.com |
| US-08 | https://dashboard-08.braze.com |
https://rest.iad-08.braze.com |
| EU-01 | https://dashboard.braze.eu orhttps://dashboard-01.braze.eu |
https://rest.fra-01.braze.eu |
1
2
3
4
5
6
7
8
9
10
11
12
13
| Instance | Dashboard URL | REST Endpoint |
| -------- | --------------------------------------------------------------------- | ------------------------------- |
| US-01 | `https://dashboard.braze.com` or<br> `https://dashboard-01.braze.com` | `https://rest.iad-01.braze.com` |
| US-02 | `https://dashboard-02.braze.com` | `https://rest.iad-02.braze.com` |
| US-03 | `https://dashboard-03.braze.com` | `https://rest.iad-03.braze.com` |
| US-04 | `https://dashboard-04.braze.com` | `https://rest.iad-04.braze.com` |
| US-05 | `https://dashboard-05.braze.com` | `https://rest.iad-05.braze.com` |
| US-06 | `https://dashboard-06.braze.com` | `https://rest.iad-06.braze.com` |
| US-07 | `https://dashboard-07.braze.com` | `https://rest.iad-07.braze.com` |
| US-08 | `https://dashboard-08.braze.com` | `https://rest.iad-08.braze.com` |
| EU-01 | `https://dashboard.braze.eu` or<br> `https://dashboard-01.braze.eu` | `https://rest.fra-01.braze.eu` |
| EU-02 | `https://dashboard-02.braze.eu` | `https://rest.fra-02.braze.eu` |
{: .reset-td-br-1 .reset-td-br-2 .reset-td-br-3 role="presentation"}
Resetting Table word-break by column
To reset the table word-break by column, use the following syntax:
1
{: .reset-td-br-NUM .reset-td-br-NUM .reset-td-br-NUM .reset-td-br-NUM role="presentation"}
Replace NUM with the corresponding column number, up to a maximum of 4 columns. If you have less than 4 columns, remove extra .reset-td-br-NUM placeholders. Your table should be similar to the following:
1
2
3
4
5
6
7
| Event Name | Feed Type | Description | Custom Attributes |
| ---------------------------------------------------------------- | ---------------------- | ------------------------------------------------------------ | ----------------------------------------------------------------------------- |
| UNBROKENWORDTHATISVERYLONGUNBROKENWORDTHATISVERYLONG | Unbound Feed | An email was successfully delivered to a User's mail server. | `campaign_id`, `canvas_step_id`, `canvas_id`, `canvas_variation_id` |
| `UNBROKENHIGHLIGHTTHATISVERYLONGUNBROKENHIGHLIGHTTHATISVERYLONG` | Unbound Feed | User opened an email. | `campaign_id`, `canvas_step_id`, `canvas_id`, `canvas_variation_id` |
| In-App Message Impression | Platform-specific Feed | User viewed an In-App Message. | `app_id`, `campaign_id`, `canvas_step_id`, `canvas_id`, `canvas_variation_id` |
{: .reset-td-br-1 .reset-td-br-2 .reset-td-br-3 .reset-td-br-4 role="presentation"}
| Event Name | Feed Type | Description | Custom Attributes |
|---|---|---|---|
| UNBROKENWORDTHATISVERYLONGUNBROKENWORDTHATISVERYLONG | Unbound Feed | An email was successfully delivered to a User’s mail server. | campaign_id, canvas_step_id, canvas_id, canvas_variation_id |
UNBROKENHIGHLIGHTTHATISVERYLONGUNBROKENHIGHLIGHTTHATISVERYLONG |
Unbound Feed | User opened an email. | campaign_id, canvas_step_id, canvas_id, canvas_variation_id |
| In-App-Message-Impression | Platform-specific Feed | User viewed an In-App Message. | app_id, campaign_id, canvas_step_id, canvas_id, canvas_variation_id |
| Event Name | Feed Type | Description | Custom Attributes |
|---|---|---|---|
| UNBROKENWORDTHATISVERYLONGUNBROKENWORDTHATISVERYLONG | Unbound Feed | An email was successfully delivered to a User’s mail server. | campaign_id, canvas_step_id, canvas_id, canvas_variation_id |
UNBROKENHIGHLIGHTTHATISVERYLONGUNBROKENHIGHLIGHTTHATISVERYLONG |
Unbound Feed | User opened an email. | campaign_id, canvas_step_id, canvas_id, canvas_variation_id |
| In-App-Message-Impression | Platform-specific Feed | User viewed an In-App Message. | app_id, campaign_id, canvas_step_id, canvas_id, canvas_variation_id |
Link Test
Link here: Braze.com
1
[Braze.com](https://www.braze.com)
Image Test
Image: 
Linked Image Test
Linked image:
Image Styling
Anchoring Images
1
2
3
4
5
6
7
{: style="max-width:30%;"}
[](https://www.braze.com)
{: style="max-width:30%; color: green" }
{: style="float:right;max-width:30%;" }
Gallery Test
This is a link.
This is another comment.
This is yet another comment.
IMAGE TITLE
This is a test to see if it will line break.
This is a regular comment.
1
2
3
4
5
6
7
{% gallery %}
{{site.baseurl}}/assets/img_archive/EBTH_Email.png?bf892368baf287cba5ab9a6e3b09431d <br> This is a [link](https://www.braze.com).
{{site.baseurl}}/assets/img_archive/iHeartRadio_Email.png?ecd2c8fe148939b7de957fe85cd6317e <br> This is another `comment`.
{{site.baseurl}}/assets/img_archive/Saucey_Email.png?b9768937a1cc12d4c08e55a52e700d68 <br> This is yet another **comment**.
{{site.baseurl}}/assets/img/schellman_iso27001_seal_grey_CMYK_300dpi_jpg.png?1b1fb9dbb80b0332c62512dcf9c83258 <br> **IMAGE TITLE** <br> This is a test to see if it will line break.
{{site.baseurl}}/assets/img/SOC2.png?6338040be8e98c4c9abe1f35b3e43e3a <br> This is a regular comment.
{% endgallery %}
Interactive Image Test
1
<div class="iactiveImg" data-ii="6967"></div><script src="https://interactive-img.com/js/include.js"></script>
Code Snippet Test
Code Test Objective C
1
2
- (void)submitFeedback:(ABKFeedback * )feedback
withCompletionHandler:(nullable void (^)(ABKFeedbackSentResult feedbackSentResult))completionHandler;
Code Test Swift
1
2
3
Appboy.sharedInstance()?.submitFeedback(feedback) { (feedbackSentResult) in
print("Feedback sent: (feedbackSentResult)")
}
Code Test Java
1
2
3
4
5
6
7
@Override
public void onResume() {
super.onResume();
// Registers the BrazeInAppMessageManager for the current Activity. This Activity will now listen for
// in-app messages from Braze.
BrazeInAppMessageManager.getInstance().registerInAppMessageManager(activity);
}
Code Test json
1
2
3
4
5
{
"attributes" : "Attributes" ,
"events" : ["Array", "Of", "Object"],
"purchases" : ["Array" ,"Of" ,"Purchase" ,"Object"]
}
Code Test JavaScript
1
2
3
4
5
braze.subscribeToFeedUpdates(function(feed) {
var cards = feed.cards;
braze.showFeed(undefined, cards);
});
braze.requestFeedRefresh();
Pygments Test
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#!/usr/bin/python3
from engine import RunForrestRun
"""Test code for syntax highlighting!"""
class Foo:
def __init__(self, var):
self.var = var
self.run()
def run(self):
RunForrestRun() # run along!
Alert Test
This is a tip
This is a note
This is a important alert
This is a warning
This is an update
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{% alert tip %}
This is a tip
{% endalert %}
{% alert note %}
This is a note
{% endalert %}
{% alert important %}
This is a important alert
{% endalert %}
{% alert warning %}
This is a warning
{% endalert %}
{% alert update %}
This is a update
{% endalert %}
Embedded Video Test
Embedded Video/YouTube
Defaults to YouTube embedded.
Embedded Video Right Align
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec tortor at lectus tempus tempor. Suspendisse tellus diam, finibus eu dictum non, varius et ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec tortor at lectus tempus tempor. Suspendisse tellus diam, finibus eu dictum non, varius et ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec tortor at lectus tempus tempor. Suspendisse tellus diam, finibus eu dictum non, varius et ipsum.
Embedded Video Left Align
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec tortor at lectus tempus tempor. Suspendisse tellus diam, finibus eu dictum non, varius et ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec tortor at lectus tempus tempor. Suspendisse tellus diam, finibus eu dictum non, varius et ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec tortor at lectus tempus tempor. Suspendisse tellus diam, finibus eu dictum non, varius et ipsum.
Loom Example
- use
source="loom"
You’ll need the YouTube ID to embed a YouTube video. It appears after v= in the URL. For example, https://www.youtube.com/watch?v=VR1qn1OBP7k has an ID of VR1qn1OBP7k.
1
{% multi_lang_include video.html id="[youtube_id]" source="youtube" %}
To align right or left, and limit the maximum width to 50% use the align parameter = left or right:
1
2
3
{% multi_lang_include video.html id="[youtube_id]" align="left" source="youtube" %}
{% multi_lang_include video.html id="[youtube_id]" align="right" source="youtube" %}
Loom Example:
1
{% multi_lang_include video.html id="[lid]" source="loom" %}
Featured Video Layout with Status Placement for Higher Resolution
To use the featured video layout which places a static video on the left side for higher resolution display, add a video_id and a video_type (such as youtube) to the YAML header for the page. By default, video_source is set to youtube.
1
2
3
layout: featured_video
video_id: [video_id]
video_source: youtube
List Test
Bullet
- List 1
- Sub List 1
- List 2
- Sub List 2a
- Sub Sub List 2
- Sub List 2a
- List 3
Numbered
- List 1
- Sub List 1
- List 2
- List 3
- Sub List 3a
- Sub List 3b
- Sub Sub List 3
- List 4
- Sub list 4a
- Sub Sub List 4
- Sub list 4b
- sub sub list 4
- Sub list 4a
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#### Bullet
- List 1
- Sub List 1
- List 2
- Sub List 2a
- Sub Sub List 2
- List 3
#### Numbered
1. List 1
- Sub List 1
2. List 2
3. List 3
- Sub List 3a
- Sub List 3b
- Sub Sub List 3
4. List 4
1. Sub list 4a
1. Sub Sub List 4
2. Sub list 4b
1. sub sub list 4
Collapsible Content Test
Click me to Expand
Look! A Hidden Code Block!
1
print("hello world!")
1
2
3
{% details Click me to Expand %}
...
{% enddetails %}
Tab Test
Custom Tabs
Add the following line of code to your AppDelegate.m file:
1
#import <AppboyTVOSKit/AppboyKit.h>
Within your AppDelegate.m file, add the following snippet within your application:didFinishLaunchingWithOptions method:
1
2
3
[Appboy startWithApiKey:@"YOUR-API-KEY"
inApplication:application
withLaunchOptions:launchOptions];
If you are integrating the Braze SDK with CocoaPods or Carthage, add the following line of code to your AppDelegate.swift file:
1
#import AppboyTVOSKit
For more information about using Objective-C code in Swift projects, see the [Apple Developer Docs][apple_initial_setup_19].
In AppDelegate.swift, add following snippet to your application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool:
1
Appboy.start(withApiKey: "YOUR-API-KEY", in:application, withLaunchOptions:launchOptions)
Usage
Enclose tabs in a {% tabs %} and {% endtabs %}
Enclose individual tab with the Liquid code and name of the tab {% tab [Tab name] %} and {% endtab %}
Note number of tabs on the page should be consistent, otherwise tab content might be hidden.
For example, if one set of tabs has C++,C-Sharp and JS, and another set of tabs has C-Sharp and JS,
then when somebody clicks on C++, the other section will show nothing. See the following local tabs option for a workaround.
1
2
3
4
5
6
7
8
{% tabs %}
{% tab objective-c %}
Content of objective-c
{% endtab %}
{% tab swift %}
Content of swift
{% endtab %}
{% endtabs %}
Local Tabs
For self-contained tabs, such as tabs that only change the tab content for the specific section, then use the local parameter in the parent tabs block.
1
2
3
{% tabs local %}
...
{% endtabs %}
Subtabs
For tabs within tabs, subtabs and subtab can be used. Default setting is local.
For global subtabs, use the global option: {% subtabs global %}
tab content 1
Subtab 1a content
Subtab 2a content
tab content 2
Subtab 1a content
Subtab 2a content
Markdown
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{% tabs local %}
{% tab Tab 1 %}
tab content 1
{% subtabs %}
{% subtab Subtab 1a %}
Subtab 1a content
{% endsubtab %}
{% subtab Subtab 2a %}
Subtab 2a content
{% endsubtab %}
{% endsubtabs %}
{% endtab %}
{% tab Tab 2 %}
tab content 2
{% subtabs %}
{% subtab Subtab 1b %}
Subtab 1a content
{% endsubtab %}
{% subtab Subtab 2b %}
Subtab 2a content
{% endsubtab %}
{% endsubtabs %}
{% endtab %}
{% endtabs %}
Edit this page on GitHub