File: //proc/1526/task/290391/cwd/tana/frontend/styleguide/section-pages.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="kss-state-active" href="section-pages.html">
              <span class="kss-nav__ref">3</span>
              <span class="kss-nav__name">Pages</span>
            </a>
                <ul class="kss-nav__subnav">
                    <li class="kss-nav__item ">
                      <a href="section-pages.html#kssref-pages-services">
                        <span class="kss-nav__ref">3.1</span>
                        <span class="kss-nav__name">Pages.services</span>
                      </a>
                    </li>
                    <li class="kss-nav__item kss-nav__item--grandchild">
                      <a href="section-pages.html#kssref-pages-services-service-box">
                        <span class="kss-nav__ref">3.1.1</span>
                        <span class="kss-nav__name">Service Boxes</span>
                      </a>
                    </li>
                    <li class="kss-nav__item kss-nav__item--grandchild">
                      <a href="section-pages.html#kssref-pages-services-services-map">
                        <span class="kss-nav__ref">3.1.2</span>
                        <span class="kss-nav__name">Services map</span>
                      </a>
                    </li>
                </ul>
          </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-1" id="kssref-pages">
            <article class="kss-section__content">
              <a class="kss-section__permalink" href="#kssref-pages">
                <h1 class="kss-section__item kss-section__item--depth-1">
                  <span class="kss-section__ref">3</span>
                  <span class="kss-section__name">Pages</span>
                </h1>
              </a>
            </article>
            </header>
            <section class="kss-section kss-section--depth-2" id="kssref-pages-services">
            <article class="kss-section__content">
              <a class="kss-section__permalink" href="#kssref-pages-services">
                <h2 class="kss-section__item kss-section__item--depth-2">
                  <span class="kss-section__ref">3.1</span>
                  <span class="kss-section__name">Pages.services</span>
                </h2>
              </a>
            </article>
            </section>
            <section 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>
            </section>
            <section class="kss-section kss-section--depth-3" id="kssref-pages-services-services-map">
            <article class="kss-section__content">
                <p class="kss-section__source">Source: <span>pages/_services.scss</span>, line <span>1</span></p>
              <a class="kss-section__permalink" href="#kssref-pages-services-services-map">
                <h3 class="kss-section__item kss-section__item--depth-3">
                  <span class="kss-section__ref">3.1.2</span>
                  <span class="kss-section__name">Services map</span>
                </h3>
              </a>
                <div class="kss-section__description"><p>This map shows countries where service is provided. Country names are clickable and it opens a subpage with details for that country. Clickable rectangles are rendered using svg <code><rect></code>.</p>
