Content Formatting Quick Reference

Use this quick reference to see how the most common content types are styled across this site and the HTML/Textile used to format them. It also shows how different content types interact with each other to ensure that the formatting works in a variety of content arrangements.

Jump to a section:

• Lists
• Headings
• Images
• Blockquotes
• Inline Formatting
• Code
• Tables

Lists

Unordered list:

• Lorem ipsum dolor sit amet, consectetur adipiscing elit.
• Integer id urna non orci pellentesque faucibus. Nunc tristique lorem id turpis. In at lacus id nisi imperdiet mattis.
• Nunc tristique lorem id turpis.
• In at lacus id nisi imperdiet mattis.

Ordered list:

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
2. Integer id urna non orci pellentesque faucibus. Nunc tristique lorem id turpis. In at lacus id nisi imperdiet mattis.
3. Nunc tristique lorem id turpis.
4. In at lacus id nisi imperdiet mattis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed nisl.

Heading Level 1 (H1)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed nisl.

HTML:

<div class="postdate"><span class="day">27</span>
<span class="month">Oct</span></div>
<h1>Lorem Ipsum Dolor Sit Amet</h1></div>

Heading Level 2 (H2)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed nisl. Duis mauris nulla, varius in, faucibus at, scelerisque vitae, libero.

Heading Level 3 (H3)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed nisl. Duis mauris nulla, varius in, faucibus at, scelerisque vitae, libero.

Images

Image with a caption:

HTML:

<div class="image">
<img class="image" src="/img.jpg"
alt="" /><p>Caption</p></div>

Linked image:

Textile formatting:

p(image). <a class="image" href="http://www.xyz.com">
<img src="/img.jpg" alt="" />

Image zoom:

Click to view full size image

Textile formatting:

<a class="image" href="/img2.gif" alt="" />
p(image). <img src="/img1.gif" alt="" /></a>
<br>Click to view full size image

Old image style:

Textile formatting:

p(image). <img src="/img.gif" alt="" />

Float image right:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed nisl. Duis mauris nulla, varius in, faucibus at, scelerisque vitae, libero.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed nisl. Duis mauris nulla, varius in, faucibus at, scelerisque vitae, libero.

HTML:

<p><img class="floatright" src="/img.gif" alt="" /></p>
<p>Lorem ipsum dolor sit amet...</p>

Float image left:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed nisl. Duis mauris nulla, varius in, faucibus at, scelerisque vitae, libero.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed nisl. Duis mauris nulla, varius in, faucibus at, scelerisque vitae, libero.

HTML:

<p><img class="floatleft" src="/img.gif" alt="" /></p>
<p>Lorem ipsum dolor sit amet...</p>

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed nisl.

Duis mauris nulla, varius in, faucibus at, scelerisque vitae, libero.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Textile formatting:

bq. Duis mauris nulla, varius in, faucibus at...

Inline Formatting

Lorem bold text dolor sit amet, strikethrough adipiscing elit. In sed nisl. Duis mauris nulla, varius in, emphasis faucibus at, link text scelerisque vitae, libero.

Code Presentation

<ul>
<li>Link One</li>
<li>Link Two</li>
</ul>

HTML:

<pre><code><ul>
<li>Link One</li>
<li>Link Two</li>
</ul></code></pre>

Tables

Example table:

Col 1	Col 2
Cell 1	Cell 2
Cell 3	Cell 4

HTML:

<table class="data">
<thead>
<tr>
<th width="250">Col 1</th>
<th width="250">Col 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>