List grid | Components

Grid list general settings

Examples

Size col-md-1 row-1

Size col-md-2 row-4

Size col-md-3 row-6

Size col-md-4 row-7

Size col-md-6 row-8

Usage

<div class="grid-list gallery">
    <div class="grid-box row">
        <div class="grid-item col-md-4">
            <a class="img-box i-center" href="http://www.framework-y.com/images/thumb-large.png">
                <img src="http://www.framework-y.com/images/thumb-wide.png">
            </a>
        </div>
        <div class="grid-item col-md-4">
            <a class="img-box i-center" href="http://www.framework-y.com/images/thumb-large.png">
                <img src="http://www.framework-y.com/images/thumb-wide.png">
            </a>
        </div>
        <div class="grid-item col-md-4">
            <a class="img-box mfp-iframe i-center" href="https://www.youtube.com/watch?v=bpqhStV2_rc">
                <img src="http://www.framework-y.com/images/thumb-wide.png" />
            </a>
        </div>
        <div class="grid-item col-md-4">
            <a class="img-box i-center" href="http://www.framework-y.com/images/thumb-large.png">
                <img src="http://www.framework-y.com/images/thumb-wide.png">
            </a>
        </div>
    </div>
</div>

HTML

Main settings

Name Type Description

Items sizes

HTML

Gallery items can have differents height and width. You can create your CSS classes with your custom height and width or use the built-in classes:

You can set same height for all items by add one of the below row-n classes to grid-list object. Ex. <div class="grid-list row-15"> ... </div>

Class name	Description
`row-1`	Height: 25px;
`row-2`	Height: 50px;
`row-3`	Height: 75px;
`row-4`	Height: 100px;
`row-5`	Height: 125px;
`row-6`	Height: 150px;
`row-7`	Height: 175px;
`row-8`	Height: 200px;
`row-9`	Height: 225px;
`row-10`	Height: 250px;
`row-11`	Height: 275px;
`row-12`	Height: 300px;
`row-13`	Height: 325px;
`row-14`	Height: 350px;
`row-15`	Height: 375px;
`row-16`	Height: 400px;
`row-17`	Height: 425px;
`row-18`	Height: 450px;
`row-19`	Height: 475px;
`row-20`	Height: 500px;
`row-21`	Height: 750px;
`row-22`	Height: 1000px;

Width of items use the Bootstrap column system like col-md-4. Complete documentation here
Example:

<div class="grid-item col-md-4 row-5">
    ...
    <a class="img-box" href="image.jpg">
        <img src="image.jpg">
    </a>
    ...
</div>

Images and video gallery

Installation

To create a gallery of images and videos with lightbox include the following scripts and styles:

<script src='../../HTWF/scripts/imagesloaded.min.js'></script>
<script src='../../HTWF/scripts/jquery.magnific-popup.min.js'></script>
<link rel="stylesheet" href='../../HTWF/scripts/magnific-popup.css'>

List layout CSS class You can set two list layouts:
1) If your list is a single row list, add class one-row-list to grid list object.
Example: <div class="grid-list one-row-list"> ... </div>.
2) If your list is a columns list, add class columns-list to grid list object.
Example: <div class="grid-list columns-list"> ... </div>.

Gallery items

CSS class

Gallery items of type video must use class mfp-iframe. Gallery items of type inline, like slider, must use class mfp-inline.
Example:

<div data-sort="2" class="maso-item col-md-4 row-9 cat1">
    <a class="img-box mfp-iframe i-bottom" href="https://www.youtube.com/watch?v=bpqhStV2_rc">
        ...
    </a>
</div>

Items margins

CSS class

Add class no-margins to grid-list object to remove margins between items. Example: <div class="grid-list no-margins"> ... </div>. Use CSS style below to set custom margins:

.grid-box .grid-item {
    padding: 1px !important;
}

Deep linking URL To open the lightbox of a specified item on page load use the url www.your-site.com?lightbox=list-123. Replace 123 with item number you want to open. If you have multiple grids use the url www.your-site.com?lightbox=list-3&id=YOUR-ID. Replace YOUR-ID with the ID of the container of the grid list you want to open.

