Containers documentation
<script src='../../HTWF/scripts/isotope.min.js'></script> <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'>
<div class="maso-list gallery">
<div class="navbar navbar-inner">
<div class="navbar-toggle"><i class="fa fa-bars"></i><span>Menu</span><i class="fa fa-angle-down"></i></div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav over ms-minimal inner maso-filters">
<li class="current-active active"><a data-filter="maso-item">All</a></li>
<li><a data-filter="cat1">Cities</a></li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Nature <i class="caret"></i></a>
<ul class="dropdown-menu multi-level">
<li><a data-filter="subcat1">Mountain </a></li>
</ul>
</li>
<li><a data-filter="cat3" href="#">People</a></li>
<li><a class="maso-order" data-sort="asc"><i class="fa fa-arrow-down"></i></a></li>
</ul>
</div>
</div>
<div class="maso-box row">
<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">
<i class="fa fa-film"></i>
<img src="http://www.framework-y.com/images/thumb-video.png" />
</a>
</div>
<div data-sort="3" class="maso-item col-md-4 row-9 cat1">
<a class="img-box i-bottom" href="http://www.framework-y.com/images/thumb-large.png">
<i class="fa fa-camera"></i>
<img src="http://www.framework-y.com/images/thumb.png">
</a>
</div>
<!-- INSERT OTHERS GALLERY ITEMS HERE -->
<div class="clear"></div>
</div>
</div>
<div class="maso-list gallery">
<div class="maso-box row">
<div class="maso-item col-md-4 row-9">
<a class="img-box mfp-iframe i-bottom" href="https://www.youtube.com/watch?v=bpqhStV2_rc">
<i class="fa fa-film"></i>
<img src="http://www.framework-y.com/images/thumb-video.png" />
</a>
</div>
<div class="maso-item col-md-4 row-9">
<a class="img-box i-bottom" href="http://www.framework-y.com/images/thumb-large.png">
<i class="fa fa-camera"></i>
<img src="http://www.framework-y.com/images/thumb.png">
</a>
</div>
<div class="clear"></div>
</div>
</div>
| Name | Type | Description | ||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| HTML initialization | CSS class |
Initialization detect the class maso-list, if this class is not present initialization not start.
|
||||||||||||||||||||||||||||||||||||||||||||||
| 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="maso-list gallery"></div>.2 ) Isotope function is $('#target').isotope(itemSelector: '.maso-item', option:value, ...);.
|
||||||||||||||||||||||||||||||||||||||||||||||
| Manual initialization | HTML |
To stop initialization on page load add attribute data-trigger="manual" to gallery object.
Example: <div class="maso-list gallery" id="target" data-trigger="manual"> ... </div>.
Now you can initialize the gallery with Javascript initialization.
|
||||||||||||||||||||||||||||||||||||||||||||||
| HTML settings | Data attribute |
Most of settings can be passed through data-options attribute data-options="option:value,option:value, ...".
Full options here |
||||||||||||||||||||||||||||||||||||||||||||||
| Categories | HTML |
Categorization of gallery items is based on two steps: 1 ) Set the category name on categories menu with attribute data-filter="your-category-name".
Example:
<ul class="nav navbar-nav over ms-minimal inner maso-filters">
...
<li><a data-filter="your-category-name">Your category name</a></li>
...
</ul>
2 ) Set the category name on each item by add a class with same name of category class="your-category-name".
Example:
<div class="maso-box row">
...
<div class="maso-item your-category-name">
...
</div>
...
<div class="clear"></div>
</div>
To show all items you can use the attribute data-filter=".maso-item".
You can filter multiple categories by split its with a comma. Example: data-filter=".your-category-name,.your-category-name-2".
You can filter the cateogory directly with Javascript function $('#target').isotope({ filter: ".your-category-name" });,
target must be the <div class="maso-box" id="target"> ... </div> object.
|
||||||||||||||||||||||||||||||||||||||||||||||
| Sorting | HTML |
Add attribute data-sort="123" to each gallery item, replace 123 with correct number based on sorting position you want, 0 is first position.
Sorting is asc or desc. Example: <div data-sort="4" class="maso-item"> ... </div>.
You can sort directly with Javascript function $('#target').isotope({ sortAscending: true }); or sortAscending false,
target must be the <div class="maso-box" id="target" data-trigger="manual"> ... </div> object.
|
||||||||||||||||||||||||||||||||||||||||||||||
| Items height and width | HTML |
Gallery items can have differents height and width.
The fastest method to set a masonry style wall is by add class maso-layout to maso-list object.
Example: <div class="maso-list maso-layout"> ... </div>.
You can set same height for all items by add one of the below row-n classes to maso-list object. Ex. <div class="maso-list row-15"> ... </div>
You can also assign a height to every item by create your CSS classes with your custom height and width or by use the built-in classes:
col-md-4. Complete documentation here
Example:
<div class="maso-box row">
...
<div class="maso-item col-md-4 row-9">
...
</div>
...
<div class="clear"></div>
</div>
|
||||||||||||||||||||||||||||||||||||||||||||||
| 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 maso list object.
Example: <div class="maso-list one-row-list"> ... </div>.2) If your list is a columns list, add class columns-list to maso list object.
Example: <div class="maso-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 maso-list object to remvoe margins between items.
Example: <div class="maso-list no-margins"> ... </div>. Use CSS style below to set custom margins:
.maso-box .maso-item {
padding: 1px !important;
}
|
||||||||||||||||||||||||||||||||||||||||||||||
| Custom content | CSS class |
If you need to show custom items contents add class maso-custom to maso-list object.
Example: <div class="maso-list maso-custom"> ... </div>.
|
||||||||||||||||||||||||||||||||||||||||||||||
| 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 are image boxes, part of image box documentation. You can use almost all image box types.
To use its insert the image box into the gallery item container maso-item. Example:
<div class="maso-box row">
...
<div class="maso-item col-md-4 row-9">
<a class="img-box i-bottom" href="image.jpg">
<i class="fa fa-camera"></i>
<img src="image.jpg">
</a>
</div>
...
<div class="clear"></div>
</div>
Complete documentation here
Categories menu is part of menu inner component. Complete documentation here
<script src='../../HTWF/scripts/jquery.twbsPagination.min.js'></script> <link rel="stylesheet" href='../../HTWF/css/image-box.css'>
<div class="album-main" data-album-anima="fade-bottom">
<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 one</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">Album two</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 three</h2>
</div>
</div>
</div>
<!-- INSERT OTHERS ALBUMS 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="maso-list gallery" data-trigger="manual">
<div class="navbar navbar-inner">
<div class="navbar-toggle"><i class="fa fa-bars"></i><span>Menu</span><i class="fa fa-angle-down"></i></div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav over ms-minimal inner maso-filters">
<li class="current-active active"><a data-filter="maso-item">All</a></li>
<li><a data-filter="cat1">Cities</a></li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Nature <i class="caret"></i></a>
<ul class="dropdown-menu multi-level">
<li><a data-filter="subcat1">Mountain </a></li>
<li><a data-filter="subcat2">Beach and sea </a></li>
<li><a data-filter="subcat3">Desert </a></li>
</ul>
</li>
<li><a data-filter="cat3" href="#">People</a></li>
<li><a class="maso-order" data-sort="asc"><i class="fa fa-arrow-down"></i></a></li>
</ul>
</div>
</div>
<div class="maso-box row">
<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">
<i class="fa fa-film"></i>
<img src="http://www.framework-y.com/images/thumb-video.png" />
</a>
</div>
<div data-sort="3" class="maso-item col-md-4 row-9 cat1">
<a class="img-box i-bottom" href="http://www.framework-y.com/images/thumb-large.png">
<i class="fa fa-camera"></i>
<img src="http://www.framework-y.com/images/thumb.png">
</a>
</div>
</div>
</div>
</div>
<div class="album-item">
<div class="maso-list gallery" data-trigger="manual">
<ul class="nav navbar-nav over ms-minimal inner maso-filters">
<li class="current-active active"><a data-filter="maso-item">All</a></li>
<li><a data-filter="cat1">Category 1</a></li>
<li><a data-filter="cat3" href="#">Category 2</a></li>
<li><a class="maso-order" data-sort="asc"><i class="fa fa-arrow-down"></i></a></li>
</ul>
<div class="maso-box row">
<div data-sort="3" class="maso-item col-md-4 row-9 cat1">
<a class="img-box i-bottom" href="http://www.framework-y.com/images/thumb-large.png">
<i class="fa fa-camera"></i>
<img src="http://www.framework-y.com/images/thumb.png">
</a>
</div>
<div data-sort="5" class="maso-item col-md-4 row-8 cat2">
<a class="img-box i-bottom" href="http://www.framework-y.com/images/thumb-large.png">
<i class="fa fa-camera"></i>
<img src="http://www.framework-y.com/images/thumb.png" />
</a>
</div>
<div data-sort="6" class="maso-item col-md-4 row-10 cat1">
<a class="img-box i-bottom" href="http://www.framework-y.com/images/thumb-large.png">
<i class="fa fa-camera"></i>
<img src="http://www.framework-y.com/images/thumb.png" />
</a>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="album-item" id="album-3">
<div class="maso-list gallery" data-trigger="manual">
<div class="maso-box row">
<div data-sort="3" class="maso-item col-md-4 row-9 cat1">
<a class="img-box i-bottom" href="http://www.framework-y.com/images/thumb-large.png">
<i class="fa fa-camera"></i>
<img src="http://www.framework-y.com/images/thumb.png">
</a>
</div>
<div data-sort="5" class="maso-item col-md-4 row-10 cat2">
<a class="img-box i-bottom" href="http://www.framework-y.com/images/thumb-large.png">
<i class="fa fa-camera"></i>
<img src="http://www.framework-y.com/images/thumb.png" />
</a>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<!-- INSERT OTHERS ALBUMS HERE -->
</div>
</div>
| Name | Type | Description |
|---|---|---|
| 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 items | Mixed |
Album items used in the example are part of image box component.
Plugin dependencyThis feature require image box styles ( |
| 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 dependencyThis feature require animations component ( |
<script src='../../HTWF/scripts/jquery.twbsPagination.min.js'></script>
<div class="maso-list gallery">
<div class="navbar navbar-inner">
<div class="navbar-toggle"><i class="fa fa-bars"></i><span>Menu</span><i class="fa fa-angle-down"></i></div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav over ms-minimal inner maso-filters">
<li class="current-active active"><a data-filter="maso-item">All</a></li>
<li><a data-filter="cat1">Cities</a></li>
<li><a data-filter="cat3" href="#">People</a></li>
<li><a class="maso-order" data-sort="asc"><i class="fa fa-arrow-down"></i></a></li>
</ul>
</div>
</div>
<div class="maso-box row" data-options="anima:fade-in">
<div data-sort="2" class="maso-item col-md-4 cat1">
<a class="img-box" href="http://www.framework-y.com/images/thumb-large.png">
<i class="fa fa-camera"></i>
<img src="http://www.framework-y.com/images/thumb-wide.png">
</a>
</div>
<div data-sort="3" class="maso-item col-md-4 cat2">
<a class="img-box" href="http://www.framework-y.com/images/thumb-large.png">
<i class="fa fa-camera"></i>
<img src="http://www.framework-y.com/images/thumb-wide.png">
</a>
</div>
<div data-sort="4" class="maso-item col-md-4 cat3">
<a class="img-box" href="http://www.framework-y.com/images/thumb-large.png">
<i class="fa fa-camera"></i>
<img src="http://www.framework-y.com/images/thumb-wide.png">
</a>
</div>
<div data-sort="6" class="maso-item col-md-4 cat2">
<a class="img-box" href="http://www.framework-y.com/images/thumb-large.png">
<i class="fa fa-camera"></i>
<img src="http://www.framework-y.com/images/thumb-wide.png">
</a>
</div>
<div class="clear"></div>
</div>
<ul class="pagination pagination-sm pagination-maso" data-page-items="6"></ul>
</div>
| Name | Type | Description |
|---|---|---|
| HTML initialization | HTML |
To implement the pagination add object <ul class="pagination-sm pagination-maso" 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".
|
| Dimensions | HTML |
You can set three differents pagination sizes: pagination-sm, pagination, pagination-lg.
Example: <ul class="pagination pagination-lg pagination-maso" data-page-items="6"></ul>.
|
<script src="../../HTWF/scripts/jquery.twbsPagination.min.js"></script>
<div class="maso-list gallery">
<div class="maso-box row" data-options="anima:fade-in">
<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">
<i class="fa fa-film"></i>
<img src="http://www.framework-y.com/images/thumb-video.png" />
</a>
</div>
<div data-sort="3" class="maso-item col-md-4 row-6 cat1">
<a class="img-box i-bottom" href="http://www.framework-y.com/images/thumb-large.png">
<i class="fa fa-camera"></i>
<img src="http://www.framework-y.com/images/thumb.png">
</a>
</div>
<div data-sort="4" class="maso-item col-md-4 row-9 cat1">
<a class="img-box mfp-iframe i-bottom" href="https://vimeo.com/162564288">
<i class="fa fa-film"></i>
<img src="http://www.framework-y.com/images/thumb-video-wide.png" />
</a>
</div>
<div data-sort="5" class="maso-item col-md-4 row-4 cat2">
<a class="img-box i-bottom" href="http://www.framework-y.com/images/thumb-large.png">
<i class="fa fa-camera"></i>
<img src="http://www.framework-y.com/images/thumb.png" />
</a>
</div>
<div class="clear"></div>
</div>
<div class="list-nav">
<a href="#" class="btn-sm btn load-more-maso" data-page-items="4">Load More <i class="fa fa-arrow-down"></i></a>
</div>
</div>
| Name | Type | Description |
|---|---|---|
| HTML initialization | HTML |
To implement the pagination add object <ul class="load-more-maso" data-page-items="6"></ul> to the bottom of gallery container.
|
| Items per page | HTML |
You can set how many items are showed in at same time with attribute data-page-items="123".
|
| 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-maso" data-page-items="8" data-options="lazyLoad:true">Load More</a>.
|
Lorem ipsum dolore consectetur adipisicing elito sed do eiusmod tempor incididunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur porro quisquam esto qui dolorem ipsum quia dolore.
Lorem ipsum dolore consectetur adipisicing elito sed do eiusmod tempor incididunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur porro quisquam esto qui dolorem ipsum quia dolore.
Lorem ipsum dolore consectetur adipisicing elito sed do eiusmod tempor incididunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur porro quisquam esto qui dolorem ipsum quia dolore.
<div class="maso-list gallery">
<div class="maso-box row">
<div data-sort="2" class="maso-item col-md-4 row-9 cat1">
<a class="img-box lightbox thumbnail inner img-scale-up" 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-box">
<span class="caption">
<b>Sudnar City</b><br />
Sed do eiusmod tempor incididunt
</span>
</span>
</a>
</div>
<div data-sort="3" class="maso-item col-md-4 row-9 cat1">
<a class="img-box lightbox thumbnail inner img-scale-up" 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-box">
<span class="caption">
<b>African snake</b><br />
Sed do eiusmod tempor incididunt
</span>
</span>
</a>
</div>
<div data-sort="4" class="maso-item col-md-4 row-9 cat1">
<a class="img-box lightbox thumbnail inner img-scale-up" 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-box">
<span class="caption">
<b>Young woman</b><br />
Sed do eiusmod tempor incididunt
</span>
</span>
</a>
</div>
<div class="clear"></div>
</div>
</div>
<div class="maso-list gallery" id="demo-masonry" data-trigger="manual">
<div class="maso-box row">
<div data-sort="2" class="maso-item col-md-4 cat1">
<a class="img-box lightbox circle inner thumbnail img-scale-up" href="http://www.framework-y.com/images/thumb-large.png">
<img src="http://www.framework-y.com/images/thumb-wide.png">
<span class="caption">
<b>Image box title</b>
Sed do eiusmod tempor incididunt ut labore
</span>
</a>
</div>
<div data-sort="3" class="maso-item col-md-4 cat1">
<a class="img-box lightbox circle inner thumbnail img-scale-up" href="http://www.framework-y.com/images/thumb-large.png">
<img src="http://www.framework-y.com/images/thumb-wide.png">
<span class="caption">
<b>Image box title</b>
Sed do eiusmod tempor incididunt ut labore
</span>
</a>
</div>
<div data-sort="4" class="maso-item col-md-4 cat1">
<a class="img-box lightbox circle inner thumbnail img-scale-up" href="http://www.framework-y.com/images/thumb-large.png">
<img src="http://www.framework-y.com/images/thumb-wide.png">
<span class="caption">
<b>Image box title</b>
Sed do eiusmod tempor incididunt ut labore
</span>
</a>
</div>
<div class="clear"></div>
</div>
</div>
<div class="maso-list gallery" id="demo-masonry-2" data-trigger="manual">
<div class="maso-box row">
<div data-sort="2" class="maso-item col-md-4 cat1">
<div class="img-box scale adv-img adv-img-half-content" data-anima="fade-left" data-trigger="hover">
<i class="im-camera-2 anima"></i>
<a class="img-box lightbox anima-scale-up anima">
<img src="http://www.framework-y.com/images/thumb-wide.png">
</a>
<div class="caption">
<h2>Image box title</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.
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur porro quisquam esto qui dolorem ipsum quia dolore.
</p>
</div>
</div>
</div>
<div data-sort="3" class="maso-item col-md-4 cat1">
<div class="img-box scale adv-img adv-img-half-content" data-anima="fade-left" data-trigger="hover">
<i class="im-camera-2 anima"></i>
<a class="img-box lightbox anima-scale-up anima">
<img src="http://www.framework-y.com/images/thumb-wide.png">
</a>
<div class="caption">
<h2>Image box title</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.
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur porro quisquam esto qui dolorem ipsum quia dolore.
</p>
</div>
</div>
</div>
<div data-sort="4" class="maso-item col-md-4 cat1">
<div class="img-box scale adv-img adv-img-half-content" data-anima="fade-left" data-trigger="hover">
<i class="im-camera-2 anima"></i>
<a class="img-box lightbox anima-scale-up anima">
<img src="http://www.framework-y.com/images/thumb-wide.png">
</a>
<div class="caption">
<h2>Image box title</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.
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur porro quisquam esto qui dolorem ipsum quia dolore.
</p>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
Image box are part of image box documentation. You can use almost all image box types.
Complete documentation here
Lorem Ipsum is simply dummy text of the printing and industry.
Lorem Ipsum is simply dummy text of the printing and industry.
Lorem Ipsum is simply dummy text of the printing and industry.
<div class="maso-list">
<div class="maso-box row">
<div class="maso-item col-md-4">
<div class="advs-box advs-box-top-icon boxed-inverse" data-anima="rotate-20" data-trigger="hover">
<i class="im-home icon circle anima"></i>
<h3>Content box title</h3>
<p>
Interdum iusto pulvinar consequuntur augue optio, repellat fuga! Purus expedita.
</p>
</div>
</div>
<div class="maso-item col-md-4">
<div class="advs-box advs-box-top-icon boxed-inverse" data-anima="rotate-20" data-trigger="hover">
<i class="im-home icon circle anima"></i>
<h3>Content box title</h3>
<p>
Interdum iusto pulvinar consequuntur augue optio, repellat fuga! Purus expedita.
</p>
</div>
</div>
<div class="maso-item col-md-4">
<div class="advs-box advs-box-top-icon boxed-inverse" data-anima="rotate-20" data-trigger="hover">
<i class="im-home icon circle anima"></i>
<h3>Content box title</h3>
<p>
Interdum iusto pulvinar consequuntur augue optio, repellat fuga! Purus expedita.
</p>
</div>
</div>
</div>
</div>
<div class="maso-list">
<div class="maso-box row">
<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.png" />
</a>
<div class="content-box">
<h2>Cristian Pitt</h2>
<h4>Marketing</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.</p>
</div>
</div>
</div>
<div class="maso-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.png" />
</a>
<div class="content-box">
<h2>Cristian Pitt</h2>
<h4>Marketing</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.</p>
</div>
</div>
</div>
<div class="maso-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.png" />
</a>
<div class="content-box">
<h2>Cristian Pitt</h2>
<h4>Marketing</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.</p>
</div>
</div>
</div>
</div>
</div>
Content box are part of content box documentation. You can use almost all content box types.
Complete documentation here
<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/large/image-5.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>