List

Render beautiful responsive Lists

  Download   View project on Github

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.


Full width List. Two columns in higher widths.



Inset width List. Two columns in higher widths.



One column, full width List.



One column, inset List.


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