ICS UI Developer Guide - Sample HTML for: portlet

<!-- section is an HTML5 element. Use div if you are using HTML4. -->
<section class="lotusSection2 lotusPortlet">
	<!-- header is an HTML5 element. Use div if you are using HTML4. -->
	<header class="lotusSectionHeader"><div class="lotusInner">
	<h2 class="lotusHeading lotusFirst"><a href="javascript:;">Blogs</a></h2>
	<a class="lotusIcon lotusActionIcon" href="javascript:;" title="Actions" role="button" aria-haspopup="true" aria-owns="[menuID]"><img src="../../css/images/blank.gif" alt="" aria-label="Actions" /><span class="lotusAltText">Actions</span></a>
	<!--if you are surfacing another button, add it here (you'll have to create a class and CSS for it) and create a wrapper span with class="lotusIcons" for all the buttons-->
	</div></header>
	<header class="lotusSubheader"><h3 class="lotusHeading2"><a href="javascript:;" class="lotusAction">Create Blog Entry</a></h3></header>
	<div class="lotusSectionBody">	
	<table class="lotusTable" border="0" cellspacing="0" cellpadding="0" role="presentation">	
	<tbody>
	<tr class="lotusFirst">					
	  <td width="20"><img class="yourProductSprite yourProductSprite-ftBlogs16" src="../../css/images/blank.gif" alt="Blog" /><span class="lotusAltText">Blog</span></td> 
	  <td><h4 class="lotusTitle"><a href="javascript:;">OFN 2009 Go-Green Strategies</a></h4></td>
	  <td class="lotusSS" style="width: 45px;"></td>
	  <td class="lotusAlignRight" style="width: 45px;"><a href="javascript:;" role="button" aria-expanded="false" aria-owns="[detailRowID]" title="Show details"><img class="lotusIcon16 lotusIconShow" src="../../css/images/blank.gif" alt="" aria-label="Show details" /><span class="lotusAltText">Show</span></a></td>
	</tr>
	<tr class="lotusMore">
	<td></td>
	<td colspan="2">
	<div class="lotusMeta"><ul class="lotusInlinelist"><li class="lotusFirst"><a href="javascript:;" class="lotusPerson">Samantha Daryn</a></li><li>Today 9:33 AM</li><li class="lotusTags">Tags: <span role="list"><span role="listitem"><a href="javascript:;">environment</a></span>, <span role="listitem"><a href="javascript:;">office</a></span></span></li><li>Comments (5)</li><li>Visits (8)</li></ul></div>
	</td><td></td></tr>
	<tr>					
	  <td width="20"><img class="yourProductSprite yourProductSprite-ftBlogs16" src="../../css/images/blank.gif" alt="Blog" /><span class="lotusAltText">Blog</span></td>
	  <td><h4 class="lotusTitle"><a href="javascript:;">Environmental impact proposal</a></h4></td>
	  <td class="lotusSS"></td>
	  <td class="lotusAlignRight"><a href="javascript:;" role="button" aria-expanded="false" aria-controls="[detailRowID]" title="Show details"><img class="lotusIcon16 lotusIconShow" src="../../css/images/blank.gif" alt="" aria-label="Show details" /><span class="lotusAltText">Show</span></a></td>
	</tr>
	<tr class="lotusMore">
	<td></td>
	<td colspan="2">
	<div class="lotusMeta"><ul class="lotusInlinelist"><li class="lotusFirst"><a href="javascript:;" class="lotusPerson">Gail Chao</a><li>16 Jan</li><li class="lotusTags">Tags: <span role="list"><span role="listitem"><a href="javascript:;">environment</a></span>, <span role="listitem"><a href="javascript:;">go green</a></span>, <span role="listitem"><a href="javascript:;">proposal</a></span></span></li><li>Comments (12)</li><li>Visits (22)</li></ul></div>
	</td><td></td></tr>
	<tr>					
	  <td width="20"><img class="yourProductSprite yourProductSprite-ftBlogs16" src="../../css/images/blank.gif" alt="Blog" /><span class="lotusAltText">Blog</span></td>
	  <td><h4 class="lotusTitle"><a href="javascript:;">Employeee Go-Green 2009 Plans</a></h4></td>
	  <td class="lotusSS"></td>
	  <td class="lotusAlignRight"><a href="javascript:;" role="button" aria-expanded="false" aria-controls="[detailRowID]" title="Show details"><img class="lotusIcon16 lotusIconShow" src="../../css/images/blank.gif" alt="" aria-label="Show details" /><span class="lotusAltText">Show</span></a></td>
	</tr>
	<tr class="lotusMore">
	<td></td>
	<td colspan="2">
	<div class="lotusMeta"><ul class="lotusInlinelist"><li class="lotusFirst"><a href="javascript:;" class="lotusPerson">Dan Misawa</a></li><li>14 Jan</li><li class="lotusTags">Tags: <span role="list"><span role="listitem"><a href="javascript:;">energy</a></span>, <span role="listitem"><a href="javascript:;">environment</a></span>, <span role="listitem"><a href="javascript:;">office</a></span></span></li><li>Comments (0)</li><li>Visits (5)</li></ul></div>
	</td><td></td></tr>
	<tr>					
	  <td width="20"><img class="yourProductSprite yourProductSprite-ftBlogs16" src="../../css/images/blank.gif" alt="Blog" /><span class="lotusAltText">Blog</span></td>
	  <td><h4 class="lotusTitle"><a href="javascript:;">Corporate Go-Green Initiative</a></h4></td>
	  <td class="lotusSS"></td>
	  <td class="lotusAlignRight"><a href="javascript:;" role="button" aria-expanded="false" aria-controls="[detailRowID]" title="Show details"><img class="lotusIcon16 lotusIconShow" src="../../css/images/blank.gif" alt="" aria-label="Show details" /><span class="lotusAltText">Show</span></a></td>
	</tr>
	<tr class="lotusMore">
	<td></td>
	<td colspan="2">
	<div class="lotusMeta"><ul class="lotusInlinelist"><li class="lotusFirst"><a href="javascript:;" class="lotusPerson">Ted Amato</a></li><li>12 Jan</li><li class="lotusTags">Tags: <span role="list"><span role="listitem"><a href="javascript:;">corporate</a></span>, <span role="listitem"><a href="javascript:;">go green</a></span></span></li><li>Comments (5)</li><li>Visits (2)</li></ul></div>
	</td><td></td></tr>
	<tr>					
	  <td width="20"><img class="yourProductSprite yourProductSprite-ftBlogs16" src="../../css/images/blank.gif" alt="Blog" /><span class="lotusAltText">Blog</span></td>
	  <td><h4 class="lotusTitle"><a href="javascript:;">Internal Global Outlook 2009</a></h4></td>
	  <td class="lotusSS"></td>
	  <td class="lotusAlignRight"><a href="javascript:;" role="button" aria-expanded="true" aria-controls="detailRowID" title="Hide details"><img class="lotusIcon16 lotusIconHide" src="../../css/images/blank.gif" alt="" aria-label="Hide details" /><span class="lotusAltText">Hide</span></a></td>
	</tr>
	<tr class="lotusMore">
	<td></td>
	<td colspan="2">
	<div class="lotusMeta"><ul class="lotusInlinelist"><li class="lotusFirst"><a href="javascript:;" class="lotusPerson">Samantha Daryn</a></li><li>12 Jan</li><li class="lotusTags">Tags: <span role="list"><span role="listitem"><a href="javascript:;">2009</a></span>, <span role="listitem"><a href="javascript:;">global</a></span>, <span role="listitem"><a href="javascript:;">gto</a></span>, <span role="listitem"><a href="javascript:;">outlook</a></span></span></li><li>Comments (0)</li><li>Visits (5)</li></ul></div>
	</td><td></td></tr>
	<tr id="detailRowID" class="lotusDetails" aria-hidden="false">
	<td></td>
	<td colspan="2">
<p>Ut caecus quis enim in ea consequat antehabeo, probo, quidem, loquor, uxor, et ea. Nutus autem ut vulputate obruo, facilisi at feugait aliquam quod quibus tristique hos eros nibh. Erat letalis conventio refoveo luptatum commodo vulputate huic esse hos consequat plaga veniam uxor imputo. </p>
	</td><td></td></tr>
	</tbody>
	</table>
	</div><!--end section body-->
	<div class="lotusSectionFooter">
	<div class="lotusPaging">
  <!-- ACCESSIBILITY NOTE: Always place a space on both sides of the dash between page numbers. JAWS will read the text "1-10" as "one dash one zero" while it reads "1 - 10" as "one dash ten" -->
  <div class="lotusLeft">Viewing 1 - 5 of 20</div>		
  <ul class="lotusRight lotusInlinelist">
	  <li class="lotusFirst">Previous</li>
	  <li><a href="javascript:;">Next</a></li></ul>
</div><!--end paging-->
	</div>
</section><!--end portlet-->