<section class="search-result-promo">
<div class="search-result-promo-content">
<div class="search-result-promo-content-title h5"><a href="#">You can study a joint honours degree with Art</a></div>
<p class="search-result-promo-content-description">Use our University of Derby course finder to search for undergraduate degree courses including BA, BSc, and BEng, and postgraduate degree courses including MA, MSc, and MBA.</p>
<div class="search-result-promo-content-calltoaction">
<a href="#" class="button-outline" title="You can study a joint honours degree with Art" role="button" tabindex="0" data-scroll>
Browse available courses
<span class="button-overlay"><span>
Browse available courses
</span></span></a> </div>
</div>
<div class="search-result-promo-pattern search-result-promo-pattern-diagonal search-result-promo-pattern-mid-blue"></div>
</section>
<section class="search-result-promo{% if image %} search-result-promo-with-image{% endif %}">
<div class="search-result-promo-content">
<div class="search-result-promo-content-title h5">{% if callToAction %}<a href="{{ callToAction.href }}">{% endif %}{{ title }}{% if callToAction %}</a>{% endif %}</div>
<p class="search-result-promo-content-description">{{ description }}</p>
{% if callToAction %}
<div class="search-result-promo-content-calltoaction">
{% include '@button' with {
label: callToAction.label,
href: callToAction.href
} %}
</div>
{% endif %}
</div>
{% if image %}
<div class="search-result-promo-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 }}" data-object-fit />
</div>
{% else %}
<div class="search-result-promo-pattern{% if pattern %} search-result-promo-pattern-{{ pattern }}{% else %} search-result-promo-pattern-diagonal{% endif %}{% if patternColour %} search-result-promo-pattern-{{ patternColour }}{% else %} search-result-promo-pattern-green-blue{% endif %}"></div>
{% endif %}
</section>
{
"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": "You can study a joint honours degree with Art",
"description": "Use our University of Derby course finder to search for undergraduate degree courses including BA, BSc, and BEng, and postgraduate degree courses including MA, MSc, and MBA.",
"callToAction": {
"label": "Browse available courses",
"href": "#"
},
"pattern": "diagonal",
"patternColour": "mid-blue"
}
// defining the colours as a collection allows us to loop through them and generate classnames based on the keys
$search-result-promo-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-promo {
lost-flex-container: column;
lost-column: 10/10;
justify-content: space-between;
margin-bottom: px-to-em(26);
background-color: #f5f5f5;
@include for-tablet-portrait-up {
lost-flex-container: row;
}
&-content {
lost-column: 10/10;
order: 1;
padding: 24px;
@include for-tablet-portrait-up {
lost-column: 7/10;
order: 0;
padding: 30px;
}
.search-result-promo-with-image & {
@include for-tablet-portrait-up {
lost-column: 6/10;
}
}
&-title {
@include disable-underlines;
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%;
}
}
}
&-description {
margin-top: px-to-em(16);
margin-bottom: px-to-em(30);
}
&-calltoaction {
font-size: 0;
.button {
margin-bottom: 0;
}
}
}
&-pattern {
lost-column: 10/10;
order: 0;
background-color: $white;
height: 80px;
@include for-tablet-portrait-up {
lost-column: 3/10;
order: 1;
background-color: #f5f5f5;
height: auto;
}
@each $item, $colour in $search-result-promo-pattern-colours {
&-#{$item} {
&.search-result-promo-pattern-zigzag {
@include pattern-zigzag($colour);
}
&.search-result-promo-pattern-diagonal {
@include pattern-diagonal($colour);
}
&.search-result-promo-pattern-weave {
@include pattern-weave($colour);
}
}
}
}
&-with-image {
$mobile-image-width: #{'calc((100vw - (80px + 10px)) * 16/16)'};
$tablet-image-width: #{'calc((100vw - (80px + 10px)) * 4/16)'};
$large-desktop-image-width: #{'calc((1780px - (80px + 10px)) * 4/16)'};
min-height: $mobile-image-width;
@include for-tablet-portrait-up {
min-height: $tablet-image-width;
}
@media (min-width: 1780px) {
min-height: $large-desktop-image-width;
}
}
&-image {
lost-column: 10/10;
order: 0;
@include for-tablet-portrait-up {
lost-column: 4/10;
order: 1;
height: auto;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
A more visually impactful search result, the Promo allows for the display of a heading, paragraph and call to action button alongside either an image or a pattern element.