| Axle | 'Widgets'

Example semantic LESS:

.featured_events {
	.image_block_caption;
}
			

HTML Example:

<article>
  <ul class="featured_events">
    <li>
      <ul>
        <li class="image">image block</div></li>
        <li class="title"><h2>title block</h2></li>
        <li class="caption"><p>caption block</p></li>
      </ul>
    </li>
    <li>
      <ul>
        <li class="image">image block</div></li>
        <li class="title"><h2>title block</h2></li>
        <li class="caption"><p>caption block</p></li>
      </ul>
    </li>
    <li>
      <ul>
        <li class="image">image block</div></li>
        <li class="title"><h2>title block</h2></li>
        <li class="caption"><p>caption block</p></li>
      </ul>
    </li>
  </ul>
</article>			
			

Example LESS mixin:

.image_block_caption {
	.grid_12(9);
	> li {
		.grid_12(3);
		&:first-child {
			.alpha;
		}
		&:last-child {
			.omega;
		}
	}
	.image, .title, .caption {
		.grid_12(3);
		.alpha;
		.omega;
		height: 130px;
	}
	
	.title {
		height: 30px;
		background: @alpha_grey;
		h2 {
			.medium;
			margin: 0;
			line-height: 30px;
			color: @white;
			padding: 0 0 0 10px;
		}
	}
	.caption {
		.two_stop_linear_gradient (@fox_grey, fadeout(@white, 100%));
		height: 100px;
		p {
			padding: 10px;
		}
	}
}