loading spinner
Slate Pages

Style Guidelines for Articles

This document demonstrates how to stylize articles using markdown. Most of the markdown described in this document is standard markdown, and can be read about further here:

Headings

To create a heading, add number signs (#) in front of a word or phrase. The number of number signs you use should correspond to the heading level.

Header 1

How to write it in markdown:
# Header 1

The format:
# {some text}

Header 2

How to write it in markdown:
## Header 2

The format:
## {some text}
Header 3
How to write it in markdown:
### Header 3

The format:
### {some text}
Header 4
How to write it in markdown:
#### Header 4

The format:
#### {some text}
Header 5
How to write it in markdown:
##### Header 5

The format:
##### {some text}

Headers will automatically show up in the navigation bar to the right of the article. Sometimes you may want to include header-styled content in the article without it being in the navigation pane. To do this, add an exclamation before the text, like this:

### !I am a header 3, but I will not show up in the navigation pane

To align headings, use the same syntax as for text alignment. The default alignment is left.

Header 5
Header 5
How to write it in markdown:
##### ..center..Header 5

The format:
##### ..[text_align(center/right (default - left))]..{some text}

For titles hidden from the navigation "!" put before the alignment

How to write it in markdown:
##### !..center..Header 5

The format:
##### !..[text_align(center/right (default - left))]..{some text}

Text

Body - This is example of body text. No extra formatting (markdown) is required to render text like this

Italicized- This is example of italicized body text

How to write it in markdown:
*This is example of italicized body text*

The format:
*{some text}*

Bolded Text - This is example of bolded body text

How to write it in markdown:
**This is example of bolded body text**

The format:
**{some text}**

Italicized + Bold- This is example of Italicized + Bold body text

How to write it in markdown:
***This is example of Italicized + Bold body text*** 

The format:
***{some text}***

Text Alignment

Text will normally be left-justified, like this. No formatting needed to render text this way.

This is example of center aligned body text

How to write it in markdown:
..center..This is example of center aligned body text

The format:
..center..{some text}

This is example of right aligned text

How to write it in markdown:
..right..This is example of right aligned body text

The format:
..right..{some text}

Buttons & Links

How to write it in markdown:
[!Go to Terms](/terms)

The format:
[!link text](link url)

How to write it in markdown:
[!!Go to Terms](/terms)

The format:
[!!link text](link url)

How to write it in markdown
[this is an example of a text link to slatepages.com](https://slatepages.com)

The format:
[link text](link url)

To open the link in a new window, add "/:newTab" to the end of the link. This works for the buttons and links described in this paragraph.

How to write it in markdown
[this is an example of a text link to slatepages.com](https://slatepages.com/:newTab)

The format:
[link text](link url/:newTab)
Scroll button to form

Special case for use on landing pages ..center..

How to write it in markdown:
[!Scroll to Form](/scrollToForm)

The format:
[!button text](/scrollToForm)
Different link locations

An example where link is in the text. Example where link is not in text :

How to write it in markdown:

If you want the link to be out of text, you need to put two (or more) spaces at the end of the sentence and press Enter(Markdown  - Line break).


Simple text example: (space)(space) + (click "Enter")
[link text](link url)


You don`t need special syntax for a link in a text or freestanding links.

Images

Stacked Photo

alt text In a stacked photo, the image will simply appear on its own line, as shown above

How to write it in markdown:
![alt text](https://slatepages.com/wp-content/uploads/2018/06/Scroll-Dozer-300x169.jpg)

The format:
![alt text](image url)
Inline Photo

To add style to images (width and alignment) you can add qwery parameters to the url of the image. To set the width you can use the following units: em, px, %. Default values:

maxWidth = 100% of article text width (it is always 100% for mobile)
align=left

alt text With in inline photo, text will wrap around the photo, like shown here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

How to write it in markdown
![!alt text](https://slatepages.com/wp-content/uploads/2018/06/Scroll-Dozer-300x169.jpg?width=50px&right-align=true)

The format:
![!alt text](image url?width=50%&right-align=true)

Inserting video from YouTube

This is what the youtube video looks like

How to write it in markdown:
for width = 80% : 
[![80](YOUTUBE_VIDEO)](w_ezWG1yKQQ)

for width = 100% (default): 
[![](YOUTUBE_VIDEO)](w_ezWG1yKQQ) or [![100](YOUTUBE_VIDEO)](w_ezWG1yKQQ)

The format:
[![percentage_width](YOUTUBE_VIDEO)](video_ID)

Columns

One Column

This is example of one column of text. Here, the text will span the entire width of the content area. No extra formatting (markdown) is necessary to render a single column of text.

Two Columns

For two columns you can follow this example:

This is example of two columns of content. Here is the first column, and the second column is shown to the right

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

How to write it in markdown:
--!--
This is example of two columns of content. Here is the first column, and the second column is shown to the right
-!-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
--!--

The format:
--!--
{first column of content}
-!-
{second column of content}
--!--
Three Columns

For three (or more) columns you can follow this example:

This is example of three columns of content. Here is the first column, and the remaining column are shown to the right

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

How to write it in markdown:
--!--
This is example of two columns of content. Here is the first column, and the second column is shown to the right
-!-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-!-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
--!--

The format:
--!--
{first column of content}
-!-
{second column of content}
-!-
{third column of content}
--!--

Tables

Here is an example of a table.

column A

column B

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

How to write it in markdown:
|column A|column B|
| - | - |
| Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet|
|Lorem ipsum dolor sit amet|Lorem ipsum dolor sit amet|
|Lorem ipsum dolor sit amet|Lorem ipsum dolor sit amet|
|Lorem ipsum dolor sit amet|Lorem ipsum dolor sit amet|

For more information on how to work with tables, see

A table with 4 columns:

column A

column B

column A

column B

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

How to write it in markdown
|column A|column B|column C|column D|
| - | - | - | - |
| Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet|Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet|
|Lorem ipsum dolor sit amet|Lorem ipsum dolor sit amet|Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet|
|Lorem ipsum dolor sit amet|Lorem ipsum dolor sit amet|Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet|
|Lorem ipsum dolor sit amet|Lorem ipsum dolor sit amet|Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet|