List test

by AaronLayton

HTML

<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<div class="list-container">
    
</div>
    
<script id="itemTemplate" type="text/template">
    <div class="list-item">
        <h2>{{index}}.</h2>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor magna felis, eu elementum metus consequat in. Etiam ullamcorper, velit vitae efficitur lobortis, eros sem hendrerit metus, sit amet dignissim est tortor sit amet tortor. Suspendisse tincidunt ligula non nulla lobortis varius. Sed leo dolor, sodales sed massa nec, convallis congue ipsum.</div>
</script>

CSS

body {
    background:#E9EAED;
    font-family: 'Open Sans', sans-serif;
    font-size:14px;
    padding:0;
    margin:0;
}

.list-container {
    padding:15px;
}
h2 {
    margin:0;
}

.list-item {
    background: #FFF;
    border: 1px solid #E5E6E9;
    border-radius: 3px;
    margin-bottom: 15px;
    padding:15px;
}

JavaScript

var container = $(".list-container"),
    template = $("#itemTemplate").html();

var i = 1000; 
while(i--)
{
    container.prepend(template.replace("{{index}}", i))
}