File: /var/www/tana/frontend/src/templates/pages/_know-how.html
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col-sm-2 col-sm-offset-0">
<a href="./">
<img class="logo--secondary img-responsive center-block" src="./assets/images/tana-logo.png" alt="Tana logotip">
</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-18 sticky-follow">
<div>
<div>
<a href="./">
<img class="logo--secondary img-responsive center-block" src="./assets/images/tana-logo.png" alt="Tana logotip">
</a>
</div>
<ul class="list list--unstyled list-categories list-categories--pretty">
<li class="list-categories__item list-categories__item--active">All</li>
<li class="list-categories__item" data-type="articles">Articles</li>
<li class="list-categories__item" data-type="news">News</li>
<li class="list-categories__item" data-type="events">Events</li>
<li class="list-categories__item" data-type="links">Links</li>
</ul>
</div>
</div>
{% import "../macros/_article-box.html" as articles %}
<div class="col-sm-82">
<div class="results-container">
<div class="articles-grid">
<div class="row">
<div class="col-sm-6 col-md-8 faded">
{{ articles.article() }}
</div>
<div class="col-sm-6 col-md-4 faded">
{{ articles.article() }}
</div>
<div class="col-sm-6 col-md-4 faded">
{{ articles.article() }}
</div>
<div class="col-sm-6 col-md-4 faded">
{{ articles.article() }}
</div>
<div class="col-sm-6 col-md-4 faded">
{{ articles.article() }}
</div>
<div class="col-sm-6 col-md-4 faded">
{{ articles.article() }}
</div>
<div class="col-sm-6 col-md-4 faded">
{{ articles.article() }}
</div>
<div class="col-sm-6 col-md-4 faded">
{{ articles.article() }}
</div>
<div class="col-sm-6 col-md-4 faded">
{{ articles.article() }}
</div>
<div class="col-sm-6 col-md-4 faded">
{{ articles.article() }}
</div>
<div class="col-sm-6 col-md-4 faded">
{{ articles.article() }}
</div>
<div class="col-sm-6 col-md-4 faded">
{{ articles.article() }}
</div>
<div class="col-sm-6 col-md-4 faded">
{{ articles.article() }}
</div>
</div>
</div>
<!-- LINKS GRID is only here to show how the markup looks. On server it's being fetched with AJAX and placed in the .results-container -->
<div class="links-grid hidden">
<div class="row">
<div class="col-md-4">
<div class="links-grid__single">
<h4 class="links-grid__single-title">Albania</h4>
<ul class="list list--unstyled links-grid__single-list">
<li>
<a href="#">Albanian domain name registry</a>
</li>
<li>
<a href="#">Albanian patent office</a>
</li>
</ul>
</div>
<div class="links-grid__single">
<h4 class="links-grid__single-title">Bosnia-Herzegovina</h4>
<ul class="list list--unstyled links-grid__single-list">
<li>
<a href="#">Intellectual Property Institute of Bosnia-Herzegovina</a>
</li>
<li>
<a href="#">UTIC – top level .ba domain names</a>
</li>
</ul>
</div>
<div class="links-grid__single">
<h4 class="links-grid__single-title">Croatia</h4>
<ul class="list list--unstyled links-grid__single-list">
<li>
<a href="#">CARNet – top level .hr domain names</a>
</li>
<li>
<a href="#">Croatian Customs Authority</a>
</li>
<li>
<a href="#">State Inspectorate of the Republic of Croatia</a>
</li>
<li>
<a href="#">The Croatian State Intellectual Property Office</a>
</li>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="links-grid__single">
<h4 class="links-grid__single-title">Kosovo</h4>
<ul class="list list--unstyled links-grid__single-list">
<li>
<a href="#">Kosovo IP office</a>
</li>
<li>
<a href="#">The Assembly of Kosovo</a>
</li>
</ul>
</div>
<div class="links-grid__single">
<h4 class="links-grid__single-title">Macedonia</h4>
<ul class="list list--unstyled links-grid__single-list">
<li>
<a href="#">Customs Administration of the Republic of Macedonia</a>
</li>
<li>
<a href="#">The Macedonian State Office of Industrial Property</a>
</li>
</ul>
</div>
<div class="links-grid__single">
<h4 class="links-grid__single-title">Montenegro</h4>
<ul class="list list--unstyled links-grid__single-list">
<li>
<a href="#">Intellectual Property Office of Montenegro</a>
</li>
<li>
<a href="#">Montenegro - top level .me domain names</a>
</li>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="links-grid__single">
<h4 class="links-grid__single-title">Serbia</h4>
<ul class="list list--unstyled links-grid__single-list">
<li>
<a href="#">Republic of Serbia Customs Administration</a>
</li>
<li>
<a href="#">Republic of Serbia Intellectual Property Office</a>
</li>
<li>
<a href="#">RNIDS – Serbian internet domain name registry</a>
</li>
</ul>
</div>
<div class="links-grid__single">
<h4 class="links-grid__single-title">Slovenia</h4>
<ul class="list list--unstyled links-grid__single-list">
<li>
<a href="#">ARNES – Slovenian domain name registry</a>
</li>
<li>
<a href="#">Customs Administration of the Republic of Slovenia</a>
</li>
<li>
<a href="#">The Slovenian Intellectual Property Office</a>
</li>
</ul>
</div>
<div class="links-grid__single">
<h4 class="links-grid__single-title">International</h4>
<ul class="list list--unstyled links-grid__single-list">
<li>
<a href="#">European Patent Organization</a>
</li>
<li>
<a href="#">The Office of Harmonization for the Internal Market (EU)</a>
</li>
<li>
<a href="#">World Intellectual Property Office</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>