| Axle | 'Widgets'

HTML Example:

<article>
  <ul class="example_self_select_panel">
    <li class="header">Select list item</li>
    <li><a href="#">Select list item</a></li>
    <li class="selected">
      <a href="#">Select list item</a>
      <div class="selected_content">
        <ul>
          <li class="carrot"><span></span></li>
          <li class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
        </ul>
      </div>
    </li>
    <li><a href="#">Select list item</a></li>  
    <li><a href="#">Select list item</a></li>
    <li><a href="#">Select list item</a></li>
    <li><a href="#">Select list item</a></li>
  </ul>
</article>
			

Example LESS mixin:

.self_select_panel() {
	.extra_large;
	text-indent: 0.5555556em;
	font-weight: bold;
	li {
		line-height: 2em;
		border-bottom: 1px solid @golf_grey;
		&:hover {
			background: @hotel_grey;
		}
	}
	a {
		display: block;
		background: url(/public/images/self_select_panel.png) no-repeat 90% 50%;
		color: @alpha_grey;
		&:hover {
			text-decoration: none;
		}
	}
	.header {
		background: @alpha_grey;
		color: @white;
		&:hover {
			background: @alpha_grey;
		}
	}
	.selected {
		background: @hotel_grey;
		border-bottom-color: @charlie_grey;
		ul {
			margin-bottom: 0;
		}
	}
	.selected_content {
		color: @white;
		.macro;
		li {
			border: 0;
			&:hover {
				background: transparent;
			}
		}
	}
	.carrot {
		background: transparent;
		height: auto;
		position: absolute;
		margin: -.6666667em 0 0 1.833333em;
		span {
			border-color: transparent transparent @charlie_grey transparent;
			border-style: solid;
			border-width: 0 0.6666667em 0.6666667em 0.6666667em;
			display: block;
			height: auto;
			width: auto;
		}
	}
	.content {
		background: @charlie_grey;
		line-height: 1.5em !important;
		padding: .666667em .666667em 2em .666667em;
		text-indent: 0;
		font-weight: normal;
		&:hover {
			background: @charlie_grey !important;
		}
	}
}

			

Example semantic LESS:

Note that the width .grid_12(3); of the widget is defined in the application of the widget, not in the widget itself.

.example_self_select_panel {
	.grid_12(3);
	.self_select_panel;
}