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">
<div class="uol-widget__left-col">
<div class="uol-widget__head">
<h2 class="uol-widget__title">Featured content widget</h2>
<div class="uol-widget__lead">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem sequi animi exercitationem sunt. Eos consequatur, eveniet nulla beatae nisi voluptatibus.</p>
</div>
</div>
<ul class="uol-widget__arrow-links">
<li class="uol-widget__arrow-links-item"><a href="https://www.leeds.ac.uk" class="uol-widget__arrow-link uol-arrow-link">Text link with arrow effect</a></li>
<li class="uol-widget__arrow-links-item"><a href="https://www.leeds.ac.uk" class="uol-widget__arrow-link uol-arrow-link">Text link with arrow effect</a></li>
<li class="uol-widget__arrow-links-item"><a href="https://www.leeds.ac.uk" class="uol-widget__arrow-link uol-arrow-link">Text link with arrow effect</a></li>
<li class="uol-widget__arrow-links-item"><a href="https://www.leeds.ac.uk" class="uol-widget__arrow-link uol-arrow-link">Text link with arrow effect</a></li>
<li class="uol-widget__arrow-links-item"><a href="https://www.leeds.ac.uk" class="uol-widget__arrow-link uol-arrow-link">Text link with arrow effect</a></li>
<li class="uol-widget__arrow-links-item"><a href="https://www.leeds.ac.uk" class="uol-widget__arrow-link uol-arrow-link">Text link with arrow effect</a></li>
</ul>
</div>
<div class="uol-widget__content">
<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">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam cumque harum assumenda itaque optio eligendi fugit dolorem dolor accusamus hic, ut facere dicta temporibus, placeat, nam mollitia amet quos praesentium!</p>
</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": "Featured content widget",
"widget_lead": "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem sequi animi exercitationem sunt. Eos consequatur, eveniet nulla beatae nisi voluptatibus.</p>",
"widget_content": "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam cumque harum assumenda itaque optio eligendi fugit dolorem dolor accusamus hic, ut facere dicta temporibus, placeat, nam mollitia amet quos praesentium!</p>",
"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"
},
{
"title": "Text link with arrow effect",
"url": "https://www.leeds.ac.uk"
},
{
"title": "Text link with arrow effect",
"url": "https://www.leeds.ac.uk"
},
{
"title": "Text link with arrow effect",
"url": "https://www.leeds.ac.uk"
},
{
"title": "Text link with arrow effect",
"url": "https://www.leeds.ac.uk"
}
],
"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>"
}
]
}
}