<section class="course-teaser" onclick="javascript:window.location.href='#'" onKeyPress="javascript:window.location.href='#'">
<div class="tag tag-turquoise">Online Course</div>
<div class="course-teaser-course-level">Undergraduate Course</div>
<div class="course-teaser-heading">
<div class="h5"><a href="#">Business and Management BSc (Hons) degree</a></div>
</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">Online, 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" title="Business and Management BSc (Hons) degree" 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 }}'" onKeyPress="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"><div class="h5">{% if callToAction %}<a href="{{ callToAction.href }}">{% endif %}{{ title }}{% if callToAction %}</a>{% endif %}</div></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>
{
"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"
}
]
}
],
"tag": {
"label": "Online Course",
"color": "turquoise"
},
"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": "Online, 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, .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.
href [required, string]