Gallery items documentation

Gallery items are image boxes, part of image box component. You can use almost all image box types. To use its insert the image box into the gallery item container grid-item. Example:

<div class="grid-box row">
    ...
    <div class="grid-item col-md-4">
        <a class="img-box i-center" href="image.jpg">
            <img src="image.jpg">
        </a>
    </div>
    ...
    <div class="clear"></div>
</div>

Complete documentation here

Albums

Examples

Album pagination

Infinite loading

Album classic

... Album list

Installation

<script src='../../HTWF/scripts/jquery.twbsPagination.min.js'></script>
<link rel="stylesheet" href='../../HTWF/css/image-box.css'>

Usage

<div class="album-main" data-album-anima="fade-right">
    <div class="album-list row">
        <div class="album-box col-md-4">
            <div class="img-box scale adv-img adv-img-half-content" data-anima="fade-left" data-trigger="hover">
                <a href="#" class="img-box anima-scale-up anima">
                    <img src="http://www.framework-y.com/images/thumb-large.png">
                </a>
                <div class="caption">
                    <h2 class="album-name">Album pagination</h2>
                </div>
            </div>
        </div>
        <div class="album-box col-md-4">
            <div class="img-box scale adv-img adv-img-half-content" data-anima="fade-left" data-trigger="hover">
                <a href="#" class="img-box anima-scale-up anima">
                    <img src="http://www.framework-y.com/images/thumb-large.png">
                </a>
                <div class="caption">
                    <h2 class="album-name">Infinite loading</h2>
                </div>
            </div>
        </div>
        <div class="album-box col-md-4" data-album-id="album-3">
            <div class="img-box scale adv-img adv-img-half-content" data-anima="fade-left" data-trigger="hover">
                <a href="#" class="img-box anima-scale-up anima">
                    <img src="http://www.framework-y.com/images/thumb-large.png">
                </a>
                <div class="caption">
                    <h2 class="album-name">Album classic</h2>
                </div>
            </div>
        </div>
        <!-- INSERT OTHERS ALBUM MENU ITEMS HERE -->
    </div>
    <div class="cont-album-box">
        <p class="album-title">
            <span>...</span> 
            <a class="button-list btn btn-sm btn-sm"><i class="fa fa-arrow-left"></i> Album list</a>
        </p>
        <div class="album-item">
            <div class="grid-list gallery">
                <div class="grid-box row">
                    <div class="grid-item col-md-4">
                        <a class="img-box i-center" href="http://www.framework-y.com/images/thumb-large.png">
                            <img src="http://www.framework-y.com/images/thumb-wide.png">
                        </a>
                    </div>
                    <div class="grid-item col-md-4">
                        <a class="img-box mfp-iframe i-center" href="https://www.youtube.com/watch?v=bpqhStV2_rc">
                            <img src="http://www.framework-y.com/images/thumb-wide.png" />
                        </a>
                    </div>
                    <div class="grid-item col-md-4">
                        <a class="img-box i-center" href="http://www.framework-y.com/images/thumb-large.png">
                            <img src="http://www.framework-y.com/images/thumb-wide.png">
                        </a>
                    </div>
                    <div class="grid-item col-md-4">
                        <a class="img-box i-center" href="http://www.framework-y.com/images/thumb-large.png">
                            <img src="http://www.framework-y.com/images/thumb-wide.png">
                        </a>
                    </div>
                </div>
                <ul class="pagination pagination-sm pagination-grid" data-page-items="3" data-pagination-anima="show-scale"></ul>
            </div>
        </div>
        <div class="album-item">
            <div class="grid-list gallery">
                <div class="grid-box row">
                    <div class="grid-item col-md-4">
                        <a class="img-box i-center" href="http://www.framework-y.com/images/thumb-large.png">
                            <img src="http://www.framework-y.com/images/thumb-wide.png">
                        </a>
                    </div>
                    <div class="grid-item col-md-4">
                        <a class="img-box mfp-iframe i-center" href="https://www.youtube.com/watch?v=bpqhStV2_rc">
                            <img src="http://www.framework-y.com/images/thumb-wide.png" />
                        </a>
                    </div>
                    <div class="grid-item col-md-4">
                        <a class="img-box i-center" href="http://www.framework-y.com/images/thumb-large.png">
                            <img src="http://www.framework-y.com/images/thumb-wide.png">
                        </a>
                    </div>
                    <div class="grid-item col-md-4">
                        <a class="img-box i-center" href="http://www.framework-y.com/images/thumb-large.png">
                            <img src="http://www.framework-y.com/images/thumb-wide.png">
                        </a>
                    </div>
                    <div class="grid-item col-md-4">
                        <a class="img-box mfp-iframe i-center" href="https://www.youtube.com/watch?v=-BrDlrytgm8">
                            <img src="http://www.framework-y.com/images/thumb-wide.png" />
                        </a>
                    </div>
                </div>
                <div class="list-nav">
                    <a href="#" class="btn btn-sm load-more-grid" data-pagination-anima="fade-bottom" data-page-items="3">
                        Load More <i class="fa fa-arrow-down"></i>
                    </a>
                </div>
            </div>
        </div>
        <div class="album-item" id="album-3">
            <div class="grid-list gallery">
                <div class="grid-box row">
                    <div class="grid-box row">
                        <div class="grid-item col-md-4">
                            <a class="img-box i-center" href="http://www.framework-y.com/images/thumb-large.png">
                                <img src="http://www.framework-y.com/images/thumb-wide.png">
                            </a>
                        </div>
                        <div class="grid-item col-md-4">
                            <a class="img-box i-center" href="http://www.framework-y.com/images/thumb-large.png">
                                <img src="http://www.framework-y.com/images/thumb-wide.png">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- INSERT OTHERS ALBUMS HERE -->
    </div>
