University of Leeds Design System v1.0.16

Content Block: Default

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

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

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'
    },
  }
}
<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">{{heading.title}}</{{ 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">

    <h2 class="uol-content-block__heading">Mandatory title</h2>

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

.uol-content-block {
  * {
    margin: 0 0 $spacing-4;
    
  }
  
  h1 {@extend .uol-typography-heading-1;}
  
  h2 {@extend .uol-typography-heading-2;}

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

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

  &__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: 832 Bytes 
{
  "heading": {
    "level": "2",
    "title": "Mandatory title"
  }
}