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.
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"
},
];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),
},
...
},
{% extends '@uol-widget' %}
{% block widget_content %}
{% render '@uol-image-featured--with-caption', { image_featured: widget_image } %}
{% render '@uol-gallery--single-video-with-play-icon', { gallery: widget_video } %}
<div class="uol-widget__content__text uol-rich-text">
{{ widget_content | safe }}
</div>
{% endblock %}
<div class="uol-widget-container uol-widget-container__featured-content">
<div class="uol-widget uol-widget--featured-content uol-widget--featured-video-highlighted">
<div class="uol-widget__left-col uol-widget__left-col--featured-video-highlighted">
<div class="uol-widget__head uol-widget__head--featured-video-highlighted">
<div class="uol-widget__featured-video-highlighted-sub-text">About The University of Leeds</div>
<h2 class="uol-widget__title uol-widget__title--featured-video-highlighted">Build confidence, connections and careers</h2>
<div class="uol-widget__lead uol-widget__lead--featured-video-highlighted">
<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>
</div>
<a class="uol-widget__link uol-widget__link--featured-video-highlighted" href="/">Audio described video</a>
</div>
</div>
<div class="uol-widget__content uol-widget__content--featured-video-highlighted">
<section class="uol-gallery-container" aria-label="Gallery of 1 items">
<div class="uol-gallery uol-gallery--count-1">
<div class="uol-gallery__item uol-gallery__item--video uol-gallery__item--video-play-icon" data-video="https://www.youtube.com/watch?v=j4pt8l7e3u8">
<h2 class="uol-gallery__item__title">Studying in a different country</h2>
<figure class="uol-gallery__figure">
<div class="uol-gallery__image-container">
<img src="#" alt="">
</div>
<figcaption class="uol-gallery__image-caption">Studying in a different country</figcaption>
</figure>
<noscript>
<a href="https://www.youtube.com/watch?v=j4pt8l7e3u8">https://www.youtube.com/watch?v=j4pt8l7e3u8</a>
</noscript>
<div class="uol-gallery__item__content">
<p>Being an international student can be nerve-wracking, but at the University of Leeds we're here to help every step of the way. If you're studying in a new country, there's lots to get your head around, but lots of opportunities too, to make new friends and try new experiences. </p>
<p>Every year more than 6,000 international students choose to study with us, making our campus one of the most diverse and multicultural in the UK. </p>
<p>Join our new Virtual Open Days: <a href='https://virtualopenday.leeds.ac.uk'>https://virtualopenday.leeds.ac.uk</a></p>
</div>
</div>
</div>
</section>
<div class="uol-widget__content__text uol-rich-text">
</div>
</div>
</div>
</div>
.uol-widget--featured-content {
.uol-gallery__image-caption {
padding-left: $spacing-4;
padding-right: $spacing-4;
@include media(">=uol-media-l") {
padding-left: 0;
padding-right: 0;
}
}
}
{
"widget_type": "featured-content",
"widget_title": "Build confidence, connections and careers",
"widget_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_content": "",
"widget_featured_video_highlighted": true,
"widget_featured_video_highlighted_sub_text": "About The University of Leeds",
"widget_video": {
"headingLevel": 2,
"videoPlayIcon": true,
"items": [
{
"title": "Studying in a different country",
"type": "video",
"video": "https://www.youtube.com/watch?v=j4pt8l7e3u8",
"img": {
"caption": "Studying in a different country"
},
"content": "<p>Being an international student can be nerve-wracking, but at the University of Leeds we're here to help every step of the way. If you're studying in a new country, there's lots to get your head around, but lots of opportunities too, to make new friends and try new experiences. </p><p>Every year more than 6,000 international students choose to study with us, making our campus one of the most diverse and multicultural in the UK. </p><p>Join our new Virtual Open Days: <a href='https://virtualopenday.leeds.ac.uk'>https://virtualopenday.leeds.ac.uk</a></p>"
}
]
},
"widget_link": {
"url": "/",
"text": "Audio described video"
}
}