<section class="course-teaser" onclick="javascript:window.location.href=#">
<div class="course-teaser-course-level">Short Course</div>
<div class="course-teaser-heading">
<h5><a href="#">Assistant Practitioner to Radiographer</a></h5>
</div>
<div class="course-teaser-description">This is an intense, yet rewarding short course, providing you with the opportunity to enhance your existing knowledge and skills to join the third year of the BSc (Hons) Diagnostic Radiography.</div>
<div class="course-teaser-key-stats">
<div class="course-teaser-key-stat">
<div class="course-teaser-key-stat-label">Study options:</div>
<div class="course-teaser-key-stat-content">CPD, Full-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>
<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": null,
"level": "Short Course",
"title": "Assistant Practitioner to Radiographer",
"description": "This is an intense, yet rewarding short course, providing you with the opportunity to enhance your existing knowledge and skills to join the third year of the BSc (Hons) Diagnostic Radiography.",
"keyStats": [
{
"label": "Study options:",
"content": "CPD, Full-time"
},
{
"label": "UCAS code:",
"content": "H600"
}
],
"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.