Markdown is a very simple and powerful form of formatting content.

Learn more about Markdown here. Also inspiring: this tutorial.

Some tips for you

Formatting

Bold

**Some text**

Looks like this

Some text

Shortcut: cmd + b

Italic

*Some text*

Looks like this

Some text

Shortcut: cmd + i

Links

To integrate a link to external pages

[Link title you'd like to appear](https://www.google.com)

Looks like this

Link title you'd like to appear

Shortcut: cmd + k

To integrate a link to an internal page

[Link title you'd like to appear](/sitemanager/markdown)

Looks like this

Link title you'd like to appear

To integrate a link to an email address

[Contact Some Body](mailto:some.body@brainstore.com)

Looks like this

Contact Some Body

To integrate a link to an page and triggering the browser to open a new window

<a href="https://unsplash.com/s/photos/bar" target="_blank">Link to inspiring bar images</a>

Looks like this

Link to inspiring bar images

Title Sizes

#This is a huge title

This is a huge title

## This is a very big title

This is a very big title

### This is a big title

This is a big title

#### This is a regular title

This is a regular title

##### This is a small title

This is a small title

###### This is a tiny title

This is a tiny title

Images

You can add images to text

You need am Image-URL to do so. You can find this be right-clicking on any image and copy the image address into following text. The width paramater indicated the size of the image in relation to body. Make sure you choose a mobile screen compatible size...

Example 50%

\<img src="https://s3.amazonaws.com/brainstore-d2014/website/node/base/cover_images/000/019/551/cover2x/rec_brain_online_workshops.jpg?2021" alt="Titel" width= 50%>

Example 100%

<img src="https://s3.amazonaws.com/brainstore-d2014/website/node/base/cover_images/000/019/551/cover2x/rec_brain_online_workshops.jpg?2021" alt="Titel" width= 100%>

Example 25%

<img src="https://s3.amazonaws.com/brainstore-d2014/website/node/base/cover_images/000/019/551/cover2x/rec_brain_online_workshops.jpg?2021" alt="Titel" width= 25%>

If your images are not online yet, create a gallery node, add images and get the urls from there.

Tables

Learn more about how to use markdown tables here

Comments?

To add a comment simply type a comment like this

<!-- You won't see this -->

And you won't see this.

If you add a comment in a paragraph make sure you add a new line before.

Special Text Styles

This line of text is meant to be treated as deleted text.

<p><del>This line of text is meant to be treated as deleted text.</del></p>

This line of text is meant to be treated as fine print.

<p><small>This line of text is meant to be treated as fine print.</small></p>

This line rendered as bold text.

<p><strong>This line rendered as bold text.</strong></p>

This line rendered as italicized text.

<p><em>This line rendered as italicized text.</em></p>

Colors

These are the available colors and their usage

Working with colors

You can use any color combination you like.

• You can set the color of the font
• You can set the color of the background

Examples for using colors

Don't forget to close the tags!

This text appears in the primary color with the regular font

<p class="text-primary">This text appears in the primary color with the regular font</p>

This text appears in the primary color with the regular font and strikethrough
<s class="text-primary">This text appears in the primary color with the regular font and strikethrough</s>

This text appears in the danger color with the regular font

<p class="text-danger">This text appears in the danger color with the regular font</p>

This text appears in the success color with the heading 4 (####) font

<h4 class="text-success">This text appears in the success color with the heading 4 (####) font</h4>

This text appears white with the background (bg) beeing warning in the heading 4 style (####)

<h4 class="bg-warning text-white">This text appears white with the background (bg) beeing warning in the heading 4 style (####)</h4>

This black text is highlighted with the network color

<p class="bg-network text-black ">This black text is highlighted with the network color</p>

<div class="card card-body w-50 p-0">
<p class="bg-network text-black p-0">This black text is highlighted with the network color in a card to get 50%</p>
</div>

This black text is highlighted with the network color

<p class="bg-network text-black width=50% ">This black text is highlighted with the network color</p>

<div class="bg-network text-black ">This paragraph is highlighted with the network color. There is no padding. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo .</div>

<div class="text-black bg-network p-3">
<h3>This is your title</h3>
<p class="m-0">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>

<div class="p-2 bg-network text-black">Highlight a an entire paragraph and add a box, the p stands for the padding (you can uses values from 1 to 5). Use this e.g. for a disclaimer -text is black background is network. Here some more text: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </div>

<div class="p-2 my-5 bg-network text-black">Add space before and after a paragraph + padding. The my-5 stands for the margin to and bottom being 5 -the padding (you can uses values from 1 to 5). Use this e.g. for a disclaimer -text is black background is network. Here some more text: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </div>

This text uses the danger background and adds bold and italic to it

<p class="bg-danger text-white lead font-italic font-bold">This text uses the danger background and adds bold and italic to it</p>

Add a link in primary color to a light background

<p><a href="www.brainstore.com" class="bg-light text-primary">Add a link in primary color to a light background </a></p>

Inline formating

You can use the "del" tag to mark text as deleted text.

You can use the "s" tag to mark text as as no longer accurate. text.

You can use the "b" tag to to mark text as as bold. text.

You can use the "br" tag to
start a new line in your text.

You can use the "big" tag to include big letters in your text

You can use the "strong" tag to include big letters in your text

You can use the "code" tag to mark text as code in your text

You can use the "u" tag to underline parts of your text

You can use the "small" tag to include small text in your text

You can use the "em" tag for italicized parts of your text

You can use the "sub" tag for _{sub parts of your} text

You can use the "em" tag for italicized parts of your text

You can use the "kbd" tag for kbd parts of your text

You can use the "sup" tag for ^{sup parts of your} text

Cards, buttons and badges

Buttons

No new tab

<a href="https://www.brainstore.com/team" class="btn btn-success">No new tab</a>

Include "target = "_blank" to open a new window

New tab

<a href="https://www.brainstore.com/team" class="btn btn-success" target ="_blank">New tab</a>

Cards

<div class="card card-body w-50">
<h1>Please return at 6pm </h1>
<br>
<a href="((link of the main lobby))" class="btn btn-success">Return to the main lobby</a>
</div>

Badges

Highlight

Text before the badge and after

<h1><span class="badge rounded-pill bg-danger text-white">Highlight</span></span></h1>
<h3>Text before <span class="badge rounded-pill bg-success text-white">the badge</span></span> and after</h3>