<div class="popular-searches">
<section class="popular-searches-group">
<h6>Popular searches</h6>
<div class="popular-searches-item">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link three has a lot of text</a></li>
<li><a href="#">Link 4 text goes here</a></li>
<li><a href="#">Finally, Link 5</a></li>
</ul>
</div>
</section>
</div>
<div class="popular-searches">
<section class="popular-searches-group">
<h6>{{ title }}</h6>
<div class="popular-searches-item">
<ul>
{% for link in links %}
<li><a href="{{ link.href }}">{{ link.label }}</a></li>
{% endfor %}
</ul>
</div>
</section>
</div>
{
"filterGroups": [
{
"title": "Filter by result type",
"filters": [
{
"label": "Course",
"count": 2,
"checked": true,
"tag": "result-type-course"
},
{
"label": "News",
"count": 2,
"tag": "result-type-news"
},
{
"label": "Online",
"count": 10,
"tag": "result-type-online"
},
{
"label": "Foundation",
"count": null,
"tag": "result-type-foundation"
},
{
"label": "Part-time",
"count": 2,
"tag": "result-type-part-time"
}
]
},
{
"title": "Filter by result type",
"id": "result-type",
"type": "dropdown",
"filters": [
{
"label": "Course",
"count": 2,
"checked": true,
"tag": "result-type-course"
},
{
"label": "News",
"count": 2,
"tag": "result-type-news"
},
{
"label": "Online",
"count": 10,
"tag": "result-type-online"
},
{
"label": "Foundation",
"count": null,
"tag": "result-type-foundation"
},
{
"label": "Part-time",
"count": 2,
"tag": "result-type-part-time"
}
]
},
{
"title": "Filter by result type",
"id": "result-type",
"type": "radio",
"filters": [
{
"label": "Course",
"count": 2,
"checked": true,
"tag": "result-type-course"
},
{
"label": "News",
"count": 2,
"tag": "result-type-news"
},
{
"label": "Online",
"count": 10,
"tag": "result-type-online"
},
{
"label": "Foundation",
"count": null,
"tag": "result-type-foundation"
},
{
"label": "Part-time",
"count": 2,
"tag": "result-type-part-time"
}
]
},
{
"title": "Filter group title",
"filters": [
{
"label": "Filter selected",
"count": 2,
"checked": true,
"tag": "result-group-selected"
},
{
"label": "Filter unselected with title that wraps to new line",
"count": 10,
"tag": "result-group-long"
},
{
"label": "Online",
"count": 10,
"tag": "result-group-online"
},
{
"label": "No matching results",
"count": null,
"tag": "result-group-no-matching"
}
]
},
{
"title": "Filter by study option",
"filters": [
{
"label": "Undergraduate",
"count": 2,
"checked": true,
"tag": "result-study-option-undergrad"
},
{
"label": "Postgraduate",
"count": 2,
"tag": "result-study-option-postgrad"
},
{
"label": "Online",
"count": 10,
"tag": "result-study-option-online"
},
{
"label": "Foundation",
"count": null,
"tag": "result-study-option-foundation"
},
{
"label": "Part-time",
"count": 2,
"tag": "result-study-option-part-time"
}
]
}
],
"title": "Popular searches",
"links": [
{
"label": "Link 1",
"href": "#"
},
{
"label": "Link 2",
"href": "#"
},
{
"label": "Link three has a lot of text",
"href": "#"
},
{
"label": "Link 4 text goes here",
"href": "#"
},
{
"label": "Finally, Link 5",
"href": "#"
}
]
}
.popular-searches {
@include full-bleed-inset;
display: none;
font-family: $header-font;
font-size: 16px;
@include for-tablet-landscape-up {
display: block;
padding: 0;
}
&-group {
margin-bottom: px-to-em(10, 16);
background: $light-grey;
padding: px-to-em(20, 16);
}
&-item {
ul {
margin: 0;
padding: 0;
}
li {
margin: 0 0 px-to-em(12);
list-style-type: none;
&:last-child {
margin-bottom: 0;
}
}
}
}
Displays hyperlinks to other popular or related searches in the search results page. Designed as a panel to be displayed below the search result filters. Does not adapt its behaviour to different screen resolutions as the search filters do, and contains no javascript-based functionality or media queries.