University of Derby

Key Course Details Block 

<!-- Default UG course -->
<section class="key-course-details-block">
    <div class="key-course-details-block-inner">
        <div class="key-course-details-block-tag">
            <div class="tag tag-strawberry">Available through clearing</div>
            <p class="key-course-details-block-tag-p"> - <a href="tel:01234123456">Call 01234123456</a></p>
        </div>
        <h2 id="course-details">Course details</h2>
        <div class="key-course-details-block-items-wrapper">
            <div class="key-course-details-block-item key-course-details-block-item-three-column">
                <p class="key-course-details-block-item-p">Study option</p>
                <p class="key-course-details-block-item-p">
                    Full-time: 3 years, Part-time: up to 6 years, Online: up to 6 years <a href="" class="disable-underlines">†</a>
                </p>
            </div>
            <div class="key-course-details-block-item">
                <p class="key-course-details-block-item-p">UK fee</p>
                <p class="key-course-details-block-item-p">
                    £9,250 per year
                </p>
            </div>
            <div class="key-course-details-block-item">
                <p class="key-course-details-block-item-p">International fee</p>
                <p class="key-course-details-block-item-p">
                    £12,500 per year
                </p>
            </div>
            <div class="key-course-details-block-item">
                <p class="key-course-details-block-item-p">UCAS points</p>
                <p class="key-course-details-block-item-p">
                    104
                </p>
            </div>
            <div class="key-course-details-block-item">
                <p class="key-course-details-block-item-p">UCAS code</p>
                <p class="key-course-details-block-item-p">
                    C100
                </p>
            </div>
            <div class="key-course-details-block-item">
                <p class="key-course-details-block-item-p">Course level</p>
                <p class="key-course-details-block-item-p">
                    Undergraduate
                </p>
            </div>
            <div class="key-course-details-block-item">
                <p class="key-course-details-block-item-p">Qualification</p>
                <p class="key-course-details-block-item-p">
                    BSc (Hons) degree
                </p>
            </div>
            <div class="key-course-details-block-item">
                <p class="key-course-details-block-item-p">Location</p>
                <p class="key-course-details-block-item-p">
                    Kedleston Road site, Derby Campus
                </p>
            </div>

        </div>
    </div>
</section>


<!-- With Joint Honours -->
<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 key-course-details-block-item-three-column">
                <p class="key-course-details-block-item-p">Study option</p>
                <p class="key-course-details-block-item-p">
                    Full-time: 3 years, Part-time: up to 6 years, Online: up to 6 years
                </p>
            </div>
            <div class="key-course-details-block-item">
                <p class="key-course-details-block-item-p">UK fee</p>
                <p class="key-course-details-block-item-p">
                    £9,250 per year
                </p>
            </div>
            <div class="key-course-details-block-item">
                <p class="key-course-details-block-item-p">International fee</p>
                <p class="key-course-details-block-item-p">
                    £12,500 per year
                </p>
            </div>
            <div class="key-course-details-block-item">
                <p class="key-course-details-block-item-p">UCAS points</p>
                <p class="key-course-details-block-item-p">
                    104
                </p>
            </div>
            <div class="key-course-details-block-item">
                <p class="key-course-details-block-item-p">UCAS code</p>
                <p class="key-course-details-block-item-p">
                    C100
                </p>
            </div>
            <div class="key-course-details-block-item">
                <p class="key-course-details-block-item-p">Course level</p>
                <p class="key-course-details-block-item-p">
                    Undergraduate
                </p>
            </div>
            <div class="key-course-details-block-item">
                <p class="key-course-details-block-item-p">Qualification</p>
                <p class="key-course-details-block-item-p">
                    BSc (Hons) degree
                </p>
            </div>
            <div class="key-course-details-block-item">
                <p class="key-course-details-block-item-p">Location</p>
                <p class="key-course-details-block-item-p">
                    Kedleston Road site, Derby Campus
                </p>
            </div>

        </div>
    </div>
    <div>
        <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">
                    <a href="https://www.derby.ac.uk/biology-and-zoology-courses/biology-joint-honours/" class="button-outline" role="button" tabindex="0" data-scroll>
        View Joint Honours options
            <span class="button-overlay"><span>
                        View Joint Honours options
                    </span></span></a> </p>
            </div>
        </div>
    </div>
</section>


