Heading h1

<h1>heading H1</h1>

Heading h2

<h2>heading H2</h2>

Heading h3

<h3>heading H3</h3>

Heading h4

<h4>heading H4</h4>

Paragraph

<p>Cum sociis natoque penatibus et magnis dis.</p>

Italic

<em>Cum sociis.</em>

Bold

<strong>Cum sociis.</strong>

Buttons

Button Ghost

<a class="btn btn--ghost" href="#">Click me</a>

Button Full

<a class="btn btn--default" href="#">Click me</a>

Blockquote

Here is a blockquote

<blockquote>
<p>Here is a blockquote</p>
</blockquote>

Liste

  • Liste 1
  • Liste 2

<ul>
<li>Liste 1</li>
<li>Liste 1</li>
<ul>

  1. Marker 1
  2. Marker 2

<ol>
<li>Marker 1</li>
<li>Marker 1</li>
<ol>

Link

Referenzen

<a href="/referenzen">Zu den Referenzen</a>

Picture

Cras mattis consectetur purus sit amet fermentum. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. <img src="http://brentford.dev/media/wysiwyg/1._Heim_Office_PC.jpg">

Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Colors

I'm blue

    <p class="color--4">I'm blue</p>

I'm red

    <p class="color--107">I'm red</p>

I'm green

    <p class="color--108">I'm green</p>

I'm violet

    <p class="color--7">I'm violet</p>

Accordeon

Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis.
Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis.
Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis.
<div id="accordion" class="panel-group" role="tablist" aria-multiselectable="true">
<div class="panel" data-collapse="group">
<div class="panel-heading" role="tab">
<h4 id="panel-heading-1" class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#panel-body-1" role="button" aria-expanded="false" aria-controls="panel-body-1">
Integer posuere erat a ante venenatis dapibus posuere velit aliquet
</a>
</h4>
</div>
<div id="panel-body-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="panel-heading-1">
<div class="panel-body">
Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis.
</div>
</div>
</div>
<div class="panel" data-collapse="group">
<div class="panel-heading" role="tab">
<h4 id="panel-heading-2" class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#panel-body-2" role="button" aria-expanded="false" aria-controls="panel-body-2">
Integer posuere erat a ante venenatis dapibus posuere velit aliquet
</a>
</h4>
</div>
<div id="panel-body-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="panel-heading-2">
<div class="panel-body">
Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis.
</div>
</div>
</div>
<div class="panel" data-collapse="group">
<div class="panel-heading" role="tab">
<h4 id="panel-heading-3" class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#panel-body-3" role="button" aria-expanded="false" aria-controls="panel-body-3">
Integer posuere erat a ante venenatis dapibus posuere velit aliquet
</a>
</h4>
</div>
<div id="panel-body-3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="panel-heading-3">
<div class="panel-body">
Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis.
</div>
</div>
</div>
</div>