Story Layouts - HTML Examples

This article provides HTML examples for two basic story layouts:

  • Header/Text/Image all in Arial Font
  • Header/Text all in Arial Font

All code examples should be copied into Notepad or a similar application to strip any formatting before being placed in the HTML editor.

Header/Text/Image (Arial Font)

<table style="WIDTH: 100%; BORDER-COLLAPSE: collapse">
   <tbody>
     <tr>
       <td style="FONT-STYLE: normal; FONT-FAMILY: Arial; FONT-SIZE: 12pt; FONT-WEIGHT: bold">Title Here</td>
    </tr>
     <tr>
       <td style="FONT-FAMILY: Arial; FONT-SIZE: 10pt">
         <table style="WIDTH: 160px; BORDER-COLLAPSE: collapse" align="left">
           <tbody>
             <tr>
               <td>150 px wide image here</td>
            </tr>
          </tbody>
        </table>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
    </tr>
  </tbody>
</table>

Header/Text (Arial Font)

<table style="WIDTH: 100%; BORDER-COLLAPSE: collapse">
   <tbody>
     <tr>
       <td style="FONT-STYLE: normal; FONT-FAMILY: Arial; FONT-SIZE: 12pt; FONT-WEIGHT: bold">Title Here</td>
    </tr>
     <tr>
       <td style="FONT-FAMILY: Arial; FONT-SIZE: 10pt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
    </tr>
  </tbody>
</table>

Keep Building!

These examples provide a basic foundation for your story layouts. However, once you get a grasp on how they work, keep practicing and experimenting all you like. You'll find that the more you keep building, the more robust and interesting your story layouts become!