<!-- With foundation year -->
<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 key-course-details-block-item-three-column">
                <p class="key-course-details-block-item-p">Study option</p>
                <p class="key-course-details-block-item-p">
                    Full-time: 3 years, Part-time: up to 6 years, Online: up to 6 years
                </p>
            </div>
            <div class="key-course-details-block-item">
                <p class="key-course-details-block-item-p">UK fee</p>
                <p class="key-course-details-block-item-p">
                    £9,250 per year
                </p>
            </div>
            <div class="key-course-details-block-item">
                <p class="key-course-details-block-item-p">International fee</p>
                <p class="key-course-details-block-item-p">
                    £12,500 per year
                </p>
            </div>
            <div class="key-course-details-block-item">
                <p class="key-course-details-block-item-p">UCAS points</p>
                <p class="key-course-details-block-item-p">
                    104
                </p>
            </div>
            <div class="key-course-details-block-item">
                <p class="key-course-details-block-item-p">UCAS code</p>
                <p class="key-course-details-block-item-p">
                    C100
                </p>
            </div>
            <div class="key-course-details-block-item">
                <p class="key-course-details-block-item-p">Course level</p>
                <p class="key-course-details-block-item-p">
                    Undergraduate
                </p>
            </div>
            <div class="key-course-details-block-item">
                <p class="key-course-details-block-item-p">Qualification</p>
                <p class="key-course-details-block-item-p">
                    BSc (Hons) degree
                </p>
            </div>
            <div class="key-course-details-block-item">
                <p class="key-course-details-block-item-p">Location</p>
                <p class="key-course-details-block-item-p">
                    Kedleston Road site, Derby Campus
                </p>
            </div>

        </div>
    </div>
    <div>
        <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">
                    <a href="" class="button-outline" role="button" tabindex="0" data-scroll>
        View with foundation year option
            <span class="button-overlay"><span>
                        View with foundation year option
                    </span></span></a> </p>
            </div>
        </div>
    </div>
</section>


<!-- With Joint Honours and foundation year -->
<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 key-course-details-block-item-three-column">
                <p class="key-course-details-block-item-p">Study option</p>
                <p class="key-course-details-block-item-p">
                    Full-time: 3 years, Part-time: up to 6 years, Online: up to 6 years
                </p>
            </div>
            <div class="key-course-details-block-item">
                <p class="key-course-details-block-item-p">UK fee</p>
                <p class="key-course-details-block-item-p">
                    £9,250 per year
                </p>
            </div>
            <div class="key-course-details-block-item">
                <p class="key-course-details-block-item-p">International fee</p>
                <p class="key-course-details-block-item-p">
                    £12,500 per year
                </p>
            </div>
            <div class="key-course-details-block-item">
                <p class="key-course-details-block-item-p">UCAS points</p>
                <p class="key-course-details-block-item-p">
                    104
                </p>
            </div>
            <div class="key-course-details-block-item">
                <p class="key-course-details-block-item-p">UCAS code</p>
                <p class="key-course-details-block-item-p">
                    C100
                </p>
            </div>
            <div class="key-course-details-block-item">
                <p class="key-course-details-block-item-p">Course level</p>
                <p class="key-course-details-block-item-p">
                    Undergraduate
                </p>
            </div>
            <div class="key-course-details-block-item">
                <p class="key-course-details-block-item-p">Qualification</p>
                <p class="key-course-details-block-item-p">
                    BSc (Hons) degree
                </p>
            </div>
            <div class="key-course-details-block-item">
                <p class="key-course-details-block-item-p">Location</p>
                <p class="key-course-details-block-item-p">
                    Kedleston Road site, Derby Campus
                </p>
            </div>

        </div>
    </div>
    <div>
        <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">
                    <a href="https://www.derby.ac.uk/biology-and-zoology-courses/biology-joint-honours/" class="button-outline" role="button" tabindex="0" data-scroll>
        View Joint Honours options
            <span class="button-overlay"><span>
                        View Joint Honours options
                    </span></span></a> </p>
            </div>
        </div>
        <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">
                    <a href="https://www.derby.ac.uk/biology-and-zoology-courses/biology-joint-honours/" class="button-outline" role="button" tabindex="0" data-scroll>
        View with foundation year option
            <span class="button-overlay"><span>
                        View with foundation year option
                    </span></span></a> </p>
            </div>
        </div>
    </div>
</section>


<!-- Professional course -->
<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. 
#}
 
