03. Add Content

After you have choosen a base file and added in it the modules you need all you have to do is add the content.
This page contains examples and the code needed to include anything from basic paragraphs and headlines to complex table layout, image positioning etc.
Most of the stuff here is pretty basic code but I wanted to include it for two reasons: make sure that even the novice have no problems and also I wanted to be able to copy paste code for faster mockup.
You could either copy paste source code from this page in the modules and then replace the dummy text or just add the content directly and just look at the code on this page for referance.

Headlines

<h1> Lorem ipsum dolor sit amet

<h2> Lorem ipsum dolor sit amet

<h3> Lorem ipsum dolor sit amet

<h4> Lorem ipsum dolor sit amet

<h1> <span>Lorem ipsum dolor sit amet </span></h1>
<h2> <span>Lorem ipsum dolor sit amet </span></h2>
<h3> <span>Lorem ipsum dolor sit amet </span></h3>
<h4> <span>Lorem ipsum dolor sit amet </span></h4>

Paragraphs

Aenean et ipsum nibh, quis aliquet nunc. Phasellus nisi lectus, elementum eget lobortis nec, congue vulputate diam. Aliquam molestie enim vel felis tincidunt ut sollicitudin lectus adipiscing. Phasellus ullamcorper massa vitae ante adipiscing porta.

<p>
	Aenean et ipsum nibh, quis aliquet nunc. Phasellus nisi
	lectus, elementum eget lobortis nec, congue vulputate.
</p>

Bold text

Aenean et ipsum nibh, quis aliquet nunc. Phasellus nisi lectus, elementum eget lobortis nec, congue vulputate diam. Aliquam molestie enim vel felis tincidunt ut sollicitudin lectus adipiscing. Phasellus ullamcorper massa vitae ante adipiscing porta.

 <b> quis aliquet nunc </b>

Italic

Aenean et ipsum nibh, quis aliquet nunc. Phasellus nisi lectus, elementum eget lobortis nec, congue vulputate diam. Aliquam molestie enim vel felis tincidunt ut sollicitudin lectus adipiscing. Phasellus ullamcorper massa vitae ante adipiscing porta.

<i> quis aliquet nunc </i>

Shout text

<span class="shout"> quis aliquet nunc </span>

Silence text

Aenean et ipsum nibh
Quis aliquet nunc

<h3><span>
	Aenean et ipsum nibh <br> 
	<span class="silence">quis aliquet nunc</span> 
</span></h3>

Links

<a href="#" title=""> quis aliquet nunc </a>

Align text left, center and right

Text aligned to the left

Text aligned centrally

Text aligned to the right

<p> Text aligned to the left </p>

<p class="text-align-center"> Text aligned centrally </p>

<p class="text-align-right"> Text aligned to the right </p>

Unordered and Ordered Lists

Lorem ipsum dolor sit ipsum dolor sit
Consectetur adipisicing elit adipisicing elit
Incididunt ut labore et dolore ipsum dolor

Lorem ipsum dolor sit ipsum dolor sit
Consectetur adipisicing elit adipisicing elit
Incididunt ut labore et dolore ipsum dolor

<ul>
	<li>Lorem ipsum dolor sit ipsum dolor sit</li>
	<li>Consectetur adipisicing elit adipisicing elit</li>
	<li>Incididunt ut labore et dolore ipsum dolor</li>
</ul>

<ol>
	<li>Lorem ipsum dolor sit ipsum dolor sit</li>
	<li>Consectetur adipisicing elit adipisicing elit</li>
	<li>Incididunt ut labore et dolore ipsum dolor</li>
</ol>

Quotes

“ Aenean et ipsum nibh, quis aliquet nunc. Phasellus nisi lectus, elementum eget lobortis nec. - Customer Name ”

<blockquote>
	&#8220; Aenean et ipsum nibh, quis aliquet nunc.
	Phasellus nisi lectus, elementum eget lobortis
	nec. - <i>Customer Name</i> &#8221;
</blockquote>

Adding an image
Note that the folder placeholders contains a lot of different sized placeholder images that you can use for mock-ups

<img src="placeholders/120x59.jpg" width="" height="" alt="">

Left float an image

Aenean et ipsum nibh, quis aliquet nunc. Phasellus nisi lectus, elementum eget lobortis nec, congue vulputate. Aenean et ipsum nibh, quis aliquet nunc.

<img src="placeholders/120x59.jpg" width="" height="" alt="" align="left" class="img-left-aligned">
								
<p>...</p>

Right float an image