Back to my page

Developers

The Thumbnailed List template

Description

This template is intended for the display of lists of rich items, each item being made of:

  • a title
  • a description
  • a picture

Please note that a thumbnail's style is fixed in the provided CSS, with the properties float: left and width: 92px, among others. The positioning of the text is also fixed.

Preview

Code

Defined CSS classes

nv-thumbnailedList
item
thumbnail
odd
even

Sample code

<div class="nv-thumbnailedList">
  <div class="item even">
    <a href="#"><img src="http://example.com/image.jpg" 
      alt="" class="thumbnail" /></a>
    <h3><a href="#">Item #1</a></h3>
    <p class="description">Lorem ipsum dolor sit amet, 
      consectetuer adipiscing elit. Phasellus</p>
  </div>
 
  <div class="item odd">
    <a href="#"><img src="http://example.com/image.jpg" 
      alt="" class="thumbnail" /></a>
    <h3><a href="#">Item #2</a></h3>
    <p class="description">Short text to test flotting picture behaviour.</p>
  </div>
 
  <div class="item even">
    <a href="#"><img src="http://example.com/image.jpg" 
      alt="" class="thumbnail" /></a>
    <h3><a href="#">Item #3</a></h3>
    <p class="description">Lorem ipsum dolor sit amet, consectetuer
      adipiscing elit. Maecenas vitae elit at sem dapibus iaculis. 
      Nullam nec ipsum. Fusce gravida, magna nec tincidunt laoreet, 
      est lorem porttitor nunc, non suscipit mauris turpis non 
      turpis. Class aptent taciti sociosqu ad litora torquent per 
      conubia nostra, per inceptos hymenaeos. Duis nec metus. Lorem 
      ipsum dolor sit amet, consectetuer adipiscing elit. Sed 
      gravida aliquam pede.</p>
  </div>
</div>

Sample widget

Business

Partner with us.

Developers

Build once, run everywhere.

Community

Get involved, get localized.

Press

News. Media kits. Press releases.