Skip to content

Styling Test Page

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 or
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-06 https://dashboard-06.braze.com https://rest.iad-06.braze.com
EU-01 https://dashboard.braze.eu or
https://dashboard-01.braze.eu
https://rest.fra-01.braze.eu
1
2
3
4
5
6
7
8
9
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-06 | `https://dashboard-06.braze.com` | `https://rest.iad-06.braze.com`
EU-01 | `https://dashboard.braze.eu` or<br> `https://dashboard-01.braze.eu` | `https://rest.fra-01.braze.eu`
{: .reset-td-br-1 .reset-td-br-2 .reset-td-br-3}

Resetting Table word-break by column

For tables columns which word-break should be reset to the default style, use markdown options to add a class to the table using .reset-td-br-1, .reset-td-br-2, .reset-td-br-3 , .reset-td-br-4, with the # corresponding to the column up to 4.

Usage

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}

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 here: Braze.com

1
[Braze.com](https://www.braze.com)

Image Test

Image: Logo

Linked Image Test

Linked Image: Braze

Image Styling

Text

Anchoring Images

Text




1
2
3
4
5
6
7
![Logo](/docs/assets/img/braze-logo-mark.png)

[![Braze](/docs/assets/img/braze-logo-mark.png)](https://www.braze.com)

![Text](/docs/assets/img/logo-braze-fa.svg?9cc9f80196685be9cc2b8ca6fd043ef7){: style="max-width:30%; color: green" }

![Text](/docs/assets/img/logo-braze-fa.svg?9cc9f80196685be9cc2b8ca6fd043ef7){: style="float:right;max-width:30%;" }
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!

Markdown Example

Alert Test

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"
1
{% include video.html id="[youtube_id]" source="youtube" %}

To align right or left, and limit max width to 50% use the align parameter = left or right:

1
2
3
{% include video.html id="[youtube_id]" align="left" source="youtube" %}

{% include video.html id="[youtube_id]" align="right" source="youtube" %}

Loom Example:

1
{% include video.html id="[loom_id]" source="loom" %}

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 ie youtube to the yaml header for the page. video_source defaults 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
  • 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#### 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 %}

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, i.e., 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
{% tabs %}
{% tab Tab 1 %}
{% subtabs %}
{% subtab Subtab 1 %}
Subtab 1 content
{% endsubtab %}
{% subtab Subtab 2 %}
Subtab 2 content
{% endsubtab %}
{% endsubtabs %}
{% endtab %}
{% endtabs %}
WAS THIS PAGE HELPFUL?
New Stuff!