/* Default UG course */
{
  "items": [
    {
      "label": "Study option",
      "content": "Full-time: 3 years, Part-time: up to 6 years, Online: up to 6 years <a href=\"\" class=\"disable-underlines\">†</a>",
      "size": "three-column"
    },
    {
      "label": "UK fee",
      "content": "£9,250 per year"
    },
    {
      "label": "International fee",
      "content": "£12,500 per year"
    },
    {
      "label": "UCAS points",
      "content": "104"
    },
    {
      "label": "UCAS code",
      "content": "C100"
    },
    {
      "label": "Course level",
      "content": "Undergraduate"
    },
    {
      "label": "Qualification",
      "content": "BSc (Hons) degree"
    },
    {
      "label": "Location",
      "content": "Kedleston Road site, Derby Campus"
    }
  ],
  "tag": {
    "label": "Available through clearing",
    "color": "strawberry",
    "text": "Call 01234123456",
    "href": "tel:01234123456"
  }
}


/* With Joint Honours */
{
  "items": [
    {
      "label": "Study option",
      "content": "Full-time: 3 years, Part-time: up to 6 years, Online: up to 6 years",
      "size": "three-column"
    },
    {
      "label": "UK fee",
      "content": "£9,250 per year"
    },
    {
      "label": "International fee",
      "content": "£12,500 per year"
    },
    {
      "label": "UCAS points",
      "content": "104"
    },
    {
      "label": "UCAS code",
      "content": "C100"
    },
    {
      "label": "Course level",
      "content": "Undergraduate"
    },
    {
      "label": "Qualification",
      "content": "BSc (Hons) degree"
    },
    {
      "label": "Location",
      "content": "Kedleston Road site, Derby Campus"
    }
  ],
  "jointHonoursUrl": "https://www.derby.ac.uk/biology-and-zoology-courses/biology-joint-honours/"
}


/* With foundation year */
{
  "items": [
    {
      "label": "Study option",
      "content": "Full-time: 3 years, Part-time: up to 6 years, Online: up to 6 years",
      "size": "three-column"
    },
    {
      "label": "UK fee",
      "content": "£9,250 per year"
    },
    {
      "label": "International fee",
      "content": "£12,500 per year"
    },
    {
      "label": "UCAS points",
      "content": "104"
    },
    {
      "label": "UCAS code",
      "content": "C100"
    },
    {
      "label": "Course level",
      "content": "Undergraduate"
    },
    {
      "label": "Qualification",
      "content": "BSc (Hons) degree"
    },
    {
      "label": "Location",
      "content": "Kedleston Road site, Derby Campus"
    }
  ],
  "withFoundationYearUrl": "https://www.derby.ac.uk/biology-and-zoology-courses/biology-bsc-hons-foundation/"
}


/* With Joint Honours and foundation year */
{
  "items": [
    {
      "label": "Study option",
      "content": "Full-time: 3 years, Part-time: up to 6 years, Online: up to 6 years",
      "size": "three-column"
    },
    {
      "label": "UK fee",
      "content": "£9,250 per year"
    },
    {
      "label": "International fee",
      "content": "£12,500 per year"
    },
    {
      "label": "UCAS points",
      "content": "104"
    },
    {
      "label": "UCAS code",
      "content": "C100"
    },
    {
      "label": "Course level",
      "content": "Undergraduate"
    },
    {
      "label": "Qualification",
      "content": "BSc (Hons) degree"
    },
    {
      "label": "Location",
      "content": "Kedleston Road site, Derby Campus"
    }
  ],
  "jointHonoursUrl": "https://www.derby.ac.uk/biology-and-zoology-courses/biology-joint-honours/",
  "withFoundationYearUrl": "https://www.derby.ac.uk/biology-and-zoology-courses/biology-bsc-hons-foundation/"
}


/* Professional course */
{
  "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"
    }
  ]
}
  • Content: 
    .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;
            }
        }
    }
}
  • URL: /components/raw/key-course-details-block/key-course-details-block.scss
  • Filesystem Path: components/components/key-course-details-block/key-course-details-block.scss
  • Size: 3.6 KB

Key Course Details Block

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.

Key Features

  • Provides the user bitesize useful information
  • Optional promotion of alternative pathways for the course e.g. Joint Honour and/or with Foundation Year

Properties

Key Course Details Block

  • items [required, Array of item]
  • jointHonoursUrl [required, block]
  • withFoundationYearUrl [required, block]
  • blockType [optional, string, default Course]

item

  • label [required, string]
  • content [required, string]