<div class="search-result-wrapper">
<section class="search-result">
<div class="search-result-pattern search-result-pattern-diagonal search-result-pattern-green"></div>
<div class="search-result-content with-pattern">
<div class="search-result-heading">
<h5><a href="">Art and design subjects</a></h5>
</div>
<p class="search-result-teaser">Many studies have shown that a stronger connection to nature increases a person’s life satisfaction and happiness, at the same time as lowering anxiety levels.</p>
</div>
</section>
</div>
<div class="search-result-wrapper">
<section class="search-result{% if tag %} search-result-with-tag{% endif %}">
{% if image %}
<div class="search-result-image">
<img src="{{ image.path | path }}"{% if image.srcset %} srcset="{% for src in image.srcset %}{{ src.path | path }} {{ src.width }}w, {% endfor %}{{ image.path | path }}"{% endif %} alt="{{ image.alt }}" />
</div>
{% endif %}
{% if pattern %}
<div class="search-result-pattern search-result-pattern-{{ pattern }}{% if patternColour %} search-result-pattern-{{ patternColour }}{% else %} search-result-pattern-green-blue{% endif %}"></div>
{% endif %}
<div class="search-result-content{% if image %} with-image{% endif %}{% if pattern %} with-pattern{% endif %}">
{% if tag %}<div class="search-result-tag">{{ tag }}</div>{% endif %}
<div class="search-result-heading">
<h5><a href="{{ link }}">{{ title }}</a></h5>
{% if subtitle %}<h5 class="subheading">{{ subtitle }}</h5>{% endif %}
</div>
<p class="search-result-teaser">{{ teasertext }}</p>
{% if metadata %}
<div class="search-result-metadata">
{% for data in metadata %}
<span class="inline-heading">{{ data.key }}:</span> {{ data.value }}
{% endfor %}
</div>
{% endif %}
</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": "Art and design subjects",
"teasertext": "Many studies have shown that a stronger connection to nature increases a person’s life satisfaction and happiness, at the same time as lowering anxiety levels.",
"pattern": "diagonal",
"patternColour": "green"
}
// defining the colours as a collection allows us to loop through them and generate classnames based on the keys
$search-result-pattern-colours: (
mid-blue: $mid-blue,
strawberry: $strawberry,
yellow: $yellow,
primary-blue: $primary-blue,
turquoise: $turquoise,
orange: $orange,
green: $green,
green-blue: $green-blue
);
.search-result {
@include small-body-font;
lost-flex-container: row;
margin-right: px-to-em(26, 14);
margin-bottom: px-to-em(26, 14);
border-bottom: 1px dashed $dark-grey;
padding-bottom: px-to-em(26, 14);
width: 100%;
color: $text-black;
&-tag {
margin-bottom: px-to-em(6, 14);
text-transform: uppercase;
font-family: $header-font;
}
&-with-tag {
margin-top: px-to-em(36, 14);
&:first-child {
margin-top: 0;
}
}
&-heading {
margin-bottom: px-to-em(17);
}
&-teaser {
margin-bottom: px-to-em(20, 14);
}
&-image {
display: none;
@include for-tablet-portrait-up {
lost-column: 5/16;
display: block;
}
@include for-largerthan-ipad-portrait {
lost-column: 3/10;
}
img {
max-width: 100%;
}
}
&-pattern {
display: none;
@include for-tablet-portrait-up {
lost-column: 5/16;
display: block;
padding-bottom: calc(100% * 5/16);
}
@include for-largerthan-ipad-portrait {
lost-column: 3/10;
display: block;
padding-bottom: calc(100% * 3/10);
}
@each $item, $colour in $search-result-pattern-colours {
&-#{$item} {
&.search-result-pattern-zigzag {
@include pattern-zigzag($colour);
}
&.search-result-pattern-diagonal {
@include pattern-diagonal($colour);
}
&.search-result-pattern-weave {
@include pattern-weave($colour);
}
}
}
}
&-content {
lost-column: 10/10;
&.with-pattern,
&.with-image {
margin-top: -.3em;
@include for-tablet-portrait-up {
lost-column: 11/16;
}
@include for-largerthan-ipad-portrait {
lost-column: 7/10;
}
}
}
&-metadata {
@include body-font;
}
h5 {
a {
display: inline;
background-image: linear-gradient(transparent calc(100% - 2px), $primary-blue 2px);
background-repeat: no-repeat;
background-size: 0% 100%;
color: $primary-blue;
&:hover,
&:focus {
animation: link-hover-animation-border .5s forwards $default-animation-curve;
background-size: 100% 100%;
}
}
}
&-wrapper {
display: block;
}
}
A generic search result template, to be used for search results where there is no specific format for the result type.