List group displays complex and custom content in li and dt elements

Default

= codeBlender "list-group", "molecule", { array: [ { active: true, title:  lorem.words( 2 ), url: "index.html" },
                                     { title:  lorem.words( 2 ), url: "index.html" } ] }

<div class='list-group nav'>
<a href="index.html" class="list-group-item  active">ea est

</a><a href="index.html" class="list-group-item ">dicta odio

</a></div>

List Group With Badges

omnis optio sunt quisquam

= codeBlender "list-group", "molecule", { array: [ { badge: "14", title: lorem.words( 2 ), url: "#" },
                                     { active: true, badge: "14", title: lorem.words( 2 ), url: "#" } ] }

<div class='list-group nav'>
<a href="#" class="list-group-item "><span class='badge'></span>

nihil nisi

</a><a href="#" class="list-group-item  active"><span class='badge'></span>

id quasi

</a></div>

Contextual

quam ut deserunt ratione

= codeBlender "list-group", "molecule", { array: [ { title: lorem.words( 2 ), url: "#", context: "success" },
                                     { title: lorem.words( 2 ), url: "#", context: "danger" } ] }

<div class='list-group nav'>
<a href="#" class="list-group-item list-group-item-success">deleniti expedita

</a><a href="#" class="list-group-item list-group-item-danger">nulla eius

</a></div>

Content

dolorem tempora

pariatur dolores ut ratione nesciunt esse voluptas at ut quia porro odit dolor sunt quia accusamus quis sit et non

maxime necessitatibus

id quia at est id placeat iusto aut repellat voluptatem velit eum perferendis autem atque et ut et hic molestiae

= codeBlender "list-group", "molecule", { array: [ { badge: "14", heading: lorem.words( 2 ), text: lorem.words( 20 ), url: "#" },
                                     { heading: lorem.words( 2 ), text: lorem.words( 20 ), url: "#" } ] }

<div class='list-group nav'>
<a href="#" class="list-group-item "><span class='badge'></span>

<h4 class='heading list-group-item-heading'>
temporibus minus
</h4>


<p>non rerum voluptate molestias sapiente ipsum error consectetur et maiores totam velit id architecto qui molestiae ad aliquid sit nobis</p>

</a><a href="#" class="list-group-item "><h4 class='heading list-group-item-heading'>
possimus enim
</h4>


<p>in rerum quis quam harum quia animi eos officia quia corrupti est repellat natus quas velit vel ut ut numquam</p>

</a></div>

= codeBlender "list-group", "molecule", { array: [ { title: lorem.words( 2 ) },
                                     { title: lorem.words( 2 ) } ],
                            list:  true }

<ul class='list-group nav'>
<li>
<a class='list-group-item'>maxime non
</a>
</li>
<li>
<a class='list-group-item'>cum ipsam
</a>
</li>
</ul>

Resources Useful websites and tutorials

Title	URL
Bootstrap list group	http://getbootstrap.com/components/#list-group

Tasks

Task	Date
Link should be optional for the list group - either li or a depending of url specified
Change contextual to colour or type
Change the hash-bangs for javascript:;

Code Blender

An atomic Middleman partials library