</div>

Main settings

Name	Type	Description
HTML initialization	CSS class	Initialization detect the class `grid-list`, if this class is not present initialization not start.
Albums items	Mixed	Album items used in the example are part of image box component. Plugin dependency This feature require image box styles (`../../HTWF/css/image-box.css`) Advanced image box documentation here
Albums settings	Mixed	Albums are auto linked to albums menu by calculate item index. You can manually link album menu item to an album with attribute `data-album-id="album-id"`, you can see a example on album 3 of above code. Album name read the text of element with class `album-name`, add this class to album item name of menu.
Albums animations	HTML	You can set a animation for albums by add attribute `data-album-anima="animation-name"` to album object. Example: `<div class="album-main" data-album-anima="fade-bottom"> ... </div>`. Animations list available on animation page. Plugin dependency This feature require animations component (`../../HTWF/css/animations.css`) Animations documentation here

Pagination

Examples

Installation

<script src='../../HTWF/scripts/jquery.twbsPagination.min.js'></script>

Usage

<div class="grid-list gallery">
    <div class="grid-box row">
        <div class="grid-item col-md-4">
            <a class="img-box i-center" href="http://www.framework-y.com/images/thumb-large.png">
                <img src="http://www.framework-y.com/images/thumb-wide.png">
            </a>
        </div>
        <div class="grid-item col-md-4">
            <a class="img-box mfp-iframe i-center" href="http://www.youtube.com/watch?v=bpqhStV2_rc">
                <img src="http://www.framework-y.com/images/thumb-wide.png" />
            </a>
        </div>
        <div class="grid-item col-md-4">
            <a class="img-box i-center" href="http://www.framework-y.com/images/thumb-large.png">
                <img src="http://www.framework-y.com/images/thumb-wide.png">
            </a>
        </div>
        <div class="grid-item col-md-4">
            <a class="img-box i-center" href="http://www.framework-y.com/images/thumb-large.png">
                <img src="http://www.framework-y.com/images/thumb-wide.png">
            </a>
        </div>
        <div class="grid-item col-md-4">
            <a class="img-box i-center" href="http://www.framework-y.com/images/thumb-large.png">
                <img src="http://www.framework-y.com/images/thumb-wide.png">
            </a>
        </div>
    </div>
    <ul class="pagination-sm pagination-grid" data-page-items="3" data-pagination-anima="show-scale"></ul>
</div>

