# 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
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.
| <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
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.
| <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
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="right" class="img-right-aligned"> <p>...</p>
### Tables
Aenean et ipsum nibh | Elementum eget lobortis nec | Quis aliquet nunc
Elementum eget lobortis nec | Quis aliquet nunc | Aenean et ipsum nibh
Quis aliquet nunc | Aenean et ipsum nibh | Elementum eget lobortis nec
| <table cellpadding="0" cellspacing="0" width="540" align="center"> <tr> <td align="center" class="bordered-bottom"> <p> Aenean et ipsum nibh</p></td> <td align="center" class="bordered-bottom-left"> <p> Elementum eget lobortis nec</p></td> <td align="center" class="bordered-bottom-left"> <p> Quis aliquet nunc</p></td> </tr> <tr> <td align="center" class="bordered-bottom"> <p> Elementum eget lobortis nec</p></td> <td align="center" class="bordered-bottom-left"> <p> Quis aliquet nunc</p></td> <td align="center" class="bordered-bottom-left"> <p> Aenean et ipsum nibh</p></td> </tr> <tr> <td align="center" class="bordered-bottom"> <p> Quis aliquet nunc</p></td> <td align="center" class="bordered-bottom-left"> <p> Aenean et ipsum nibh</p></td> <td align="center" class="bordered-bottom-left"> <p> Elementum eget lobortis nec</p></td> </tr> </table>
| Option 1 | Option 2
Aenean et ipsum nibh |  |
Elementum eget lobortis nec |  |
Quis aliquet nunc |  |
| learn more | learn more
| <table cellpadding="0" cellspacing="0" width="540" align="center"> <tr> <td width="240" class="bordered-bottom"> </td> <td width="150" align="center" class="bordered-bottom"><p>Option 1</p></td> <td width="150" align="center" class="bordered-bottom-left"><p>Option 2</p></td> </tr> <tr> <td width="240" class="bordered-bottom"> Aenean et ipsum nibh</td> <td width="150" align="center" class="bordered-bottom-left"><img src="placeholders/yes.jpg" width="32" height="32"></td> <td width="150" align="center" class="bordered-bottom-left"><img src="placeholders/yes.jpg" width="32" height="32"></td> </tr> <tr> <td width="240" class="bordered-bottom"> Elementum eget lobortis nec</td> <td width="150" align="center" class="bordered-bottom-left"><img src="placeholders/yes.jpg" width="32" height="32"></td> <td width="150" align="center" class="bordered-bottom-left"><img src="placeholders/yes.jpg" width="32" height="32"></td> </tr> <tr> <td width="240" class="bordered-bottom"> Quis aliquet nunc</td> <td width="150" align="center" class="bordered-bottom-left"><img src="placeholders/yes.jpg" width="32" height="32"></td> <td width="150" align="center" class="bordered-bottom-left"><img src="placeholders/yes.jpg" width="32" height="32"></td> </tr> <tr> <td width="240"> </td> <td width="150" align="center"><p><a href="http://www.site.com/">learn more</a></p></td> <td width="150" align="center"><p><a href="http://www.site.com/">learn more</a></p></td> </tr> </table>