Search
#
Search Results {% include 'components/search/search-results' %}
#
HTML
<div class="inner">
			<div class="search-result">
			<div class="search-result__type">
				<div class="search-result__circle">
					WWW
				</div>
			</div>
			<div class="search-result__content">
				<a href="#" class="search-result__title"><h2>One big mountain</h2></a>
				<a href="#" class="search-result__url">/en/give/one_mountain</a>
				<div class="search-result__excerpt">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in suscipit nisl. Sed volutpat id arcu nec iaculis. Maecenas ullamcorper, urna pretium vulputate pretium, ante nulla dignissim diam, et fringilla nulla justo eu nulla.</p>
				</div>
			</div>
		</div>
	</div>
Twig
<div class="inner">
	{% for result in search_results %}
		<div class="search-result">
			<div class="search-result__type">
				<div class="search-result__circle">
					{{ result.type }}
				</div>
			</div>
			<div class="search-result__content">
				<a href="#" class="search-result__title"><h2>{{ result.title }}</h2></a>
				<a href="#" class="search-result__url">{{ result.url }}</a>
				<div class="search-result__excerpt">
					<p>{{ result.excerpt }}</p>
				</div>
			</div>
		</div>
	{% endfor %}
</div>
{
    "search_results": {
        "0": {
            "type": "WWW",
            "title": "One big mountain",
            "url": "\/en\/give\/one_mountain",
            "excerpt": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in suscipit nisl. Sed volutpat id arcu nec iaculis. Maecenas ullamcorper, urna pretium vulputate pretium, ante nulla dignissim diam, et fringilla nulla justo eu nulla."
        }
    }
}
WWW

One big mountain

/en/give/one_mountain

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in suscipit nisl. Sed volutpat id arcu nec iaculis. Maecenas ullamcorper, urna pretium vulputate pretium, ante nulla dignissim diam, et fringilla nulla justo eu nulla.

Pagination {% include 'components/search/pagination' %}
#
HTML
<div class="pagination clearfix">
	<div class="article-inner">
		<div class="prev">
			<a href="#">< Previous</a>
		</div> 
		<ul class="page-links">
			<li class="current">1</li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
		</ul>
		<div class="next">
			<a href="#">Next ></a>
		</div>
	</div>
</div>
Twig
<div class="pagination clearfix">
	<div class="article-inner">
		<div class="prev">
			<a href="#">< Previous</a>
		</div> 
		<ul class="page-links">
			<li class="current">1</li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
		</ul>
		<div class="next">
			<a href="#">Next ></a>
		</div>
	</div>
</div>
{}
Search Summary {% include 'components/search/search-summary' %}
#
HTML
<div class="article-inner search-summary">
	About 1350 results for 'One big mountain'
</div>
Twig
<div class="article-inner search-summary">
	About {{search_results_no}} results for '{{search_term}}'
</div>
{
    "search_results_no": 1350,
    "search_term": "One big mountain"
}
About 1350 results for 'One big mountain'