<section class="course-teaser" onclick="javascript:window.location.href=#">
<div class="tag tag-strawberry">Available through clearing</div>
<div class="course-teaser-course-level">Undergraduate Course</div>
<div class="course-teaser-heading">
<h5><a href="#">Business and Management BSc (Hons) degree</a></h5>
</div>
<div class="course-teaser-description">You’ll experiment with the latest digital software, learn about the principles of animation, produce distinctive animated films and develop the professional awareness you need to launch your career.</div>
<div class="course-teaser-key-stats">
<div class="course-teaser-key-stat course-teaser-key-stat-full-width">
<div class="course-teaser-key-stat-label">Study options:</div>
<div class="course-teaser-key-stat-content">Full-time, 3 years / With industry year, 4 years / Part time</div>
</div>
<div class="course-teaser-key-stat">
<div class="course-teaser-key-stat-label">UCAS code:</div>
<div class="course-teaser-key-stat-content">H600</div>
</div>
<div class="course-teaser-key-stat">
<div class="course-teaser-key-stat-label">UCAS points:</div>
<div class="course-teaser-key-stat-content">UCAS 120</div>
</div>
</div>
<div class="course-teaser-calltoaction">
<a href="#" class="button-outline" role="button" tabindex="0" data-scroll>
View course
<span class="button-overlay"><span>
View course
</span></span></a> </div>
</section>
<section class="course-teaser"{% if callToAction %} onclick="javascript:window.location.href={{ callToAction.href }}"{% endif %}>
{% if tag %}<div class="tag{% if tag.color %} tag-{{ tag.color }}{% endif %}">{{ tag.label }}</div>{% endif %}
{% if level %}<div class="course-teaser-course-level">{{ level }}</div>{% endif %}
{% if title %}<div class="course-teaser-heading"><h5>{% if callToAction %}<a href="{{ callToAction.href }}">{% endif %}{{ title }}{% if callToAction %}</a>{% endif %}</h5></div>{% endif %}
{% if description %}<div class="course-teaser-description">{{ description }}</div>{% endif %}
{% if keyStats %}
<div class="course-teaser-key-stats">
{% for stat in keyStats %}
<div class="course-teaser-key-stat{% if stat.fullWidth %} course-teaser-key-stat-full-width{% endif %}">
<div class="course-teaser-key-stat-label">{{ stat.label }}</div>
<div class="course-teaser-key-stat-content">{{ stat.content }}</div>
</div>
{% endfor %}
</div>
{% endif %}
{% if callToAction %}
<div class="course-teaser-calltoaction">
{% include '@button' with {
label: callToAction.label,
href: callToAction.href,
external: callToAction.external
} %}
</div>
{% endif %}
</section>
{
"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"
}
]
}
],
"tag": {
"label": "Available through clearing",
"color": "strawberry"
},
"level": "Undergraduate Course",
"title": "Business and Management BSc (Hons) degree",
"description": "You’ll experiment with the latest digital software, learn about the principles of animation, produce distinctive animated films and develop the professional awareness you need to launch your career.",
"keyStats": [
{
"label": "Study options:",
"content": "Full-time, 3 years / With industry year, 4 years / Part time",
"fullWidth": true
},
{
"label": "UCAS code:",
"content": "H600"
},
{
"label": "UCAS points:",
"content": "UCAS 120"
}
],
"callToAction": {
"label": "View course",
"href": "#"
}
}
.course-teaser {
@include small-body-font;
border: #{px-to-em(6, 14)} solid $primary-blue;
padding: #{px-to-em(14, 14)} #{px-to-em(24, 14)} #{px-to-em(20, 14)};
margin-bottom: px-to-em(40, 14);
margin-top: px-to-em(30, 14);
@include for-tablet-portrait-up {
padding-bottom: px-to-em(24, 14);
}
&-description {
margin-bottom: px-to-em(20, 14);
}
&-course-tag,
&-course-level {
text-transform: uppercase;
font-family: $header-font;
}
&-course-level {
margin-top: px-to-em(13, 14);
margin-bottom: px-to-em(10, 14);
}
&-calltoaction {
margin-top: px-to-em(12, 14);
@include for-tablet-portrait-up {
margin-top: 0;
text-align: right;
}
.button {
margin-bottom: 0;
}
}
&-heading {
margin-bottom: px-to-em(17);
}
h5 {
@include disable-underlines;
a {
color: $primary-blue;
background-repeat: no-repeat;
background-image: linear-gradient(transparent calc(100% - 2px), $primary-blue 2px);
background-size: 0% 100%;
display: inline;
&:hover,
&:focus {
animation: link-hover-animation-border .5s forwards $default-animation-curve;
background-size: 100% 100%;
}
}
}
&-key-stats {
display: table;
width: 100%;
}
&-key-stat {
display: table-row;
padding-bottom: px-to-em(10, 14);
&-label {
display: table-cell;
font-weight: bold;
font-family: $header-font;
color: $primary-blue;
font-size: px-to-em(16, 14);
width: 20%;
padding-right: px-to-em(10, 16);
padding-bottom: px-to-em(10, 16);
white-space: nowrap;
}
&-content {
display: table-cell;
font-size: px-to-em(15, 14);
padding-bottom: px-to-em(10, 15);
}
&-full-width {
display: table-caption;
.course-teaser-key-stat-label,
.course-teaser-key-stat-content {
display: table-row;
}
@include for-largerthan-ipad-portrait {
display: table-row;
.course-teaser-key-stat-label,
.course-teaser-key-stat-content {
display: table-cell;
}
}
}
}
}
A search result template to be used specifically for Courses.