File: /var/www/tana/frontend/styleguide/item-pages-services-service-box.html
<!DOCTYPE html>
<html>
<head>
<title>Tana Styleguide</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="mobile-web-app-capable" content="yes">
<meta name="generator" content="kss-node">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700,300">
<link rel="stylesheet" href="kss-assets/vendor/prism.css">
<link rel="stylesheet" href="kss-assets/css/kss.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300,400|Montserrat:400,500,600,700&subset=latin-ext">
<link rel="stylesheet" href="./../build/assets/style/style.css">
<link rel="stylesheet" href="./../styleguide.css">
</head>
<body class="kss-body">
<!-- header. -->
<header class="kss-header">
<section class="kss-header__inner">
<a class="kss-header__hamburger-trigger">
<div class="kss-header__hamburger"></div>
</a>
<h1 class="kss-header__title kss-title">Tana Styleguide</h1>
</section>
</header>
<!-- /header. -->
<!-- navigation. -->
<section class="kss-navigation">
<h1 class="kss-navigation__title kss-title">Tana Styleguide</h1>
<ul class="kss-nav">
<li class="kss-nav__item">
<a href="index.html">
<span class="kss-nav__ref">0</span>
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__item">
<a class="" href="section-base.html">
<span class="kss-nav__ref">1</span>
<span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__item">
<a class="" href="section-components.html">
<span class="kss-nav__ref">2</span>
<span class="kss-nav__name">Components</span>
</a>
</li>
<li class="kss-nav__item">
<a class="" href="section-pages.html">
<span class="kss-nav__ref">3</span>
<span class="kss-nav__name">Pages</span>
</a>
</li>
<li class="kss-nav__item">
<a class="" href="section-themes.html">
<span class="kss-nav__ref">4</span>
<span class="kss-nav__name">Themes</span>
</a>
</li>
</ul>
</section>
<!-- /navigation. -->
<!-- documentation. -->
<section class="kss-documentation">
<!--
display each section, in order.
the "root" element comes first in this loop, and can be detected using
the "#if @first" block as seen below.
-->
<header class="kss-section kss-section--depth-3" id="kssref-pages-services-service-box">
<article class="kss-section__content">
<p class="kss-section__source">Source: <span>pages/_services.scss</span>, line <span>153</span></p>
<a class="kss-section__permalink" href="#kssref-pages-services-service-box">
<h3 class="kss-section__item kss-section__item--depth-3">
<span class="kss-section__ref">3.1.1</span>
<span class="kss-section__name">Service Boxes</span>
</h3>
</a>
<div class="kss-section__description"><p>Boxes used to describe services. Each box will take available width. This example has five of them in a row because of the design.</p>
</div>
</article>
<article class="kss-section__modifiers">
<h1 class="kss-modifiers__heading">Example</h1>
<div class="kss-modifiers__example"><div class="services">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-1-5">
<div class="service">
<h3 class="service__title">Patents</h3>
<p class="service__text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.</p>
</div>
</div>
<div class="col-xs-12 col-sm-1-5">
<div class="service">
<h3 class="service__title">Trade marks</h3>
<p class="service__text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.</p>
</div>
</div>
<div class="col-xs-12 col-sm-1-5">
<div class="service">
<h3 class="service__title">Designs</h3>
<p class="service__text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.</p>
</div>
</div>
<div class="col-xs-12 col-sm-1-5">
<div class="service">
<h3 class="service__title">Copyright</h3>
<p class="service__text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.</p>
</div>
</div>
<div class="col-xs-12 col-sm-1-5">
<div class="service">
<h3 class="service__title">Litigation</h3>
<p class="service__text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.</p>
</div>
</div>
</div>
</div>
</div></div>
</article>
<article class="kss-section__markup">
<pre><code class="language-markup"><div class="services">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-1-5">
<div class="service">
<h3 class="service__title">Patents</h3>
<p class="service__text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.</p>
</div>
</div>
<div class="col-xs-12 col-sm-1-5">
<div class="service">
<h3 class="service__title">Trade marks</h3>
<p class="service__text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.</p>
</div>
</div>
<div class="col-xs-12 col-sm-1-5">
<div class="service">
<h3 class="service__title">Designs</h3>
<p class="service__text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.</p>
</div>
</div>
<div class="col-xs-12 col-sm-1-5">
<div class="service">
<h3 class="service__title">Copyright</h3>
<p class="service__text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.</p>
</div>
</div>
<div class="col-xs-12 col-sm-1-5">
<div class="service">
<h3 class="service__title">Litigation</h3>
<p class="service__text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.</p>
</div>
</div>
</div>
</div>
</div></code></pre>
</article>
</header>
</section>
<!-- /documentation. -->
<!-- scripts. -->
<script src="kss-assets/vendor/jquery.js"></script>
<script src="kss-assets/vendor/prism.js"></script>
<script src="kss-assets/js/kss.js"></script>
<script src="./../build/assets/scripts/vendor.min.js"></script>
<script src="./../build/assets/scripts/app.min.js"></script>
<!-- /scripts. -->
</body>
</html>