University of Leeds Design System v1.0.15

Year Of Entry: Bespoke Label

Guidance

This component is used within the @uol-template-page to display the year of entry and an optional link.

The Year of Entry is to be displayed at the top of each course page. It includes an optional link which can take the user from the course page of the current academic year to the course page of the following year or vice versa.

When to use

Use only with the @uol-template-page pattern.

When not to use

  • Do not use as a standalone component outside of the @uol-template-page pattern.
  • Do not use within page content eg. document pages, blog posts, news etc.

Developer guidance

This component has three parameters. The year is compulsory and must be in full year format (eg. 2022). If the following year’s information is available, enter this as the alternate_year value. If alternate_year is specified you must specify the url of the relevant page in the alternate_year_url parameter aswell.

‘year’: compulsory, in full year format (eg. 2022)

‘alternate_year’: optional, in full year format (eg. 2023)

‘alternate_year_url’: compulsory if alternate_year is supplied: URL of following year’s equivalent course page 

'context': {
  'year': '2022',
  'alternate_year': '2023',
  'alternate_year_url': '/some-link-here'
}
<div class="uol-year-of-entry">
  <h2 class="uol-year-of-entry__title">
    {% if label %}{{ label }}{% else %}Year of entry{% endif %}
     <span class="uol-year-of-entry__date">{{ year }}</span>
  </h2>
  {% if alternate_year %}
    <a href="{{ alternate_year_url }}" class="uol-year-of-entry__link">{{ alternate_year }} course information</a>
  {% endif %}
</div>
 
<div class="uol-year-of-entry">
    <h2 class="uol-year-of-entry__title">
        Available for
        <span class="uol-year-of-entry__date">September 2023</span>
    </h2>

</div>
  • Content: 
    .uol-year-of-entry {
  font-variant-numeric: lining-nums;
  margin-bottom: $spacing-2;
}

  .uol-year-of-entry__title {
    @extend %text-size-heading-6;

    font-weight: $font-weight-bold--sans-serif;
    margin: $spacing-2 0;
    color: $color-font--dark;
  }

  .uol-year-of-entry__date {
    @extend %text-size-heading-6;

    font-weight: $font-weight-medium--sans-serif;
    color: $color-font;
  }

  .uol-year-of-entry__link {
    @extend %text-size-paragraph;

    display: inline-block;
    font-weight: $font-weight-medium--sans-serif;
    text-decoration: none;
  }
  • URL: /components/raw/uol-year-of-entry/_year-of-entry.scss
  • Filesystem Path: src/library/02-components/year-of-entry/_year-of-entry.scss
  • Size: 579 Bytes 
{
  "year": "September 2023",
  "label": "Available for"
}