Wizard Recommends Cards

On this page

Formatting Guidelines

Introduction

  • Do not surround <table> or <h2> tags with <p> or <div> tags.

  • Do not use <center>...</center> tags any more. To center something, use <div align="center">...</div>.

  • Do not use <b>...</b> tags any more. To embolden something, use <strong>...</strong>.

  • Do not use <i>...</i> tags any more. To italicize something, use <em>...</em>.

  • Only use <p>...</p> tags to surround otherwise naked text.

  • When adding an image inside a link to a larger version of that image, use <a class="trans" ... ><img ... ></a>.

  • To add a section header:

    <h2>Header Name</h2>

  • To add an image that hangs off to the right:

    <div class="image--right"><img src="..." /></div>

  • To add a box for formatting code samples (as seen on this page): 
    <pre>
	Code Sample Here
</pre>
  • To add a narrow 50% width data table: 
    <div class="box desk-50percent">
  <h3 class="box-title">Table Title</h3><!--/box-title-->
  <div class="box-content">
	<table class="data" cellspacing="0" cellpadding="0" border="0">
	<tr>
		<th class="data-heading">Column Title 1</th>
		<th class="data-heading">Column Title 2</th>
	</tr>
	<tr>
		<td class="left_aligned">Left</td>
		<td>Row 1, Column 2</td>
	</tr>
	<tr>
		<td class="right_aligned">Right</td>
		<td>Row 1, Column 2</td>
	</tr>
	<tr>
		<td class="centered">Center</td>
		<td>Row 3, Column 2</td>
	</tr>
	</table>
  </div><!--/box-content-->
</div><!--/box-->

    The above code will produce the following centered table:

    Table Title

    Column Title 1 Column Title 2
    Left Row 1, Column 2
    Right Row 1, Column 2
    Center Row 3, Column 2
  • To add a 75% width data table: 
    <div class="box desk-75percent">
  <h3 class="box-title">Table Title</h3><!--/box-title-->
  <div class="box-content">
	<table class="data" cellspacing="0" cellpadding="0" border="0">
	<tr>
		<th class="data-heading">Column Title 1</th>
		<th class="data-heading">Column Title 2</th>
	</tr>
	<tr>
		<td class="left_aligned">Left</td>
		<td>Row 1, Column 2</td>
	</tr>
	<tr>
		<td class="right_aligned">Right</td>
		<td>Row 1, Column 2</td>
	</tr>
	<tr>
		<td class="centered">Center</td>
		<td>Row 3, Column 2</td>
	</tr>
	</table>
  </div><!--/box-content-->
</div><!--/box-->

    The above code will produce the following centered table:

    Table Title

    Column Title 1 Column Title 2
    Left Row 1, Column 2
    Right Row 1, Column 2
    Center Row 3, Column 2
  • To add a standard 100% width data table: 
    <div class="box">
  <h3 class="box-title">Table Title</h3><!--/box-title-->
  <div class="box-content">
	<table class="data" cellspacing="0" cellpadding="0" border="0">
	<tr>
		<th class="data-heading">Column Title 1</th>
		<th class="data-heading">Column Title 2</th>
		<th class="data-heading">Column Title 3</th>
	</tr>
	<tr>
		<td class="left_aligned">Left</td>
		<td>Row 1, Column 2</td>
		<td>Row 1, Column 3</td>
	</tr>
	<tr>
		<td class="right_aligned">Right</td>
		<td>Row 1, Column 2</td>
		<td>Row 1, Column 3</td>
	</tr>
	<tr>
		<td class="centered">Center</td>
		<td>Row 3, Column 2</td>
		<td>Row 3, Column 3</td>
	</tr>
	</table>
  </div><!--/box-content-->
</div><!--/box-->

    The above code will produce the following centered table:

    Table Title

    Column Title 1 Column Title 2 Column Title 3
    Left Row 1, Column 2 Row 1, Column 3
    Right Row 1, Column 2 Row 1, Column 3
    Center Row 3, Column 2 Row 3, Column 3
  • To add a large data table: 
    <div class="box box--expandable">
  <h3 class="box-title">Table Title<span class="box-title-expand desk-visible">Expand <i class="fa-regular fa-arrow-right-long"></i></span></h3><!--/box-title-->
  <div class="box-content">
	<table class="data" cellspacing="0" cellpadding="0" border="0">
	<tr>
		<th class="data-heading">Column Title 1</th>
		<th class="data-heading">Column Title 2</th>
		<th class="data-heading">Column Title 3</th>
	</tr>
	<tr>
		<td class="left_aligned">Left</td>
		<td>Row 1, Column 2</td>
		<td>Row 1, Column 3</td>
	</tr>
	<tr>
		<td class="right_aligned">Right</td>
		<td>Row 1, Column 2</td>
		<td>Row 1, Column 3</td>
	</tr>
	<tr>
		<td class="centered">Center</td>
		<td>Row 3, Column 2</td>
		<td>Row 3, Column 3</td>
	</tr>
	</table>
  </div><!--/box-content-->
</div><!--/box-->

    The above code will produce the following centered table:

    Table TitleExpand

    Column Title 1 Column Title 2 Column Title 3
    Left Row 1, Column 2 Row 1, Column 3
    Right Row 1, Column 2 Row 1, Column 3
    Center Row 3, Column 2 Row 3, Column 3
  • To add an extra-large data table: 
    <div class="box box--expandable">
  <h3 class="box-title">Table Title<span class="box-title-expand desk-visible">Expand <i class="fa-regular fa-arrow-right-long"></i></span></h3><!--/box-title-->
  <div class="box-content">
	<table class="data" cellspacing="0" cellpadding="0" border="0">
	<tr>
		<th class="data-heading">Column Title 1</th>
		<th class="data-heading">Column Title 2</th>
		<th class="data-heading">Column Title 3</th>
	</tr>
	<tr>
		<td class="left_aligned">Left</td>
		<td>Row 1, Column 2</td>
		<td>Row 1, Column 3</td>
	</tr>
	<tr>
		<td class="right_aligned">Right</td>
		<td>Row 1, Column 2</td>
		<td>Row 1, Column 3</td>
	</tr>
	<tr>
		<td class="centered">Center</td>
		<td>Row 3, Column 2</td>
		<td>Row 3, Column 3</td>
	</tr>
	</table>
  </div><!--/box-content-->
</div><!--/box-->

    The above code will produce the following centered table:

    Table TitleExpand

    Column Title 1 Column Title 2 Column Title 3
    Left Row 1, Column 2 Row 1, Column 3
    Right Row 1, Column 2 Row 1, Column 3
    Center Row 3, Column 2 Row 3, Column 3

    Note the class names to align a table header (th) or table cell (td):

    • class="left_aligned" to left-align
    • class="right_aligned" to right-align
    • class="centered" to center-align

    By default, regular table cells are right-aligned, to make the code smaller when showing large tables of numeric data.

Written by: Michael Shackleford