List component

Grid list







LIST CONTENT BOX EXAMPLES


Examples

02 OCT, 15

The Framework Y

26.05.2015 Category

L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam ...

Enter Read more
15 NOV, 15

The Framework Y

26.05.2015 Category

L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam ...

Enter Read more
03 SET, 15

The Framework Y

26.05.2015 Category

L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam ...

Enter Read more

JACK CHRISTIAN

FOUNDER AND CEO


Lorem Ipsum is simply dummy text of the printing and industry. Lorem has been the industry.

JACK CHRISTIAN

FOUNDER AND CEO


Lorem Ipsum is simply dummy text of the printing and industry. Lorem has been the industry.

JACK CHRISTIAN

FOUNDER AND CEO


Lorem Ipsum is simply dummy text of the printing and industry. Lorem has been the industry.


Usage

<div class="grid-list">
    <div class="grid-box row">
        <div class="grid-item col-md-4">
            <div class="advs-box advs-box-multiple boxed" data-anima="scale-rotate" data-trigger="hover">
                <a class="img-box">
                    <img class="anima" src="http://www.framework-y.com/images/thumb-large.png" />
                </a>
                <div class="circle anima-rotate-20 anima">02 <span>OCT, 15</span></div>
                <div class="advs-box-content">
                    <h4 class="subtitle">The Framework Y</h4>
                    <div class="tag-row">
                        <span><i class="fa fa-calendar"></i>26.05.2015</span>
                        <span><i class="fa fa-bookmark"></i>Category</span>
                    </div>
                    <p>
                        L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt
                        ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam ...
                    </p>
                    <a class="btn btn-default btn-primary">
                        Enter
                    </a>
                    <a class="btn btn-default">
                        Read more
                    </a>
                </div>
            </div> 
        </div>
        <div class="grid-item col-md-4">
            <div class="advs-box advs-box-multiple boxed" data-anima="scale-rotate" data-trigger="hover">
                <a class="img-box">
                    <img class="anima" src="http://www.framework-y.com/images/thumb-large.png" />
                </a>
                <div class="circle anima-rotate-20 anima">15 <span>NOV, 15</span></div>
                <div class="advs-box-content">
                    <h4 class="subtitle">The Framework Y</h4>
                    <div class="tag-row">
                        <span><i class="fa fa-calendar"></i>26.05.2015</span>
                        <span><i class="fa fa-bookmark"></i>Category</span>
                    </div>
                    <p>
                        L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt
                        ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam ...
                    </p>
                    <a class="btn btn-default btn-primary">
                        Enter
                    </a>
                    <a class="btn btn-default">
                        Read more
                    </a>
                </div>
            </div> 
        </div>
        <div class="grid-item col-md-4">
            <div class="advs-box advs-box-multiple boxed" data-anima="scale-rotate" data-trigger="hover">
                <a class="img-box">
                    <img class="anima" src="http://www.framework-y.com/images/thumb-large.png" />
                </a>
                <div class="circle anima-rotate-20 anima">03 <span>SET, 15</span></div>
                <div class="advs-box-content">
                    <h4 class="subtitle">The Framework Y</h4>
                    <div class="tag-row">
                        <span><i class="fa fa-calendar"></i>26.05.2015</span>
                        <span><i class="fa fa-bookmark"></i>Category</span>
                    </div>
                    <p>
                        L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt
                        ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam ...
                    </p>
                    <a class="btn btn-default btn-primary">
                        Enter
                    </a>
                    <a class="btn btn-default">
                        Read more
                    </a>
                </div>
            </div> 
        </div>
    </div>
</div>  
<div class="grid-list">
    <div class="grid-box row">
        <div class="grid-item col-md-4">
            <div class="advs-box niche-box-team" data-anima="scale-up" data-trigger="hover">
                <a class="img-box">
                    <img class="anima" src="http://www.framework-y.com/images/thumb-large.png" />
                </a>
                <div class="content-box">
                    <h2>JACK CHRISTIAN</h2>
                    <h4>FOUNDER AND CEO</h4>
                    <hr class="e" />
                    <div class="btn-group social-group">
                        <a target="_blank" href="#"><i class="fa fa-facebook"></i></a>
                        <a target="_blank" href="#"><i class="fa fa-twitter"></i></a>
                        <a target="_blank" href="#"><i class="fa fa-instagram"></i></a>
                    </div>
                    <p>Lorem Ipsum is simply dummy text of the printing and industry. Lorem has been the industry.</p>
                </div>
            </div> 
        </div>
        <div class="grid-item col-md-4">
            <div class="advs-box niche-box-team" data-anima="scale-up" data-trigger="hover">
                <a class="img-box">
                    <img class="anima" src="http://www.framework-y.com/images/thumb-large.png" />
                </a>
                <div class="content-box">
                    <h2>JACK CHRISTIAN</h2>
                    <h4>FOUNDER AND CEO</h4>
                    <hr class="e" />
                    <div class="btn-group social-group">
                        <a target="_blank" href="#"><i class="fa fa-facebook"></i></a>
                        <a target="_blank" href="#"><i class="fa fa-twitter"></i></a>
                        <a target="_blank" href="#"><i class="fa fa-instagram"></i></a>
                    </div>
                    <p>Lorem Ipsum is simply dummy text of the printing and industry. Lorem has been the industry.</p>
                </div>
            </div> 
        </div>
        <div class="grid-item col-md-4">
            <div class="advs-box niche-box-team" data-anima="scale-up" data-trigger="hover">
                <a class="img-box">
                    <img class="anima" src="http://www.framework-y.com/images/thumb-large.png" />
                </a>
                <div class="content-box">
                    <h2>JACK CHRISTIAN</h2>
                    <h4>FOUNDER AND CEO</h4>
                    <hr class="e" />
                    <div class="btn-group social-group">
                        <a target="_blank" href="#"><i class="fa fa-facebook"></i></a>
                        <a target="_blank" href="#"><i class="fa fa-twitter"></i></a>
                        <a target="_blank" href="#"><i class="fa fa-instagram"></i></a>
                    </div>
                    <p>Lorem Ipsum is simply dummy text of the printing and industry. Lorem has been the industry.</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