HTML

Main settings

Name	Type	Description
HTML initialization	HTML	To implement the pagination add object `<ul class="pagination-sm pagination-grid" data-page-items="6"></ul>` to the bottom of gallery container.
Items per page	HTML	You can set how many items are showed in a page with attribute `data-page-items="123"`.
HTML settings	Data attribute	Most of settings can be passed through data-options attribute `data-options="option:value,option:value, ..."`. Full options here
Scroll top	HTML	To scroll to top of list after every pagination change add option `scrollTop:true` to data-option array. Useful for long lists. Example: `data-options="scrollTop:true"`.
Pagination animations	HTML	You can set a animation for pagination by add attribute `data-pagination-anima="animation-name"` to album object. Example: `<ul class="pagination-sm pagination-grid" data-page-items="6" data-pagination-anima="fade-top"></ul>`. Animations list available on animation page. Plugin dependency This feature require animations component (`../../HTWF/css/animations.css`) Animations documentation here
Dimensions	HTML	You can set three differents pagination sizes: `pagination-sm`, `pagination`, `pagination-lg`. Example: `<ul class="pagination pagination-lg pagination-grid" data-page-items="6"></ul>`.
Centered pagination	HTML	To center the pagination insert it into a container with class `list-nav`. Example: `<div class="list-nav"><ul class="pagination-sm pagination-grid"></ul></div>`
Hide first and last buttons	CSS Class	Add class `hide-first-last` to pagination object. Example: `<ul class="hide-first-last pagination-lg pagination-grid" data-page-items="6"></ul>`.

Complete documentation and external resources

Documentation Plugin website Github page

Infinite loading

Examples

Installation

<script src='../../HTWF/scripts/jquery.twbsPagination.min.js'></script>

Usage

<div class="grid-list gallery">
    <div class="grid-box row" data-lightbox-anima="show-scale">
        <div class="grid-item col-md-4">
            <a class="img-box i-center" href="http://www.framework-y.com/images/thumb-large.png">
                <img src="http://www.framework-y.com/images/thumb-wide.png">
            </a>
        </div>
        <div class="grid-item col-md-4">
            <a class="img-box mfp-iframe i-center" href="http://www.youtube.com/watch?v=bpqhStV2_rc">
                <img src="http://www.framework-y.com/images/thumb-video-wide.png" />
            </a>
        </div>
        <div class="grid-item col-md-4">
            <a class="img-box i-center" href="http://www.framework-y.com/images/thumb-large.png">
                <img src="http://www.framework-y.com/images/thumb-wide.png">
            </a>
        </div>
        <div class="grid-item col-md-4">
            <a class="img-box i-center" href="http://www.framework-y.com/images/thumb-large.png">
                <img src="http://www.framework-y.com/images/thumb-wide.png">
            </a>
        </div>
        <div class="grid-item col-md-4">
            <a class="img-box i-center" href="http://www.framework-y.com/images/thumb-large.png">
                <img src="http://www.framework-y.com/images/thumb-wide.png">
            </a>
        </div>
    </div>
    <div class="list-nav">
        <a href="#" class="btn btn-sm load-more-grid" data-pagination-anima="fade-bottom" data-page-items="3">
            Load More
            <i class="fa fa-arrow-down"></i>
        </a>
    </div>
</div>

HTML

Main settings

Name	Type	Description
HTML initialization	CSS class	Initialization detect the class `grid-list`, if this class is not present initialization not start, you can use also manual initialization for stop initialization on page load.
Javascript initialization	Javascript	You can use the Framework Y function or Isotope function: 1 ) Framework Y function is `$('#target').initIsotope();` target must be `<div id="target" class="grid-list"></div>`. 2 ) Isotope function is `$('#target').isotope(itemSelector: '.grid-item', option:value, ...);`.
Lazy Load	Attribute	To set lazy loading, feature that auto load next items when page scroll to bottom, add attribute `data-options="lazyLoad:true"` to load-more object. Example: `<a href="#" class="btn-sm btn load-more-grid" data-page-items="8" data-options="lazyLoad:true">Load More</a>`.
Manual initialization	HTML	To stop initialization on page load add attribute `data-trigger="manual"` list obejct. Example: `<div class="grid-list" id="target" data-trigger="manual"> ... </div>`. Now you can initialize the list with Javascript initialization.

