University of Leeds Design System v1.0.14.2

Featured Content Widget: With Arrow Links

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>

            <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">

            <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>
  • 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>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"
    }
  ]
}