Support Portal

Welcome
Login

Using Markdown in Text Tiles on Dashboards

Analytics supports the markup language in text tiles on dashboards. This gives you many more options for formatting your text or adding links and images to help make your dashboards pop!

Adding a Text Tile to a Dashboard

To add a text tile to a dashboard, first click the Edit button on the dashboard to enter Edit mode:

Then, click the Text button on the toolbar:


This displays the Text Tile window, where you can enter a Title, Subtitle, and the Body of the text tile:


It is in the text tile Body where you can use Markdown to format your text.

Once you have saved your text, a text tile is created that can be moved and resized just like any other tile on the dashboard.

Markdown Syntax Supported in Text Tiles

Not all Markdown syntax is supported in text tiles in Analytics. Here is the list of Markdown syntax that is supported. We've posted the Markdown syntax in a code blocks first, followed by the Markdown examples so you can see the result of the Markdown syntax.

Tables

| Tables        | Are           | Cool  |
| ------------- | ------------- | ----- |
| leopards      | have spots    | $1600 |
| zebras        | have stripes  |   $12 |
| polar bears   | are white     |    $1 |


Tables
Are
Cool
leopards
have spots
$1600
zebras
have stripes
$12
polar bears
are white
$1

Basic Syntax Highlighting:

`var hw = "Hello World!"`


var hw = "Hello World!"

Emphasis

Emphasis, aka italics, with *asterisks* or _underscores_.

Strong emphasis, aka bold, with **asterisks** or __underscores__.

Combined emphasis with **asterisks and _underscores_**.

Emphasis, aka italics, with asterisks or underscores.

Strong emphasis, aka bold, with asterisks or underscores.

Combined emphasis with asterisks and underscores.

Numbered Lists

1. First ordered list item
2. Another item
1. Actual numbers don't matter, just that it's a number
4. And another item.
  1. First ordered list item
  2. Another item
  3. Actual numbers don't matter, just that it's a number
  4. And another item.

Unordered Lists

* Unordered list can use asterisks
- Or minuses
+ Or pluses
  • Unordered list can use asterisks
  • Or minuses
  • Or pluses

Links

[I'm an inline-style link](https://www.google.com)

[I'm a reference-style link][Arbitrary case-insensitive reference text]

[I'm a relative reference to a repository file](../blob/master/LICENSE)

[You can use numbers for reference-style link definitions][1]

Or leave it empty and use the [link text itself].

URLs and URLs in angle brackets will automatically get turned into links. 
http://www.example.com or <http://www.example.com> and sometimes 
example.com (but not on Github, for example).

Some text to show that the reference links can follow later.

[arbitrary case-insensitive reference text]: https://www.mozilla.org
[1]: http://slashdot.org
[link text itself]: http://www.reddit.com

I'm an inline-style link

I'm a reference-style link

I'm a relative reference to a repository file

You can use numbers for reference-style link definitions

Or leave it empty and use the link text itself.

URLs and URLs in angle brackets will automatically get turned into links.
http://www.example.com or http://www.example.com and sometimes
example.com (but not on Github, for example).

Some text to show that the reference links can follow later.


Images

Here's our logo:

Inline-style: 
![alt text](https://support.portal..sevensenders.com/images/logo-black.svg)

Reference-style: 
![alt text][logo]

[logo]: https://support.portal.sevensenders.com/images/logo-black.svg

Here's our logo:


Inline-style: 


Reference-style: 



To control the size of the image displayed in relation to the tile size add a percent size parameter:


<img src="https://support.portal.sevensenders.com/images/logo-black.svg" width="75%"/>


You can change the width="75%" as desired. Or, provide explicit height and width maximums like this:


``<img src="https://support.portal.sevensenders.com/images/logo-black.svg" width=500 height=30/>


Note: Height and Width pixel parameters will NOT set the image to those exact dimensions, rather the aspect ratio of the image will be "best fit" to those constraints. i.e if the above "width=100 height=30" dimensions were set on an image that is originally 200x20 the result would be 100x10 since the logic is roughly "image width exceeds maximum > scale down until width maximum is reached"

Horizontal rule

Three or more hyphens

---

Asterisks

***

Underscores

___

Three or more hyphens

Asterisks

Underscores


Did you find it helpful? Yes No