This component can render responsive Lists ready for adapt its container width.
You can render a full width list or add a little padding and rounded corners to it.
You can choose as well to render the List in two columns for higher widths.
<ul class="st-list [st-inset] [st-double]"> <li> <a href="#"> <div class="st-list-img"> <img src="imageSrc" alt="imageText" /> </div> <div class="st-list-content"> <h4 class="st-list-title">Title</h4> <p class="st-list-summary">Description (Hidden on mobile)</p> </div> </a> </li> ... More list items ... </ul>
Lists will fill the width of the parent container.
If you add the st-inset class to the List, a little padding and rounded corners will be included.
When using st-double class, a two-columns List will be rendered at higher widths.
less
For using just this component, create a .less file similar to Stashy.less, include in order the following imports and compile:
Stashy.Variables.less Stashy.Mixins.less Stashy.List.less