University of Derby

Key Course Details Block: 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>
 
<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": "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/"
}
  • 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]