Lists

Basic list

Default style

<ul class="list">
	<li>Simple text</li>
	<li><a href="#">With simple link</a></li>
	<li><a href="#" class="list-link">With block link</a></li>
</ul>

This style works fine with icons:

<ul class="list">
	<li class="icon-user">Simple text</li>
	<li><a href="#" class="icon-user">With simple link</a></li>
	<li><a href="#" class="list-link icon-user">With block link</a></li>
</ul>

Spaced style and sort handles

<ul class="list spaced">
	<li>
		<a href="#" class="list-link">With block link</a>
		<span class="list-sort"></span>
	</li>
	...
</ul>

To enable sorting, you may use jQueri UI - make sure to include the sortable interaction - like this:

$('.list').has('.list-sort').sortable({
	handle: '.list-sort',
	placeholder: 'ui-state-highlight'
});

Block lists

Default style

  • This
  • Is
  • The Default
  • Block
  • List Style
<ul class="blocks-list">
	<li>This</li>
	<li>Is</li>
	<li>The Default</li>
	<li>Block</li>
	<li>List Style</li>
</ul>

Fixed width

class="blocks-list fixed-size-50"
  • Block
  • Block
  • Block
  • Block
class="blocks-list fixed-size-100"
  • Block
  • Block
  • Block
  • Block
class="blocks-list fixed-size-150"
  • Block
  • Block
  • Block
  • Block
class="blocks-list fixed-size-200"
  • Block
  • Block
  • Block
  • Block
class="blocks-list fixed-size-250"
  • Block
  • Block
  • Block
  • Block

Square blocks

class="blocks-list square-26"
class="blocks-list square-46"
class="blocks-list square-66"
class="blocks-list square-90"
class="blocks-list square-134"