<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>
{
"value": "Acc",
"filterGroups": [
{
"title": "Filter by content type",
"id": "result-type",
"name": "result-type",
"type": "radio",
"filters": [
{
"label": "Course",
"count": 2,
"checked": true,
"id": "result-type-course",
"value": "?query=test&collection=uod-meta&f.result+type%7Ctype=courses"
},
{
"label": "News",
"count": 2,
"id": "result-type-news",
"value": "?query=test&collection=uod-meta&f.result+type%7Ctype=news"
},
{
"label": "Events",
"count": 10,
"id": "result-type-events",
"value": "?query=test&collection=uod-meta&f.result+type%7Ctype=events"
},
{
"label": "Staff",
"count": "0",
"id": "result-type-staff",
"disabled": true,
"value": "?query=test&collection=uod-meta&f.result+type%7Ctype=staff"
},
{
"label": "Case study",
"count": 2,
"id": "result-type-case-study",
"value": "?query=test&collection=uod-meta&f.result+type%7Ctype=case-study"
}
]
},
{
"title": "Filter by level",
"id": "level",
"name": "level",
"type": "checkbox",
"filters": [
{
"label": "Undergraduate",
"count": 2,
"checked": true,
"id": "result-group-undergraduate",
"value": "?query=test&f.level%7CcourseLevel=Undergraduate&collection=uod-meta&f.result+type%7Ctype=courses"
},
{
"label": "Postgraduate",
"count": 10,
"id": "result-group-postgraduate",
"value": "?query=test&f.level%7CcourseLevel=Postgraduate&collection=uod-meta&f.result+type%7Ctype=courses"
},
{
"label": "Professional",
"count": 10,
"id": "result-group-professional",
"value": "?query=test&f.level%7CcourseLevel=Professional&collection=uod-meta&f.result+type%7Ctype=courses"
}
]
},
{
"title": "Filter by study option",
"id": "study-option",
"name": "study-option",
"type": "checkbox",
"filters": [
{
"label": "Full-time",
"count": 2,
"checked": true,
"id": "result-study-option-full-time",
"value": "?query=test&collection=uod-meta&f.result+type%7Ctype=courses&f.study+option%7CstudyOption=Full-time"
},
{
"label": "Part-time",
"count": 2,
"id": "result-study-option-part-time",
"value": "?query=test&collection=uod-meta&f.result+type%7Ctype=courses&f.study+option%7CstudyOption=Part-time"
},
{
"label": "Online",
"count": 10,
"id": "result-study-option-online",
"value": "?query=test&collection=uod-meta&f.result+type%7Ctype=courses&f.study+option%7CstudyOption=Online"
},
{
"label": "CPD",
"count": "0",
"id": "result-study-option-cpd",
"disabled": true,
"value": "?query=test&collection=uod-meta&f.result+type%7Ctype=courses&f.study+option%7CstudyOption=CPD"
}
]
}
],
"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.