COVID-19 response: we are happy to support our customers with workshops with up to 30 participants (where permitted), online brainstorming and trainings. Share your challenge with us and we will get back to you shortly.

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/000/368/cover/0107.jpg?2018" alt="Titel" width= 50%>
Titel

Example 100%

<img src="https://s3.amazonaws.com/brainstore-d2014/website/node/base/cover_images/000/000/368/cover/0107.jpg?2018" alt="Titel" width= 100%>
Titel

Example 25%

<img src="https://s3.amazonaws.com/brainstore-d2014/website/node/base/cover_images/000/000/368/cover/0107.jpg?2018" 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 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>


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>


More bootstrap formating

You can find more bootstrap formating here
Markdown experiments

More bootstrap 4 formatting options