Image box list

Examples

Usage

<div class="grid-list gallery">
    <div class="grid-box row">
        <div class="grid-item col-md-4">
            <a class="img-box lightbox thumbnail" href="http://www.framework-y.com/images/thumb-large.png">
                <span><img src="http://www.framework-y.com/images/thumb-wide.png"></span>
                <span class="caption">
                    <b>Hello World</b><br />
                    Sed do eiusmod tempor incididunt ut labore
                </span>
            </a>
        </div>
        <div class="grid-item col-md-4">
            <a class="img-box lightbox thumbnail" href="http://www.framework-y.com/images/thumb-large.png">
                <span><img src="http://www.framework-y.com/images/thumb-wide.png"></span>
                <span class="caption">
                    <b>Hello World</b><br />
                    Sed do eiusmod tempor incididunt ut labore
                </span>
            </a>
        </div>
        <div class="grid-item col-md-4">
            <a class="img-box lightbox thumbnail" href="http://www.framework-y.com/images/thumb-large.png">
                <span><img src="http://www.framework-y.com/images/thumb-wide.png"></span>
                <span class="caption">
                    <b>Hello World</b><br />
                    Sed do eiusmod tempor incididunt ut labore
                </span>
            </a>
        </div>
    </div>
</div>

<div class="grid-list gallery">
    <div class="grid-box row">
        <div class="grid-item col-md-4">
            <a class="img-box lightbox circle inner thumbnail i-center img-scale-up" href="http://www.framework-y.com/images/thumb.png">
                <i class="fa fa-krw anima"></i>
                <img src="http://www.framework-y.com/images/thumb.png">
                <span class="caption">
                    <b>Hello World</b>
                    Sed do eiusmod tempor incididunt ut labore
                </span>
            </a>
        </div>
        <div class="grid-item col-md-4">
            <a class="img-box lightbox circle inner thumbnail i-center img-scale-up" href="http://www.framework-y.com/images/thumb.png">
                <i class="fa fa-sort-numeric-asc anima"></i>
                <img src="http://www.framework-y.com/images/thumb.png">
                <span class="caption">
                    <b>Hello World</b>
                    Sed do eiusmod tempor incididunt ut labore
                </span>
            </a>
        </div>
        <div class="grid-item col-md-4">
            <a class="img-box lightbox circle inner thumbnail i-center img-scale-up" data-anima="fade-left" data-trigger="hover" data-anima-out="hide" href="http://www.framework-y.com/images/thumb.png">
                <i class="fa fa-bullseye anima"></i>
                <img src="http://www.framework-y.com/images/thumb.png">
                <span class="caption">
                    <b>Hello World</b>
                    Sed do eiusmod tempor incididunt ut labore
                </span>
            </a>
        </div>
    </div>
</div>

