Featured Content Widget: With Typography Elements

Guidance

When a user sees the featured content section, they will see a title. They may also see an introduction sentence, an image and an image caption, a video (which will open in the gallery modal), along with some additional text, which may have formatting (paragraphs, bold, links, superscript, subscript, blockquote, cited blockquote).

The component also allows for multiple links (utilising the existing “uol-arrow-link”) to be added, a maximum of no more than twelve is advised.

Developer guidance

Featured content widget: With arrow links

Multiple arrow links can be added to the featured content component, this can be done through the config (adding a title and url for each):

'widget_arrow_links': [
  {
    "title" : "Text link with arrow effect",
    "url" : "https://www.leeds.ac.uk" 
  },
  {
    "title" : "Text link with arrow effect",
    "url" : "https://www.leeds.ac.uk"
  },
];

Featured content widget: With single video

A single video can be added through the config, passing a boolean value (‘videoPlayIcon’: true) will display the alternate video icon. Please see the example here:

{
  'widget_video': {
    'headingLevel': 2,
    'videoPlayIcon': true,
    'items': galleryVideos.slice(2, 3),
  },
  ...
},

Featured content widget: With video highlighted

Important: Please note, this new variant is only intended for use on the corporate website homepage.

This component has a number of different properties that need to be passed to the ‘Featured content widget’ component to enable the different styling of the ‘Video highlighted’ variant. See below in the ‘Developer guidance’ for details of how to implement this. Currently this variant should only be used with the configuration detailed below.

The component must include the following:

• Subtitle (‘widget_featured_video_highlighted_sub_text’)
• Title (‘title’)
• Lead paragraph text (‘lead’)
• Link (‘link’)
• Video section (‘video’)

To enable this variant the following configuration will be required:

{
  'context': {
    'widget_featured_video_highlighted': true,
    'widget_featured_video_highlighted_sub_text': 'About The University of Leeds',
  },
},

The first property ‘widget_featured_video_highlighted’ enables the ‘Featured video highlighted’ different style.

The second property ‘widget_featured_video_highlighted_sub_text’ allows you to add a short piece of text as the first item on the component, in the example it’s shown as ‘About The University of Leeds’. Please note this additional text will only work with this new variant.

Here is the full configuration for this component:

{
  'type': 'featured-content',
  'title': 'Build confidence, connections and careers',
  'lead': '<p>Supported to make an impact on what matters to you, at Leeds you\'ll be welcomed into our warm community with a world of opportunity to feed your passions and potential.</p>',
  'widget_featured_video_highlighted': true,
  'widget_featured_video_highlighted_sub_text': 'About The University of Leeds',
  'video': {
    'headingLevel': 3,
    'videoPlayIcon': true,
    "items": [
      {
        "title": 'Video about The University of Leeds',
        "type": "video",
        "video": "https://www.youtube.com/watch?v=j4pt8l7e3u8",
      }
    ],
  },
  'content': '',
  'link': {
    'url': '/',
    'text': 'Audio described video'
  },
}