File: /var/www/tana/frontend/styleguide/section-components.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="kss-state-active" href="section-components.html">
<span class="kss-nav__ref">2</span>
<span class="kss-nav__name">Components</span>
</a>
<ul class="kss-nav__subnav">
<li class="kss-nav__item ">
<a href="section-components.html#kssref-components-article">
<span class="kss-nav__ref">2.1</span>
<span class="kss-nav__name">Components.Article</span>
</a>
</li>
<li class="kss-nav__item kss-nav__item--grandchild">
<a href="section-components.html#kssref-components-article-article-box">
<span class="kss-nav__ref">2.1.1</span>
<span class="kss-nav__name">Article Box</span>
</a>
</li>
<li class="kss-nav__item ">
<a href="section-components.html#kssref-components-button">
<span class="kss-nav__ref">2.2</span>
<span class="kss-nav__name">Button</span>
</a>
</li>
<li class="kss-nav__item ">
<a href="section-components.html#kssref-components-circle-slider">
<span class="kss-nav__ref">2.3</span>
<span class="kss-nav__name">Circle sliders</span>
</a>
</li>
<li class="kss-nav__item ">
<a href="section-components.html#kssref-components-list">
<span class="kss-nav__ref">2.4</span>
<span class="kss-nav__name">Components.list</span>
</a>
</li>
<li class="kss-nav__item kss-nav__item--grandchild">
<a href="section-components.html#kssref-components-list-default-list">
<span class="kss-nav__ref">2.4.1</span>
<span class="kss-nav__name">List</span>
</a>
</li>
<li class="kss-nav__item kss-nav__item--grandchild">
<a href="section-components.html#kssref-components-list-advanced-list">
<span class="kss-nav__ref">2.4.2</span>
<span class="kss-nav__name">Advanced list</span>
</a>
</li>
<li class="kss-nav__item ">
<a href="section-components.html#kssref-components-menu-toggle">
<span class="kss-nav__ref">2.5</span>
<span class="kss-nav__name">Menu toggle button</span>
</a>
</li>
<li class="kss-nav__item ">
<a href="section-components.html#kssref-components-navbar">
<span class="kss-nav__ref">2.6</span>
<span class="kss-nav__name">Navbar</span>
</a>
</li>
</ul>
</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-1" id="kssref-components">
<article class="kss-section__content">
<a class="kss-section__permalink" href="#kssref-components">
<h1 class="kss-section__item kss-section__item--depth-1">
<span class="kss-section__ref">2</span>
<span class="kss-section__name">Components</span>
</h1>
</a>
</article>
</header>
<section class="kss-section kss-section--depth-2" id="kssref-components-article">
<article class="kss-section__content">
<a class="kss-section__permalink" href="#kssref-components-article">
<h2 class="kss-section__item kss-section__item--depth-2">
<span class="kss-section__ref">2.1</span>
<span class="kss-section__name">Components.Article</span>
</h2>
</a>
</article>
</section>
<section class="kss-section kss-section--depth-3" id="kssref-components-article-article-box">
<article class="kss-section__content">
<p class="kss-section__source">Source: <span>components/_article.scss</span>, line <span>1</span></p>
<a class="kss-section__permalink" href="#kssref-components-article-article-box">
<h3 class="kss-section__item kss-section__item--depth-3">
<span class="kss-section__ref">2.1.1</span>
<span class="kss-section__name">Article Box</span>
</h3>
</a>
<div class="kss-section__description"><p>Single box representing a single article. Used in articles grid. Article box is always 100% width and will adapt to its parent width.</p>
</div>
</article>
<article class="kss-section__modifiers">
<h1 class="kss-modifiers__heading">Example</h1>
<div class="kss-modifiers__example"><div class="article" style="background: #1428aa url('./../build/assets/images/suit-image.png') center/cover no-repeat;">
<a href="#" class="article__link"></a>
<div class="article__metadata">
<div class="article__date">
10 Jun 2018
</div>
<h2 class="article__title">
<a class="article__title-link" href="#">Lorem ipsum dolor sit amet.</a>
</h2>
</div>
</div></div>
</article>
<article class="kss-section__markup">
<pre><code class="language-markup"><div class="article" style="background: #1428aa url('./../build/assets/images/suit-image.png') center/cover no-repeat;">
<a href="#" class="article__link"></a>
<div class="article__metadata">
<div class="article__date">
10 Jun 2018
</div>
<h2 class="article__title">
<a class="article__title-link" href="#">Lorem ipsum dolor sit amet.</a>
</h2>
</div>
</div></code></pre>
</article>
</section>
<section class="kss-section kss-section--depth-2" id="kssref-components-button">
<article class="kss-section__content">
<p class="kss-section__source">Source: <span>components/_buttons.scss</span>, line <span>1</span></p>
<a class="kss-section__permalink" href="#kssref-components-button">
<h2 class="kss-section__item kss-section__item--depth-2">
<span class="kss-section__ref">2.2</span>
<span class="kss-section__name">Button</span>
</h2>
</a>
<div class="kss-section__description"><p>Single button.</p>
</div>
</article>
<article class="kss-section__modifiers">
<h1 class="kss-modifiers__heading">Examples</h1>
<h2 class="kss-modifiers__name">Default styling</h2>
<div class="kss-modifiers__example"><button class="btn [modifier class]">Button</button></div>
<article class="kss-modifiers__modifier">
<h2 class="kss-modifiers__name">.btn--primary</h2>
<p class="kss-modifiers__description">Primary button type used throughout the site.</p>
<div class="kss-modifiers__example"><button class="btn btn--primary">Button</button></div>
</article>
</article>
<article class="kss-section__markup">
<pre><code class="language-markup"><button class="btn [modifier class]">Button</button></code></pre>
</article>
</section>
<section class="kss-section kss-section--depth-2" id="kssref-components-circle-slider">
<article class="kss-section__content">
<p class="kss-section__source">Source: <span>components/_slider.scss</span>, line <span>1</span></p>
<a class="kss-section__permalink" href="#kssref-components-circle-slider">
<h2 class="kss-section__item kss-section__item--depth-2">
<span class="kss-section__ref">2.3</span>
<span class="kss-section__name">Circle sliders</span>
</h2>
</a>
<div class="kss-section__description"><p>Slider with circle progress indicator. Requires a parent container with defined height (that's why <code>.aspectratio</code> is used).</p>
<p><strong>(<code>.col-xs-6</code> used here only to make the element smaller in the styleguide so it doesn't stretch full width.)</strong></p>
</div>
</article>
<article class="kss-section__modifiers">
<h1 class="kss-modifiers__heading">Examples</h1>
<h2 class="kss-modifiers__name">Default styling</h2>
<div class="kss-modifiers__example"><div class="col-xs-6">
<div class="aspectratio" data-ratio="1:1">
<div class="aspectratio__item">
<div class="slider [modifier class]">
<div class="slider__images faded">
<img class="slider__image img-responsive" src="./../build/assets/images/about-apple.png">
<img class="slider__image img-responsive" src="./../build/assets/images/about-homo-volans.png">
</div>
<svg class="slider__circle">
<circle class="slider__circle-shape" stroke="#1428aa" fill="transparent" r="45%" cx="50%" cy="50%"></circle>
</svg>
</div>
</div>
</div>
</div></div>
<article class="kss-modifiers__modifier">
<h2 class="kss-modifiers__name">.slider--offset-left</h2>
<p class="kss-modifiers__description">Class that offsets the slider circle to the left. Used for that offset of circles on the homepage.</p>
<div class="kss-modifiers__example"><div class="col-xs-6">
<div class="aspectratio" data-ratio="1:1">
<div class="aspectratio__item">
<div class="slider slider--offset-left">
<div class="slider__images faded">
<img class="slider__image img-responsive" src="./../build/assets/images/about-apple.png">
<img class="slider__image img-responsive" src="./../build/assets/images/about-homo-volans.png">
</div>
<svg class="slider__circle">
<circle class="slider__circle-shape" stroke="#1428aa" fill="transparent" r="45%" cx="50%" cy="50%"></circle>
</svg>
</div>
</div>
</div>
</div></div>
</article>
<article class="kss-modifiers__modifier">
<h2 class="kss-modifiers__name">.slider--offset-right</h2>
<p class="kss-modifiers__description">Class that offsets the slider circle to the right. Used for that offset of circles on the homepage.</p>
<div class="kss-modifiers__example"><div class="col-xs-6">
<div class="aspectratio" data-ratio="1:1">
<div class="aspectratio__item">
<div class="slider slider--offset-right">
<div class="slider__images faded">
<img class="slider__image img-responsive" src="./../build/assets/images/about-apple.png">
<img class="slider__image img-responsive" src="./../build/assets/images/about-homo-volans.png">
</div>
<svg class="slider__circle">
<circle class="slider__circle-shape" stroke="#1428aa" fill="transparent" r="45%" cx="50%" cy="50%"></circle>
</svg>
</div>
</div>
</div>
</div></div>
</article>
</article>
<article class="kss-section__markup">
<pre><code class="language-markup"><div class="col-xs-6">
<div class="aspectratio" data-ratio="1:1">
<div class="aspectratio__item">
<div class="slider [modifier class]">
<div class="slider__images faded">
<img class="slider__image img-responsive" src="./../build/assets/images/about-apple.png">
<img class="slider__image img-responsive" src="./../build/assets/images/about-homo-volans.png">
</div>
<svg class="slider__circle">
<circle class="slider__circle-shape" stroke="#1428aa" fill="transparent" r="45%" cx="50%" cy="50%"></circle>
</svg>
</div>
</div>
</div>
</div></code></pre>
</article>
</section>
<section class="kss-section kss-section--depth-2" id="kssref-components-list">
<article class="kss-section__content">
<a class="kss-section__permalink" href="#kssref-components-list">
<h2 class="kss-section__item kss-section__item--depth-2">
<span class="kss-section__ref">2.4</span>
<span class="kss-section__name">Components.list</span>
</h2>
</a>
</article>
</section>
<section class="kss-section kss-section--depth-3" id="kssref-components-list-default-list">
<article class="kss-section__content">
<p class="kss-section__source">Source: <span>components/_list.scss</span>, line <span>1</span></p>
<a class="kss-section__permalink" href="#kssref-components-list-default-list">
<h3 class="kss-section__item kss-section__item--depth-3">
<span class="kss-section__ref">2.4.1</span>
<span class="kss-section__name">List</span>
</h3>
</a>
<div class="kss-section__description"><p>Basic styling for lists.</p>
</div>
</article>
<article class="kss-section__modifiers">
<h1 class="kss-modifiers__heading">Examples</h1>
<h2 class="kss-modifiers__name">Default styling</h2>
<div class="kss-modifiers__example"><ul class="list [modifier class]">
<li>All</li>
<li>Articles</li>
<li>News</li>
<li>Events</li>
<li>Links</li>
</ul></div>
<article class="kss-modifiers__modifier">
<h2 class="kss-modifiers__name">.list--unstyled</h2>
<p class="kss-modifiers__description">Remove default bullets and padding.</p>
<div class="kss-modifiers__example"><ul class="list list--unstyled">
<li>All</li>
<li>Articles</li>
<li>News</li>
<li>Events</li>
<li>Links</li>
</ul></div>
</article>
</article>
<article class="kss-section__markup">
<pre><code class="language-markup"><ul class="list [modifier class]">
<li>All</li>
<li>Articles</li>
<li>News</li>
<li>Events</li>
<li>Links</li>
</ul></code></pre>
</article>
</section>
<section class="kss-section kss-section--depth-3" id="kssref-components-list-advanced-list">
<article class="kss-section__content">
<p class="kss-section__source">Source: <span>components/_list.scss</span>, line <span>29</span></p>
<a class="kss-section__permalink" href="#kssref-components-list-advanced-list">
<h3 class="kss-section__item kss-section__item--depth-3">
<span class="kss-section__ref">2.4.2</span>
<span class="kss-section__name">Advanced list</span>
</h3>
</a>
<div class="kss-section__description"><p>Advanced list styling.</p>
</div>
</article>
<article class="kss-section__modifiers">
<h1 class="kss-modifiers__heading">Examples</h1>
<h2 class="kss-modifiers__name">Default styling</h2>
<div class="kss-modifiers__example"><ul class="list list--unstyled list-categories [modifier class]">
<li class="list-categories__item list-categories__item--active">All</li>
<li class="list-categories__item">Articles</li>
<li class="list-categories__item">News</li>
<li class="list-categories__item">Events</li>
<li class="list-categories__item">Links</li>
</ul></div>
<article class="kss-modifiers__modifier">
<h2 class="kss-modifiers__name">.list--unstyled.list-categories--pretty</h2>
<p class="kss-modifiers__description">"Know How" page add top border to categories list.</p>
<div class="kss-modifiers__example"><ul class="list list--unstyled list-categories list--unstyled list-categories--pretty">
<li class="list-categories__item list-categories__item--active">All</li>
<li class="list-categories__item">Articles</li>
<li class="list-categories__item">News</li>
<li class="list-categories__item">Events</li>
<li class="list-categories__item">Links</li>
</ul></div>
</article>
</article>
<article class="kss-section__markup">
<pre><code class="language-markup"><ul class="list list--unstyled list-categories [modifier class]">
<li class="list-categories__item list-categories__item--active">All</li>
<li class="list-categories__item">Articles</li>
<li class="list-categories__item">News</li>
<li class="list-categories__item">Events</li>
<li class="list-categories__item">Links</li>
</ul></code></pre>
</article>
</section>
<section class="kss-section kss-section--depth-2" id="kssref-components-menu-toggle">
<article class="kss-section__content">
<p class="kss-section__source">Source: <span>components/_buttons.scss</span>, line <span>62</span></p>
<a class="kss-section__permalink" href="#kssref-components-menu-toggle">
<h2 class="kss-section__item kss-section__item--depth-2">
<span class="kss-section__ref">2.5</span>
<span class="kss-section__name">Menu toggle button</span>
</h2>
</a>
<div class="kss-section__description"><p>Menu toggle button. (Only visible on viewport smaller than 768px, resize your browser to see it.)</p>
</div>
</article>
<article class="kss-section__modifiers">
<h1 class="kss-modifiers__heading">Example</h1>
<div class="kss-modifiers__example"><div class="menu-toggle" id="menuToggle">
<div class="menu-toggle__lines">
<div class="menu-toggle__line1"></div>
<div class="menu-toggle__line2"></div>
<div class="menu-toggle__line3"></div>
</div>
</div></div>
</article>
<article class="kss-section__markup">
<pre><code class="language-markup"><div class="menu-toggle" id="menuToggle">
<div class="menu-toggle__lines">
<div class="menu-toggle__line1"></div>
<div class="menu-toggle__line2"></div>
<div class="menu-toggle__line3"></div>
</div>
</div></code></pre>
</article>
</section>
<section class="kss-section kss-section--depth-2" id="kssref-components-navbar">
<article class="kss-section__content">
<p class="kss-section__source">Source: <span>components/_navbar.scss</span>, line <span>1</span></p>
<a class="kss-section__permalink" href="#kssref-components-navbar">
<h2 class="kss-section__item kss-section__item--depth-2">
<span class="kss-section__ref">2.6</span>
<span class="kss-section__name">Navbar</span>
</h2>
</a>
<div class="kss-section__description"><p>Simple <a href="https://getbootstrap.com/docs/3.3/components/#navbar">Bootstrap navbar</a>. Also contains the menu toggle button component inside (only visible on < 768px viewport).</p>
</div>
</article>
<article class="kss-section__modifiers">
<h1 class="kss-modifiers__heading">Example</h1>
<div class="kss-modifiers__example"><nav class="navbar">
<div class="container-fluid">
<div class="navbar-nav__container">
<ul class="navbar-nav list list--unstyled">
<li class="navbar-nav__item navbar-nav__item--active">
<a href="./">About Us</a>
</li>
<li class="navbar-nav__item">
<a href="./services.html">Services</a>
</li>
<li class="navbar-nav__item">
<a href="./know-how.html">Know-how</a>
</li>
<li class="navbar-nav__item">
<a href="./contacts.html">Contacts</a>
</li>
</ul>
</div>
</div>
<div class="menu-toggle" id="menuToggle">
<div class="menu-toggle__lines">
<div class="menu-toggle__line1"></div>
<div class="menu-toggle__line2"></div>
<div class="menu-toggle__line3"></div>
</div>
</div>
</nav></div>
</article>
<article class="kss-section__markup">
<pre><code class="language-markup"><nav class="navbar">
<div class="container-fluid">
<div class="navbar-nav__container">
<ul class="navbar-nav list list--unstyled">
<li class="navbar-nav__item navbar-nav__item--active">
<a href="./">About Us</a>
</li>
<li class="navbar-nav__item">
<a href="./services.html">Services</a>
</li>
<li class="navbar-nav__item">
<a href="./know-how.html">Know-how</a>
</li>
<li class="navbar-nav__item">
<a href="./contacts.html">Contacts</a>
</li>
</ul>
</div>
</div>
<div class="menu-toggle" id="menuToggle">
<div class="menu-toggle__lines">
<div class="menu-toggle__line1"></div>
<div class="menu-toggle__line2"></div>
<div class="menu-toggle__line3"></div>
</div>
</div>
</nav></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>