University of Derby

Key Course Details Block 

<!-- Default -->
<section class="key-course-details-block">
    <div class="key-course-details-block-inner">
        <h2 id="course-details">Course details</h2>
        <div>
            <div class="key-course-details-block-item">
                <p class="key-course-details-block-item-p">Study option</p>
                <p class="key-course-details-block-item-p">
                    Full-time / 3 years / £9,250 per year<br />Part-time / up to 6 years / £1,155 per module
                </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>
            <div class="key-course-details-block-item">
                <p class="key-course-details-block-item-p">Study option</p>
                <p class="key-course-details-block-item-p">
                    Full-time / 3 years / £9,250 per year<br />Part-time / up to 6 years / £1,155 per module
                </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>
            <div class="key-course-details-block-item">
                <p class="key-course-details-block-item-p">Study option</p>
                <p class="key-course-details-block-item-p">
                    Full-time / 3 years / £9,250 per year<br />Part-time / up to 6 years / £1,155 per module
                </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>
            <div class="key-course-details-block-item">
                <p class="key-course-details-block-item-p">Study option</p>
                <p class="key-course-details-block-item-p">
                    Full-time / 3 years / £9,250 per year<br />Part-time / up to 6 years / £1,155 per module
                </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>


<!-- Online course -->
<section class="key-course-details-block">
    <div class="key-course-details-block-inner">
        <h2 id="course-details">Course details</h2>
        <div>
            <div class="key-course-details-block-item">
                <p class="key-course-details-block-item-p">Study option</p>
                <p class="key-course-details-block-item-p">
                    Part-time / up to 2 years / £4,500
                </p>
            </div>
            <div class="key-course-details-block-item">
                <p class="key-course-details-block-item-p">Course code</p>
                <p class="key-course-details-block-item-p">
                    N401
                </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">
                    BA (Hons) Top-Up 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">
                    <span class="tag tag-turquoise">Online</span>
                </p>
            </div>

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


<section class="key-course-details-block">
    <div class="key-course-details-block-inner">
        <h2 id="course-details">Course details</h2>
        <div>
            {% for item in items %}
            <div class="key-course-details-block-item">
                <p class="key-course-details-block-item-p">{{ item.label }}</p>
                <p class="key-course-details-block-item-p">
                {% if item.label == 'Location' and item.content == 'Online' %}
                    <span class="tag tag-turquoise">{{ item.content }}</span>
                {% else %}
                    {{ item.content }}
                {% endif %}
                </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 */
{
  "items": [
    {
      "label": "Study option",
      "content": "Full-time / 3 years / £9,250 per year<br />Part-time / up to 6 years / £1,155 per module"
    },
    {
      "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"
    }
  ]
}


/* With Joint Honours */
{
  "items": [
    {
      "label": "Study option",
      "content": "Full-time / 3 years / £9,250 per year<br />Part-time / up to 6 years / £1,155 per module"
    },
    {
      "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 / £9,250 per year<br />Part-time / up to 6 years / £1,155 per module"
    },
    {
      "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 / £9,250 per year<br />Part-time / up to 6 years / £1,155 per module"
    },
    {
      "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/"
}


/* Online course */
{
  "items": [
    {
      "label": "Study option",
      "content": "Part-time / up to 2 years / £4,500"
    },
    {
      "label": "Course code",
      "content": "N401"
    },
    {
      "label": "Course level",
      "content": "Undergraduate"
    },
    {
      "label": "Qualification",
      "content": "BA (Hons) Top-Up degree"
    },
    {
      "label": "Location",
      "content": "Online"
    }
  ]
}
  • Content: 
    /**
 * Use to create a fluid value for a property based on the screen width.
 *
 * Sets a minimum value for the property and creates media queries and interpolated values
 * between the minimum and maximum screen sizes specified.
 *
 * @param $rule {string} The property to make dynamic, eg. 'padding-left'
 * @param $min-value {string} The minimum value for the property, eg. 8px
 * @param $max-value {string} The maximum value for the property, eg. 20px
 * @param $min-size {string} The smallest screen width, at which point the value should be equal to the min-value
 * @param $max-size {string} The largest screen width, at which point the value should equal the max-value
 */
@mixin responsive($rule, $min-value, $max-value, $min-size, $max-size) {

    $size-diff: strip-units($max-value - $min-value);
    $diff: strip-units($max-size - $min-size);

    #{$rule}: $min-value;
    
    @media screen and (min-width: $min-size) {
        #{$rule}: #{'calc(' + $min-value + ' + ' + $size-diff + ' * ((100vw - ' + $min-size + ') / ' + $diff + '))'};
    }
    
    @media screen and (min-width: $max-size) {
        #{$rule}: $max-value;
    }
}

.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;
    }

    &-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);

        > div {
            display: flex;
            flex-wrap: wrap;
            lost-utility: clearfix;
        }
    }

    &-item {
        lost-column: 8/8 0;

        &:nth-child(n+2){
            margin-top: px-to-em(16, $body-font-size);
        }
    
        @include for-tablet-portrait-up {
            lost-column: 8/16 0;

            &:first-child {
                lost-column: 16/16 0;
            }

            /* every 2nd item starting at the 3rd */
            &:nth-child(2n+3) {
                margin-right: 0;
            }
        }

        @include for-tablet-landscape-up {
            lost-column: 1/3 0;

            &:first-child {
                lost-column: 16/16 0;
            }

            /* every 3rd item starting at the 2nd */
            &:nth-child(3n-1) {
                margin-right: 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: 4.7 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]

item

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