Web Style Guide
Categories Grid
Example Usage
<ul class="categories-links">
<li>
<a class="categories-link" href="#">
<div class="img-container">
<img src="/media/wysiwyg/homepage/category_1.jpg" alt="">
</div>
<div class="category-name">Category</div>
</a>
</li>
<li>
<a class="categories-link" href="#">
<div class="img-container">
<img src="/media/wysiwyg/homepage/category_1.jpg" alt="">
</div>
<div class="category-name">Category</div>
</a>
</li>
<li>
<a class="categories-link" href="#">
<div class="img-container">
<img src="/media/wysiwyg/homepage/category_1.jpg" alt="">
</div>
<div class="category-name">Category</div>
</a>
</li>
</ul>
Featured Content Triangle Left

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
Learn MoreExample Usage
<div class="row first-media-row">
<div class="col-sm-6 media-container triangle-before">
<img src="/media/wysiwyg/homepage/category_1.jpg" alt="">
</div>
<div class="col-sm-6 text-container">
<div class="text-container__header">Lorem Ipsum</div>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati</p>
<a href="#" class="button">Learn More</a>
</div>
</div>
Featured Video Container
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
Learn MoreExample Usage
<div class="row second-media-row">
<div class="col-sm-6 text-container">
<div class="text-container__header">Lorem Ipsum</div>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati</p>
<a href="#" class="button">Learn More</a>
</div>
<div class="col-sm-6 media-container">
<iframe src="https://www.full30.com/embed/989bd956a696dea5570780a2babbc92b" frameborder="0" scrolling="no" seamless="seamless" allowfullscreen></iframe>
</div>
</div>
Category Landing Grid

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
Learn more
At vero eos et accusamus iustop odio dignissimos ducimus quies blanditiis praes voluptatum unise deleniti atque kicimos.
Shop now
At vero eos et accusamus iustop odio dignissimos ducimus quies blanditiis praes voluptatum unise deleniti atque kicimos.
Shop now
At vero eos et accusamus iustop odio dignissimos ducimus quies blanditiis praes voluptatum unise deleniti atque kicimos.
Shop now
At vero eos et accusamus iustop odio dignissimos ducimus quies blanditiis praes voluptatum unise deleniti atque kicimos.
Shop nowExample Usage
<div class="category-landing__categories">
<div class="col-sm-6">
<div class="category-landing__categories-link">
<img src="/media/wysiwyg/category/magpul.jpg" alt="">
<div class="category-landing__hover-block">
<div class="category-landing__hover-block__wrapper"</div>
<div class="category-landing__hover-heading">Lorem Ipsum</div>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati</p>
<a href="#" class="button">Learn more</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="category-landing__categories-link">
<img src="/media/wysiwyg/category/stripped_lowers.jpg" alt="">
<span>STRIPPED LOWERS</span>
<div class="category-landing__hover-block svg-border">
<div class="category-landing__hover-block__wrapper"</div>
<div class="category-landing__hover-heading">STRIPPED LOWERS</div>
<p>At vero eos et accusamus iustop odio dignissimos ducimus quies blanditiis praes voluptatum unise deleniti atque kicimos.</p>
<a href="#">Shop now</a>
</div>
</div>
</div>
<div class="category-landing__categories-link">
<img src="/media/wysiwyg/category/assembled_uppers.jpg" alt="">
<span>ASSEMBLED UPPERS</span>
<div class="category-landing__hover-block svg-border">
<div class="category-landing__hover-block__wrapper"</div>
<div class="category-landing__hover-heading">ASSEMBLED UPPERS</div>
<p>At vero eos et accusamus iustop odio dignissimos ducimus quies blanditiis praes voluptatum unise deleniti atque kicimos.</p>
<a href="#">Shop now</a>
</div>
</div>
</div>
<div class="category-landing__categories-link">
<img src="/media/wysiwyg/category/complete_uppers.jpg" alt="">
<span>COMPLETE UPPERS</span>
<div class="category-landing__hover-block svg-border">
<div class="category-landing__hover-block__wrapper"</div>
<div class="category-landing__hover-heading">COMPLETE UPPERS</div>
<p>At vero eos et accusamus iustop odio dignissimos ducimus quies blanditiis praes voluptatum unise deleniti atque kicimos.</p>
<a href="#">Shop now</a>
</div>
</div>
</div>
<div class="category-landing__categories-link">
<img src="/media/wysiwyg/category/ar15_receiver.jpg" alt="">
<span>AR15 RECEIVER SETS</span>
<div class="category-landing__hover-block svg-border">
<div class="category-landing__hover-block__wrapper"</div>
<div class="category-landing__hover-heading">AR15 RECEIVER SETS</div>
<p>At vero eos et accusamus iustop odio dignissimos ducimus quies blanditiis praes voluptatum unise deleniti atque kicimos.</p>
<a href="#">Shop now</a>
</div>
</div>
</div>
</div>
</div>
Columns Content Grid

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Example Usage
<div class="media-row">
<div class="col-sm-6"><img src="/media/wysiwyg/blog/post_content_1.jpg" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col-sm-6"><img src="/media/wysiwyg/blog/post_content_2.jpg" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col-sm-6"><img src="/media/wysiwyg/blog/post_content_3.jpg" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col-sm-6"><img src="/media/wysiwyg/blog/post_content_4.jpg" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
Two Columns Content Grid

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Example Usage
<div class="media-row">
<div class="col-sm-6"><img src="/media/wysiwyg/blog/post_content_1.jpg" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col-sm-6"><img src="/media/wysiwyg/blog/post_content_2.jpg" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col-sm-6"><img src="/media/wysiwyg/blog/post_content_3.jpg" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col-sm-6"><img src="/media/wysiwyg/blog/post_content_4.jpg" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>