<?elements
class grid name "productlist"
string productCode
string productName size "50" tooltip
string productLine
string productVendor
string productDescription
string items_BR loop "0,0,0,1"
pager pager pglen "8"
?>
<style type="text/css">
div.cell {
  border:  2px solid #cfc;
  width:   220px;
  height:  330px;
  margin:  5px;
  padding: 2px;
  float:left;
}
div.cell table th {
  height:50px;
  background-color: #ccf;
}
</style>
<h2>Product catalog</h2>
<div class="pager">{pager.prev} {pager.pages} {pager.next}</div>
{BLOCK items}
<div class="cell">
  <table>
  <tr><th>{productName}</th></tr>
  <tr><td>{productLine}</td></tr>
  <tr><td><b>Vendor:</b>  {productVendor}</td></tr>
  <tr><td valign="top">
  <div style="height: 180px; overflow:hidden">
  <b>Description:</b><br>{productDescription}
  </div>
  </td></tr>
  <tr><td><i>Code: {productCode}</i></td></tr>
  </table>
  <input type="button" value="Purchase" disabled>
</div>
{IF items_BR}<br clear="all">{/IF}
{/BLOCK}
<br clear="all"><div class="pager">{pager.prev} {pager.pages} {pager.next}</div>