<section class="key-course-details-block">
<div class="key-course-details-block-inner">
<h2 id="course-details">Course details</h2>
<div class="key-course-details-block-items-wrapper">
<div class="key-course-details-block-item">
<p class="key-course-details-block-item-p">Module code</p>
<p class="key-course-details-block-item-p">
7TA505
</p>
</div>
<div class="key-course-details-block-item">
<p class="key-course-details-block-item-p">Module level</p>
<p class="key-course-details-block-item-p">
Level 7
</p>
</div>
<div class="key-course-details-block-item">
<p class="key-course-details-block-item-p">Module credits</p>
<p class="key-course-details-block-item-p">
20 credits
</p>
</div>
<div class="key-course-details-block-item">
<p class="key-course-details-block-item-p">Start date (usually)</p>
<p class="key-course-details-block-item-p">
October 2017
</p>
</div>
<div class="key-course-details-block-item">
<p class="key-course-details-block-item-p">Course length</p>
<p class="key-course-details-block-item-p">
Six months
</p>
</div>
<div class="key-course-details-block-item key-course-details-block-item-three-column">
<p class="key-course-details-block-item-p">Lecture/workshop days - dates/times</p>
<p class="key-course-details-block-item-p">
Teaching dates are: 06/10/18-3/11/18-1/12/18-5/1/19-2/2/19-2/3/19. All sessions take place at Britannia Mill from 9.15am to 4pm. The course induction will be on Friday 28.9.18.
</p>
</div>
<div class="key-course-details-block-item key-course-details-block-item-three-column">
<p class="key-course-details-block-item-p">Tutorial dates/times</p>
<p class="key-course-details-block-item-p">
On each teaching date tutorials and staff/student meetings will take place between 4 and 5pm as required.
</p>
</div>
</div>
</div>
</section>
<section class="key-course-details-block">
<div class="key-course-details-block-inner">
{% if tag %}
<div class="key-course-details-block-tag">
<div class="tag{% if tag.color %} tag-{{ tag.color }}{% endif %}">{{ tag.label }}</div>
{% if tag.text %}<p class="key-course-details-block-tag-p"> - <a href="{{ tag.href }}">{{ tag.text }}</a></p>{% endif %}
</div>
{% endif %}
<h2 id="course-details">{% if blockType %}{{ blockType }}{% else %}Course{% endif %} details</h2>
<div class="key-course-details-block-items-wrapper">
{% for item in items %}
<div class="key-course-details-block-item{% if item.size %} key-course-details-block-item-{{ item.size }}{% endif %}">
<p class="key-course-details-block-item-p">{{ item.label }}</p>
<p class="key-course-details-block-item-p">
{{ item.content }}
</p>
</div>
{% endfor %}
</div>
</div>
{% if jointHonoursUrl or withFoundationYearUrl %}
<div>
{% if jointHonoursUrl %}
<div class="key-course-details-block-option">
<div class="key-course-details-block-option-inner">
<p class="key-course-details-block-option-p">This course is available as a Joint Honours degree.</p>
<p class="key-course-details-block-option-p">
{% include '@button' with {
label: 'View Joint Honours options',
href: jointHonoursUrl
} %}
</p>
</div>
</div>
{% endif %}
{% if withFoundationYearUrl %}
<div class="key-course-details-block-option">
<div class="key-course-details-block-option-inner">
<p class="key-course-details-block-option-p">If you do not achieve the typical entry points required, you may want to consider studying this course with foundation year.</p>
<p class="key-course-details-block-option-p">
{% include '@button' with {
label: 'View with foundation year option',
href: jointHonoursUrl
} %}
</p>
</div>
</div>
{% endif %}
</div>
{% endif %}
</section>
{#
If you do not achieve the typical entry points required, you may want to consider studying this course with foundation year.
#}
{
"items": [
{
"label": "Module code",
"content": "7TA505"
},
{
"label": "Module level",
"content": "Level 7"
},
{
"label": "Module credits",
"content": "20 credits"
},
{
"label": "Start date (usually)",
"content": "October 2017"
},
{
"label": "Course length",
"content": "Six months"
},
{
"label": "Lecture/workshop days - dates/times",
"content": "Teaching dates are: 06/10/18-3/11/18-1/12/18-5/1/19-2/2/19-2/3/19. All sessions take place at Britannia Mill from 9.15am to 4pm. The course induction will be on Friday 28.9.18.",
"size": "three-column"
},
{
"label": "Tutorial dates/times",
"content": "On each teaching date tutorials and staff/student meetings will take place between 4 and 5pm as required.",
"size": "three-column"
}
]
}
.key-course-details-block {
border: 10px solid $primary-blue;
lost-column: 8/8 0;
// start: set default intra-component spacing (units are responsive and based on em values)
@include margin-medium;
@include for-tablet-portrait-up {
@include margin-large;
}
// end: set default intra-component spacing (units are responsive and based on em values)
@include for-desktop-up {
lost-offset: 2/16;
lost-column: 12/16;
}
h2 {
font-size: 28px;
margin-bottom: 0;
}
&-inner {
@include responsive('padding-left', 20px, 40px, 320px, 1200px);
@include responsive('padding-right', 20px, 40px, 320px, 1200px);
@include responsive('padding-top', 20px, 30px, 320px, 1200px);
@include responsive('padding-bottom', 20px, 30px, 320px, 1200px);
}
&-tag {
margin-bottom: px-to-em(16, $body-font-size);
&-p {
display: inline-block;
margin-bottom: 0;
}
}
&-items-wrapper {
display: flex;
flex-wrap: wrap;
lost-utility: clearfix;
}
&-item {
lost-column: 8/8 0 0;
margin-top: px-to-em(16, $body-font-size);
@include for-tablet-portrait-up {
lost-column: 8/16 0 0;
padding-right: 10px;
&.key-course-details-block-item-three-column {
lost-column: 16/16 0 0;
}
}
@include for-tablet-landscape-up {
lost-column: 1/3 0 0;
&.key-course-details-block-item-two-column {
lost-column: 8/16 0 0;
}
}
&:last-child {
margin-bottom: 0;
}
&-p {
font-family: $large-body-font;
font-size: 18px;
&:first-child {
font-weight: bold;
color: $primary-blue;
margin-bottom: 0;
}
}
}
&-option {
background: $light-grey;
@include responsive('padding-left', 20px, 40px, 320px, 1200px);
@include responsive('padding-right', 20px, 40px, 320px, 1200px);
@include responsive('padding-top', 20px, 25px, 320px, 1200px);
@include responsive('padding-bottom', 20px, 25px, 320px, 1200px);
&-p {
margin-bottom: px-to-em(20, $body-font-size);
@include for-largerthan-ipad-portrait {
margin-bottom: 0;
}
&:last-child {
@include for-largerthan-ipad-portrait {
margin-left: auto;
}
}
> a[class*='button'] {
margin-bottom: 0;
@include for-largerthan-ipad-portrait {
min-width: 240px;
margin-left: 10px;
margin-top: -10px;
margin-bottom: -10px;
}
}
}
&-inner {
position: relative;
padding-left: 35px;
display: flex;
flex-direction: column;
lost-utility: clearfix;
@include for-largerthan-ipad-portrait {
flex-direction: row;
}
&:before {
@extend %uod-icons;
content: $uod-icons-information-icon;
font-size: 25px;
position: absolute;
top: 0;
left: 0;
color: $primary-blue;
}
}
}
}
This component forms part of the course page layout and is used to display key information about a course to the user.
The block can be flexible showing information depending on the type of the course. However the first item of the block will contain study options and span the full width of the block on tablet and above.