List component

Masonry list







STATIC MASKS


Mask 1
Mask 2

Mask 4


Usage

<div class="maso-box maso-mask row">
    <div class="maso-item col-md-8 row-8">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
        <img src="http://www.framework-y.com/images/thumb.png"></a>
    </div>
    <div class="maso-item col-md-4 row-8">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
        <img src="http://www.framework-y.com/images/thumb.png"></a>
    </div>
    <div class="maso-item col-md-12 row-4">
        <a class="img-box lightbox img-scale-rotate" href="../images/title-background-4.jpg">
        <img src="http://www.framework-y.com/images/thumb.png"></a>
    </div>
    <div class="clear"></div>
</div>
<div class="maso-box maso-mask row">
    <div class="maso-item col-md-8 row-8">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="maso-item col-md-4 row-8">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="maso-item col-md-8 row-4">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="maso-item col-md-4 row-4">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="clear"></div>
</div>
<div class="maso-box maso-mask row">
    <div class="maso-item col-md-6 row-4">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="maso-item col-md-3 row-4">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="maso-item col-md-3 row-4">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="maso-item col-md-6 row-4">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="maso-item col-md-6 row-4">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="clear"></div>
</div>
<div class="maso-box maso-mask row">
    <div class="maso-item col-md-3 row-8">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="maso-item col-md-6 row-4">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="maso-item col-md-3 row-4">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="maso-item col-md-9 row-4">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="clear"></div>
</div>
<div class="maso-box maso-mask row">
    <div class="maso-item col-md-8 row-4">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="maso-item col-md-4 row-4">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="maso-item col-md-4 row-4">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="maso-item col-md-8 row-4">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="maso-item col-md-8 row-4">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="maso-item col-md-4 row-4">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="clear"></div>
</div>
<div class="maso-box maso-mask row">
    <div class="maso-item col-md-3 row-3">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="maso-item col-md-9 row-3">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="maso-item col-md-12 row-6">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="maso-item col-md-9 row-3">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="maso-item col-md-3 row-3">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="clear"></div>
</div>

LIST CONTENT BOX EXAMPLES



Examples

Multi services box

L'orem ipsum dolor sitamet, consectetur elit. Ut enim ad minim veniam, q rem aperiam ...

Multi services box

L'orem ipsum dolor sitamet, consectetur elit. Ut enim ad minim veniam, q rem aperiam ...

Multi services box

L'orem ipsum dolor sitamet, consectetur elit. Ut enim ad minim veniam, q rem aperiam ...

A travel around the wonderful world

Travel, Motors Admin

L'orem do eiusmod tempor incididunt ut labore et dolore magna aliqua ...

A travel around the wonderful world

Travel, Motors Admin

L'orem do eiusmod tempor incididunt ut labore et dolore magna aliqua ...

A travel around the wonderful world

Travel, Motors Admin

L'orem do eiusmod tempor incididunt ut labore et dolore magna aliqua ...


Usage

<div class="grid-list">
    <div class="grid-box row">
        <div class="maso-item col-md-4">
            <div class="advs-box advs-box-side-icon" data-anima="rotate-20" data-trigger="hover">
                <div class="icon-box">
                    <i class="fa fa-smile-o icon anima"></i>
                </div>
                <div class="caption-box">
                    <h4>Multi services box</h4>
                    <p>
                        L'orem ipsum dolor sitamet, consectetur elit. Ut enim ad minim veniam, q rem aperiam ...
                    </p>
                </div>
            </div>
        </div>
        <div class="maso-item col-md-4">
            <div class="advs-box advs-box-side-icon" data-anima="rotate-20" data-trigger="hover">
                <div class="icon-box">
                    <i class="fa fa-gears icon anima"></i>
                </div>
                <div class="caption-box">
                    <h4>Multi services box</h4>
                    <p>
                        L'orem ipsum dolor sitamet, consectetur elit. Ut enim ad minim veniam, q rem aperiam ...
                    </p>
                </div>
            </div>
        </div>
        <div class="maso-item col-md-4">
            <div class="advs-box advs-box-side-icon" data-anima="rotate-20" data-trigger="hover">
                <div class="icon-box">
                    <i class="fa fa-gamepad icon anima"></i>
                </div>
                <div class="caption-box">
                    <h4>Multi services box</h4>
                    <p>
                        L'orem ipsum dolor sitamet, consectetur elit. Ut enim ad minim veniam, q rem aperiam ...
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="grid-list columns-list">
    <div class="grid-box row">
        <div class="maso-item col-md-4">
            <div class="advs-box advs-box-top-icon-img niche-box-post boxed" data-anima="scale-rotate" data-trigger="hover">
                <a class="img-box"><img class="anima" src="http://www.framework-y.com/images/thumb-wide.png"></a>
                <div class="advs-box-content">
                    <h2><a href="#">A travel around the wonderful world</a></h2>
                    <div class="tag-row">
                        <span><i class="fa fa-bookmark"></i> <a href="#">Travel</a>, <a href="#">Motors</a></span>
                        <span><i class="fa fa-pencil"></i>Admin</span>
                    </div>
                    <p class="niche-box-content">
                        L'orem do eiusmod tempor incididunt ut labore et dolore magna aliqua ...
                    </p>
                </div>
            </div>
        </div>
        <div class="maso-item col-md-4">
            <div class="advs-box advs-box-top-icon-img niche-box-post boxed" data-anima="scale-rotate" data-trigger="hover">
                <a class="img-box"><img class="anima" src="http://www.framework-y.com/images/thumb-wide.png"></a>
                <div class="advs-box-content">
                    <h2><a href="#">A travel around the wonderful world</a></h2>
                    <div class="tag-row">
                        <span><i class="fa fa-bookmark"></i> <a href="#">Travel</a>, <a href="#">Motors</a></span>
                        <span><i class="fa fa-pencil"></i>Admin</span>
                    </div>
                    <p class="niche-box-content">
                        L'orem do eiusmod tempor incididunt ut labore et dolore magna aliqua ...
                    </p>
                </div>
            </div>
        </div>
        <div class="maso-item col-md-4">
            <div class="advs-box advs-box-top-icon-img niche-box-post boxed" data-anima="scale-rotate" data-trigger="hover">
                <a class="img-box"><img class="anima" src="http://www.framework-y.com/images/thumb-wide.png"></a>
                <div class="advs-box-content">
                    <h2><a href="#">A travel around the wonderful world</a></h2>
                    <div class="tag-row">
                        <span><i class="fa fa-bookmark"></i> <a href="#">Travel</a>, <a href="#">Motors</a></span>
                        <span><i class="fa fa-pencil"></i>Admin</span>
                    </div>
                    <p class="niche-box-content">
                        L'orem do eiusmod tempor incididunt ut labore et dolore magna aliqua ...
                    </p>
                </div>
            </div>
        </div>
    </div>
</div> 

List items documentation

List items are content boxes, part of content box component. You can use almost all content box types.
Complete documentation here