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
Lorem Ipsum
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
Lorem Ipsum
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>Banner Slider
Example Usage
<div class="slick">
<div class="item">
<img class="mobile-hide" src="/media/wysiwyg/homepage/hero_2.jpg" alt="" />
<img class="mobile-show" src="/media/wysiwyg/homepage/mobile_slide.jpg" alt="" />
<div class="banner-inner-content">
<div class="h1">New products available now</div>
<p> Magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem commodi consequatur.</p>
<a href="#" class="button button-orange">Shop now</a>
</div>
</div>
<div class="item">
<img class="mobile-hide" src="/media/wysiwyg/homepage/hero.jpg" alt="" />
<img class="mobile-show" src="/media/wysiwyg/homepage/mobile_slide.jpg" alt="" />
<div class="banner-inner-content">
<div class="h1">New products available now</div>
<p> Magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem commodi consequatur.</p>
<a href="#" class="button button-orange">Shop now</a>
</div>
</div>
<div class="item">
<img class="mobile-hide" src="/media/wysiwyg/homepage/hero_2.jpg" alt="" />
<img class="mobile-show" src="/media/wysiwyg/homepage/mobile_slide.jpg" alt="" />
<div class="banner-inner-content">
<div class="h1">New products available now</div>
<p> Magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem commodi consequatur.</p>
<a href="#" class="button button-orange">Shop now</a>
</div>
</div>
</div>
<script>
require(
[
'jquery',
'slick'
],
function($, slick) {
$('.slick').slick({
dots: true,
arrows: false,
infinite: true,
speed: 300,
autoplay: false,
slidesToShow: 1,
slidesToScroll: 1
});
}
);
</script>Category Landing Grid
Lorem Ipsum
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
STRIPPED LOWERS STRIPPED LOWERS
At vero eos et accusamus iustop odio dignissimos ducimus quies blanditiis praes voluptatum unise deleniti atque kicimos.
Shop now
ASSEMBLED UPPERS ASSEMBLED UPPERS
At vero eos et accusamus iustop odio dignissimos ducimus quies blanditiis praes voluptatum unise deleniti atque kicimos.
Shop now
COMPLETE UPPERS COMPLETE UPPERS
At vero eos et accusamus iustop odio dignissimos ducimus quies blanditiis praes voluptatum unise deleniti atque kicimos.
Shop now
AR15 RECEIVER SETS AR15 RECEIVER SETS
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>Category Small Banner
Example Usage
<div class="category-landing__content">
<div class="category-landing__small-banner">
<img class="mobile-hide" src="/media/wysiwyg/category/clp_small_banner.jpg" alt="">
<img class="mobile-show" src="/media/wysiwyg/category/clp_small_banner_mobile.jpg" alt="">
<a href="#" class="button button-orange">Shop now</a>
</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>