University of Leeds Design System v1.0.13

News And Events Widget: With Image And Summary Only

No notes defined.

{% extends '@uol-widget' %}

{% block widget_content %}
  {% render '@uol-cards', { 
    cards: cards
  } %}
{% endblock %}
 
<div class="uol-widget-container">
    <div class="uol-widget uol-widget--news-events">

        <div class="uol-widget__left-col">

            <div class="uol-widget__head">

                <h2 class="uol-widget__title">News and Events 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>

                <a class="uol-widget__link" href="/news">View all news</a>

            </div>

        </div>

        <div class="uol-widget__content">

            <ul class="uol-cards  uol-cards--count-6 uol-cards--image-layout ">

                <li class="uol-cards__card uol-cards__card--with-image">
                    <div class="uol-cards__card__text-wrapper">
                        <h3 class="uol-cards__card__title">
                            <a class="uol-cards__card__link " href="#">

                                Leeds signs up to tackle waste in fashion

                            </a>
                        </h3>

                        <time class="uol-cards__card__date" datetime="2021-05-07">7 May 2021</time>

                        <p class="uol-cards__card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus.</p>

                    </div>

                    <div class="uol-cards__card__image-wrapper">

                        <img class="uol-cards__card__image" src="/placeholders/banner/banner-02.jpg" alt="A super informative description">

                    </div>

                </li>

                <li class="uol-cards__card uol-cards__card--with-image">
                    <div class="uol-cards__card__text-wrapper">
                        <h3 class="uol-cards__card__title">
                            <a class="uol-cards__card__link " href="#">

                                Northern universities launch new investment company

                            </a>
                        </h3>

                        <time class="uol-cards__card__date" datetime="2021-05-07">7 May 2021</time>

                        <p class="uol-cards__card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus.</p>

                    </div>

                    <div class="uol-cards__card__image-wrapper">

                        <img class="uol-cards__card__image" src="/placeholders/banner/banner-05.jpg" alt="A super informative description">

                    </div>

                </li>

                <li class="uol-cards__card uol-cards__card--with-image">
                    <div class="uol-cards__card__text-wrapper">
                        <h3 class="uol-cards__card__title">
                            <a class="uol-cards__card__link " href="#">

                                Inspired by nature, the research to develop a new load-bearing material

                            </a>
                        </h3>

                        <time class="uol-cards__card__date" datetime="2021-05-07">7 May 2021</time>

                        <p class="uol-cards__card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus.</p>

                    </div>

                    <div class="uol-cards__card__image-wrapper">

                        <img class="uol-cards__card__image" src="/placeholders/banner/banner-03.jpg" alt="A super informative description">

                    </div>

                </li>

                <li class="uol-cards__card uol-cards__card--with-image">
                    <div class="uol-cards__card__text-wrapper">
                        <h3 class="uol-cards__card__title">
                            <a class="uol-cards__card__link " href="#">

                                A short title

                            </a>
                        </h3>

                        <time class="uol-cards__card__date" datetime="2021-05-07">7 May 2021</time>

                        <p class="uol-cards__card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus.</p>

                    </div>

                    <div class="uol-cards__card__image-wrapper">

                        <img class="uol-cards__card__image" src="/placeholders/banner/banner-01.jpg" alt="A super informative description">

                    </div>

                </li>

                <li class="uol-cards__card uol-cards__card--with-image">
                    <div class="uol-cards__card__text-wrapper">
                        <h3 class="uol-cards__card__title">
                            <a class="uol-cards__card__link " href="#">

                                Leeds signs up to tackle waste in fashion

                            </a>
                        </h3>

                        <time class="uol-cards__card__date" datetime="2021-05-07">7 May 2021</time>

                        <p class="uol-cards__card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus.</p>

                    </div>

                    <div class="uol-cards__card__image-wrapper">

                        <img class="uol-cards__card__image" src="/placeholders/banner/banner-02.jpg" alt="">

                    </div>

                </li>

                <li class="uol-cards__card uol-cards__card--with-image">
                    <div class="uol-cards__card__text-wrapper">
                        <h3 class="uol-cards__card__title">
                            <a class="uol-cards__card__link " href="#">

                                Vice chancellor&#39;s latest blog: Building a better future

                            </a>
                        </h3>

                        <time class="uol-cards__card__date" datetime="2021-05-07">7 May 2021</time>

                        <p class="uol-cards__card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus.</p>

                    </div>

                    <div class="uol-cards__card__image-wrapper">

                        <img class="uol-cards__card__image" src="/placeholders/banner/banner-03.jpg" alt="">

                    </div>

                </li>

            </ul>

        </div>
    </div>
</div>
 
{
  "widget_type": "news-events",
  "widget_title": "News and Events 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_link": {
    "url": "/news",
    "text": "View all news"
  },
  "cards": {
    "items": [
      {
        "image": {
          "src": "/placeholders/banner/banner-02.jpg",
          "alt": "A super informative description"
        },
        "url": "#",
        "title": "Leeds signs up to tackle waste in fashion",
        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus.",
        "date": "2021-05-07"
      },
      {
        "image": {
          "src": "/placeholders/banner/banner-05.jpg",
          "alt": "A super informative description"
        },
        "url": "#",
        "title": "Northern universities launch new investment company",
        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus.",
        "date": "2021-05-07"
      },
      {
        "image": {
          "src": "/placeholders/banner/banner-03.jpg",
          "alt": "A super informative description"
        },
        "url": "#",
        "title": "Inspired by nature, the research to develop a new load-bearing material",
        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus.",
        "date": "2021-05-07"
      },
      {
        "image": {
          "src": "/placeholders/banner/banner-01.jpg",
          "alt": "A super informative description"
        },
        "url": "#",
        "title": "A short title",
        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus.",
        "date": "2021-05-07"
      },
      {
        "image": {
          "src": "/placeholders/banner/banner-02.jpg",
          "text": "A super informative description"
        },
        "url": "#",
        "title": "Leeds signs up to tackle waste in fashion",
        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus.",
        "date": "2021-05-07"
      },
      {
        "image": {
          "src": "/placeholders/banner/banner-03.jpg",
          "text": "A super informative description"
        },
        "url": "#",
        "title": "Vice chancellor's latest blog: Building a better future",
        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus.",
        "date": "2021-05-07"
      }
    ],
    "image_layout": true
  }
}