Lists
Tiled (Default)
<div class="list">
<div class="list-item-wrapper">
<a href="#" class="list-item">
<div class="image-contained">
<img src="..." alt="...">
</div>
<div class="list-item__primary">
<h4>List Item Title</h4>
<div class="list-item__meta">
<div class="rating rating--five"></div>
</div>
<p>...</p>
</div>
<div class="list-item__secondary">
<div class="price">
<span class="price__original">£30.00</span>
<span class="price__current">£15.00</span>
</div>
</div>
</a>
</div>
...
</div>
Horizontal
<div class="list list--horizontal">
...
</div>
Cards
List can be made to look like cards by adding a list--card modifier. This should be used whenever the list isn't on a white background.
<div class="list list--card">
...
</div>