University of Leeds Design System v1.0.14.2

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),
  },
  ...
},
{% 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">
    <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>

        </div>

        <div class="uol-widget__content">

            <figure class="uol-featured-image">
                <img class="uol-featured-image__img" src="/placeholders/banner/banner-02.jpg" alt="A descriptive alt text">

                <figcaption class="uol-featured-image__caption">
                    Image caption. May be used for &copy; notices
                </figcaption>

            </figure>

            <div class="uol-widget__content__text uol-rich-text">
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
                <blockquote>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                </blockquote>
                <p>Magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, <strong>qui dolorem ipsum quia dolor sit amet</strong>.</p>
                <p>Consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore <a href="/some-featured-content-link">et dolore magnam aliquam quaerat voluptatem</a>.</p>
            </div>

        </div>
    </div>
</div>
  • Content: 
    .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;
    }
  }
}
  • URL: /components/raw/uol-widget-featured-content/featured-content.scss
  • Filesystem Path: src/library/03-patterns/widgets/featured-content/featured-content.scss
  • Size: 222 Bytes 
{
  "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>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p><blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p></blockquote><p>Magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, <strong>qui dolorem ipsum quia dolor sit amet</strong>.</p><p>Consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore <a href=\"/some-featured-content-link\">et dolore magnam aliquam quaerat voluptatem</a>.</p>",
  "widget_image": {
    "src": "/placeholders/banner/banner-02.jpg",
    "alt": "A descriptive alt text",
    "caption": "Image caption. May be used for &copy; notices"
  }
}