</div>
            </article>
              <article class="kss-section__modifiers">
                <h1 class="kss-modifiers__heading">Example</h1>
                <div class="kss-modifiers__example"><div class="services-map__container" id="servicesMapContainer">
  <div class="container">
    <div class="row">
      <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-md-3 col-lg-2 col-sm-offset-0">
        <a href="./" class="tana-logo-alternate">
          <img class="img-responsive" src="./../build/assets/images/tana-logo-alternate.png" alt="Tana logotip">
        </a>
      </div>
    </div>
  </div>
  <div class="visible-xs services-map__map-mobile">
    <img src="./assets/images/services-map-mobile.png" alt="Karta regije" class="img-responsive">
  </div>
  <div class="container">
    <div class="row hidden-xs">
      <div class="col-xs-12">
        <figure id="servicesMap" class="services-map__map-desktop">
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2240 1263"
            preserveAspectRatio="xMinYMin meet">
            <image width="2220" height="1263" xlink:href="./../build/assets/images/services-map.png">
            </image>
            <a class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Slovenia" xlink:href="#slovenia">
              <text class="services-map__link-text" x="385" y="460">Slovenia</text>
            </a>
            <a class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Croatia" xlink:href="#croatia">
              <text class="services-map__link-text" x="420" y="565">Croatia</text>
            </a>
            <a class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Bosnia-Herzegovina" xlink:href="#bosnia-herzegovina">
              <text class="services-map__link-text" x="0" y="670">Bosnia-Herzegovina</text>
            </a>
            <a class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Montenegro" xlink:href="#montenegro">
              <text class="services-map__link-text" x="250" y="780">Montenegro</text>
            </a>
            <a class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Serbia" xlink:href="#serbia">
              <text class="services-map__link-text" x="1880" y="625">Serbia</text>
            </a>
            <a class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Kosovo" xlink:href="#kosovo">
              <text class="services-map__link-text" x="1880" y="730">Kosovo</text>
            </a>
            <a class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Macedonia" xlink:href="#macedonia">
              <text class="services-map__link-text" x="1880" y="840">Macedonia</text>
            </a>
            <a class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Albania" xlink:href="#albania">
              <text class="services-map__link-text" x="1880" y="940">Albania</text>
            </a>
          </svg>
        </figure>
      </div>
    </div>
    <div class="row visible-xs">
      <div class="col-xs-12">
        <ul class="list list--unstyled services-map__list">
          <li class="services-map__list-item">
            <a href="#slovenia" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Slovenia">Slovenia</a>
          </li>
          <li class="services-map__list-item" data-name="Croatia">
            <a href="#croatia" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Croatia">Croatia</a>
          </li>
          <li class="services-map__list-item" data-name="Bosnia-Herzegovina">
            <a href="#bosnia-herzegovina" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Bosnia-Herzegovina">Bosnia-Herzegovina</a>
          </li>
          <li class="services-map__list-item" data-name="Montenegro">
            <a href="#montenegro" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Montenegro">Montenegro</a>
          </li>
          <li class="services-map__list-item" data-name="Serbia">
            <a href="#serbia" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Serbia">Serbia</a>
          </li>
          <li class="services-map__list-item" data-name="Kosovo">
            <a href="#kosovo" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Kosovo">Kosovo</a>
          </li>
          <li class="services-map__list-item" data-name="Macedonia">
            <a href="#macedonia" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Macedonia">Macedonia</a>
          </li>
          <li class="services-map__list-item" data-name="Albania">
            <a href="#albania" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Albania">Albania</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div></div>
              </article>
                <article class="kss-section__markup">
                  <pre><code class="language-markup"><div class="services-map__container" id="servicesMapContainer">
  <div class="container">
    <div class="row">
      <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-md-3 col-lg-2 col-sm-offset-0">
        <a href="./" class="tana-logo-alternate">
          <img class="img-responsive" src="./../build/assets/images/tana-logo-alternate.png" alt="Tana logotip">
        </a>
      </div>
    </div>
  </div>
  <div class="visible-xs services-map__map-mobile">
    <img src="./assets/images/services-map-mobile.png" alt="Karta regije" class="img-responsive">
  </div>
  <div class="container">
    <div class="row hidden-xs">
      <div class="col-xs-12">
        <figure id="servicesMap" class="services-map__map-desktop">
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2240 1263"
            preserveAspectRatio="xMinYMin meet">
            <image width="2220" height="1263" xlink:href="./../build/assets/images/services-map.png">
            </image>
            <a class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Slovenia" xlink:href="#slovenia">
              <text class="services-map__link-text" x="385" y="460">Slovenia</text>
            </a>
            <a class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Croatia" xlink:href="#croatia">
              <text class="services-map__link-text" x="420" y="565">Croatia</text>
            </a>
            <a class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Bosnia-Herzegovina" xlink:href="#bosnia-herzegovina">
              <text class="services-map__link-text" x="0" y="670">Bosnia-Herzegovina</text>
            </a>
            <a class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Montenegro" xlink:href="#montenegro">
              <text class="services-map__link-text" x="250" y="780">Montenegro</text>
            </a>
            <a class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Serbia" xlink:href="#serbia">
              <text class="services-map__link-text" x="1880" y="625">Serbia</text>
            </a>
            <a class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Kosovo" xlink:href="#kosovo">
              <text class="services-map__link-text" x="1880" y="730">Kosovo</text>
            </a>
            <a class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Macedonia" xlink:href="#macedonia">
              <text class="services-map__link-text" x="1880" y="840">Macedonia</text>
            </a>
            <a class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Albania" xlink:href="#albania">
              <text class="services-map__link-text" x="1880" y="940">Albania</text>
            </a>
          </svg>
        </figure>
      </div>
    </div>
    <div class="row visible-xs">
      <div class="col-xs-12">
        <ul class="list list--unstyled services-map__list">
          <li class="services-map__list-item">
            <a href="#slovenia" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Slovenia">Slovenia</a>
          </li>
          <li class="services-map__list-item" data-name="Croatia">
            <a href="#croatia" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Croatia">Croatia</a>
          </li>
          <li class="services-map__list-item" data-name="Bosnia-Herzegovina">
            <a href="#bosnia-herzegovina" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Bosnia-Herzegovina">Bosnia-Herzegovina</a>
          </li>
          <li class="services-map__list-item" data-name="Montenegro">
            <a href="#montenegro" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Montenegro">Montenegro</a>
          </li>
          <li class="services-map__list-item" data-name="Serbia">
            <a href="#serbia" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Serbia">Serbia</a>
          </li>
          <li class="services-map__list-item" data-name="Kosovo">
            <a href="#kosovo" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Kosovo">Kosovo</a>
          </li>
          <li class="services-map__list-item" data-name="Macedonia">
            <a href="#macedonia" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Macedonia">Macedonia</a>
          </li>
          <li class="services-map__list-item" data-name="Albania">
            <a href="#albania" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Albania">Albania</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div></code></pre>
                </article>
            </section>
    </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>