<div class="grid-list gallery">
    <div class="grid-box row">
        <div class="grid-item col-md-4">
            <div class="img-box lightbox scale adv-img adv-img-side-content i-top-right" data-anima="fade-left" data-trigger="hover">
                <i class="im-camera-2 anima"></i>
                <a class="img-box lightbox anima-scale-up anima" href="http://www.framework-y.com/images/thumb-large.png">
                    <img src="http://www.framework-y.com/images/thumb-wide.png">
                </a>
                <div class="caption">
                    <h2>Hello World</h2>
                    <p class="sub"><i class="fa fa-calendar-o"></i> Category | 25 dec 2018</p>
                    <p>
                        Lorem ipsum dolore consectetur adipisicing elito sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                    </p>
                    <button class="btn btn-sm btn-xs" type="button">Read more ...</button>
                </div>
            </div> 
        </div>
        <div class="grid-item col-md-4">
            <div class="img-box lightbox scale adv-img adv-img-side-content i-top-right" data-anima="fade-left" data-trigger="hover">
                <i class="im-camera-2 anima"></i>
                <a class="img-box lightbox anima-scale-up anima" href="http://www.framework-y.com/images/thumb-large.png">
                    <img src="http://www.framework-y.com/images/thumb-wide.png">
                </a>
                <div class="caption">
                    <h2>Hello World</h2>
                    <p class="sub"><i class="fa fa-calendar-o"></i> Category | 25 dec 2018</p>
                    <p>
                        Lorem ipsum dolore consectetur adipisicing elito sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    </p>
                    <button class="btn btn-sm btn-xs" type="button">Read more ...</button>
                </div>
            </div> 
        </div>
        <div class="grid-item col-md-4">
            <div class="img-box lightbox scale adv-img adv-img-side-content i-top-right" data-anima="fade-left" data-trigger="hover">
                <i class="im-camera-2 anima"></i>
                <a class="img-box lightbox anima-scale-up anima" href="http://www.framework-y.com/images/thumb-large.png">
                    <img src="http://www.framework-y.com/images/thumb-wide.png">
                </a>
                <div class="caption">
                    <h2>Hello World</h2>
                    <p class="sub"><i class="fa fa-calendar-o"></i> Category | 25 dec 2018</p>
                    <p>
                        Lorem ipsum dolore consectetur adipisicing elito sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                    </p>
                    <button class="btn btn-sm btn-xs" type="button">Read more ...</button>
                </div>
            </div> 
        </div>
    </div>
</div>

Image box documentation

Image box are part of image box component documentation. You can use almost all image box types.
Complete documentation here

Content box list

Examples

Content box title

Interdum iusto pulvinar consequuntur augue optio, repellat fuga! Purus expedita fusce.

Content box title

Interdum iusto pulvinar consequuntur augue optio, repellat fuga! Purus expedita fusce.

Content box title

Interdum iusto pulvinar consequuntur augue optio, repellat fuga! Purus expedita fusce.

Alan Arrasange

Founder

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

Cristian Pitt

Marketing

Lorem Ipsum is simply dummy text of the printing and industry

Will Abram

Design

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

Usage

<div class="grid-list">
    <div class="grid-box row">
        <div class="grid-item col-md-4">
            <div class="advs-box advs-box-top-icon boxed-inverse" data-anima="rotate-20" data-trigger="hover">
                <i class="fa fa-home icon circle anima"></i>
                <h3>Content box title</h3>
                <p>
                    Interdum iusto pulvinar consequuntur augue optio.
                </p>
            </div>
        </div>
        <div class="grid-item col-md-4">
            <div class="advs-box advs-box-top-icon boxed-inverse" data-anima="rotate-20" data-trigger="hover">
                <i class="fa fa-home icon circle anima"></i>
                <h3>Content box title</h3>
                <p>
                    Interdum iusto pulvinar consequuntur augue optio.
                </p>
            </div>
        </div>
        <div class="grid-item col-md-4">
            <div class="advs-box advs-box-top-icon boxed-inverse" data-anima="rotate-20" data-trigger="hover">
                <i class="fa fa-home icon circle anima"></i>
                <h3>Content box title</h3>
                <p>
                    Interdum iusto pulvinar consequuntur augue optio.
                </p>
            </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>

Content box documentation

Content box are part of content box component documentation. You can use almost all content box types.
Complete documentation here

Main components

Components

Components

Titles

Headers

Footer

Containers

Sections

Page templates

Grid list

Grid list general settings

Examples

Size col-md-1 row-1

Size col-md-2 row-4

Size col-md-3 row-6

Size col-md-4 row-7

Size col-md-6 row-8

Usage

Main settings

Gallery items documentation

Albums

Examples

Album pagination

Infinite loading

Album classic

Installation

Usage

Main settings

Plugin dependency

Plugin dependency

Pagination

Examples

Installation

Usage

Main settings

Plugin dependency

Complete documentation and external resources

Infinite loading

Examples

Installation

Usage

Main settings

Image box list

Examples

Hello World

Hello World

Hello World

Usage

Image box documentation

Content box list

Examples

Content box title

Content box title

Content box title

Alan Arrasange

Founder

Cristian Pitt

Marketing

Will Abram

Design

Usage

Content box documentation