University of Leeds Design System v1.0.18

Content Block: link full content block

Content block overview

The content block is a component built initially for the UoL homepage but likely to be extended into other components. Currently this is being used on the new homepage concept in the task banner, and likely to be extended in to Student Stories and other homepage components. It’s purpose is to ensure typography and styling consistency.

The component is simple and only has one mandatory field, and several optional ones as listed below.

Content block elements

Items appear in the following order within the content block.

topic

optional text field

heading

mandatory field, consists of two parameters.

  • ‘level’ mandatory parameter denoting the heading level (‘2’ will generate a h2 tag, ‘3’ for h3 3 etc. Can support h1 to h4, configure heading level to ensure correct heading flow throughout the document).
  • ‘title’ text field

If the content block doesn’t have a link or an arrow link (see below), the whole block can link to a specified URL.

To do this add the following parameters to the heading:

  • ‘title_link’: true,
  • ‘title_href’: (link URL)

date

optional date field (text field, use format dd/mm/yyyy)

copy

optional text field for body content

optional field which displays as a standard link, consists of two parameters:

  • ‘url’ link url
  • ‘title’ text to act as active link text

optional field which displays as a link with animated arrow, consists of two parameters:

  • ‘url’ link url
  • ‘title’ text to act as active link text

button

uses @uol-button).

Config example 1

The following configuration shows all possible elements which can appear in this component.

'context': {
  'name': "all",
  'label': "all",
  'context': {
    'topic': 'Optional topic',
    'heading': {
      'level': '2',
      'title': 'Mandatory title'
    },
    'date': '01/01/2000',
    'copy': 'Optional body copy',
    'link': {
      'url': '#',
      'title': 'Optional text link'
    },
    'arrowLink': {
      'url': '#',
      'title': 'Optional text link with arrow'
    },
    'button': {
      'style': 'default',
      'type': 'submit',
      'content': 'Optional CTA button'
    },
  }
}

Config example 2

The following configuration shows an example where a link is added to the title enabling the whole block to be an active link.

'context': {
  'topic': 'Optional topic',
  'heading': {
    'level': '2',
    'title': 'Link clickable content block',
    'title_link': true,
    'title_href': '#'
  },
  'date': '01/01/2000',
  'copy': 'Optional body copy',
}
<div {% if id %}id="{{ id }}"{% endif %} class="uol-content-block">

  {% if topic %}<p class="uol-content-block__topic">{{topic}}</p>{% endif %}

    {% set headingTag = 'h' + heading.level if heading.level else 'h3' %}
    <{{ headingTag }} class="uol-content-block__heading">
      {% if heading.title_link %}<a href="{{ heading.title_href }}">{% endif %}
        {{ heading.title }}
      {% if heading.title_link %}</a>{% endif %}
    </{{ headingTag }}>

  {% if date %}<p class="uol-content-block__date">{{date}}</p>{% endif %}

  {% if copy %}<p class="uol-content-block__copy">{{copy}}</p>{% endif %}

  {% if link %}<p><a href="{{link.url}}" class="uol-content-block__link">{{link.title}}</a></p>{% endif %}

  {% if arrowLink %}<p><a href="{{arrowLink.url}}" class="uol-content-block__arrow-link uol-arrow-link">{{arrowLink.title}}</a></p>{% endif %}

  {% if button %}{% render '@uol-button', button %}{% endif %}
 </div>
 
<div class="uol-content-block">

    <p class="uol-content-block__topic">Optional topic</p>

    <h2 class="uol-content-block__heading">
        <a href="#">
            Link clickable content block
        </a>
    </h2>

    <p class="uol-content-block__date">01/01/2000</p>

    <p class="uol-content-block__copy">Optional body copy</p>

</div>
  • Content: 
    // adding comment line to initiate dev build again

.uol-content-block {
  position: relative;

  * {
    margin: 0 0 $spacing-4;
    max-width: 674px;
  }

  h1 {@extend .uol-typography-heading-1;}

  h2 {@extend .uol-typography-heading-2;}

  h3 {@extend .uol-typography-heading-3;}

  h4 {@extend .uol-typography-heading-4;}

  &__heading {
    a {
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
      }
    }
  }
  &__topic {
    @extend .uol-typography-paragraph-small;
    margin-bottom: $spacing-2;
  }

  &__date {
    @extend .uol-typography-paragraph-small;
  }

  &__copy {
    @extend .uol-typography-paragraph;
  }

  &__link {
    @extend .uol-typography-paragraph;

    @include link_focus();
    font-weight: 600;
    display: block;
  }

  &__arrow-link {
    @extend .uol-typography-paragraph;

    @include link_focus();
    font-weight: 600;
    display: block;
  }

  .uol-button {
    margin-top: $spacing-2;
  }

}
  • URL: /components/raw/uol-content-block/_content-block.scss
  • Filesystem Path: src/library/02-components/content-block/_content-block.scss
  • Size: 1.1 KB 
{
  "heading": {
    "level": "2",
    "title": "Link clickable content block",
    "title_link": true,
    "title_href": "#"
  },
  "topic": "Optional topic",
  "date": "01/01/2000",
  "copy": "Optional body copy"
}