Add Content with Markdown Syntax

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%>

Titel

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%>
Titel

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%>
Titel

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

primary - the color for first choice selection, e.g. in buttons
secondary - the color for secondary selection - e.g. options
success - all OK
warning - pay attention
danger - this is dangerous
info - good to know
light - light accent
dark - dark
network - BrainStore's yellow
splendid - some like it pink

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>


This black text is highlighted with the network color in a card to get 50%

<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>


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 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>


This is your title

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 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>


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 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>


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 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

Please return at 6pm


Return to the main lobby

<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>

Mix HTML and Markdown

This is how you can mix HTML and Markdown

Introduction

Markdown simply is a shorthand for HTML

Markdown simply replaces HTML Code.

So the markdown expression

# Hello World 

is identical to the HTML Tag

<h1> Hello World </h1>

Combining HTML and Markdown

You can combine Markdown and HTML on one page, as long as you make sure that all HTML blocks are closed before you start with markdown.

<h1>
Hello World
### I love you 
</h1>

Leads to this

Hello World ### I love you

And...

<h1>
Hello World
</h1>
### I love you 

Leads to this

Hello World

I love you

Start discovery

You can view the chat and return to the lobby anytime. Simply click on the chat icon image

Titel
Start Now

Integrate Icons from Fontawsome

BrainStore is subscribed to the Fontawsome Library. Access the library here

User Icon Blue

Camera Icon Black

Siren Orange

Heart Red

<h4 class='mb-2'><i class='fas fa-user text-success mr-2'></i>User Icon Blue</h4>
<h4 class='mb-2'><i class='fas fa-camera text-black mr-2'></i>Camera Icon Black</h4>
<h4 class='mb-2'><i class='fas fa-siren-on text-warning mr-2'></i>Siren Orange</h4>
<h4 class='mb-2'><i class='fas fa-heart text-danger mr-2'></i>Heart Red</h4>