University of Leeds Design System v1.0.14.2

News Events Search And List: News With Featured Item

No notes defined.

{% render '@uol-form-pattern', { form: form } %}

{% render '@uol-results-count', { search_term: search_term, results_items: results_items} %}

{% render '@uol-results-items', { items: results_items } %}

{% render '@uol-pagination', { pagination: pagination } %}
 
<div class="uol-form__container   ">

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

        <form class="uol-form" action="/example-form-action" role=search>

            <div class="uol-form__input-group  uol-form__input-group--block">

            </div>

            <div class="uol-form--button-inline">

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

                    <div class="uol-form__input-container 
">

                        <label class="uol-form__input-label" for="search-term">
                            <span class="uol-form__input-label__text">Search news by keyword (required)</span>

                        </label>

                        <div class="uol-form__input-wrapper
               uol-form__input-wrapper--search
               uol-form__input-wrapper--with-icon " data-field-invalid=false>

                            <!--  -->

                            <input class="uol-form__input  uol-form__input--search" type="search" id="search-term" name="search-term" value="" minlength="2" autocomplete="off" required>

                            <!--  -->
                        </div>

                    </div>

                </div>

                <div class="uol-form__button-wrapper">
                    <button class="uol-button uol-button--primary
    " type="submit">Search</button>

                </div>

            </div>

        </form>

    </div>

</div>

<div class="uol-results-count">

</div>

<div class="uol-results-items">

    <article class="uol-results-items__item">

        <div class="uol-results-items__item__featured">
            <div class="uol-results-items__item__featured__text">Featured news</div>
        </div>

        <div class="uol-results-items__item__content-wrapper">

            <div class="uol-results-items__item__image-container">
                <img class="uol-results-items__item__img" src="/placeholders/banner/banner-01.jpg" alt="A super informative description">
            </div>

            <div class="uol-results-items__item__text-container">
                <div class="uol-results-items__item__text-container__inner">
                    <h2 class="uol-results-items__item__title">
                        <a href="/result-link-1" class="uol-results-items__item__link">Infertility poses major threat to biodiversity during climate change<span class="hide-accessible">: Featured news</span></a>
                    </h2>

                    <dl class="uol-results-items__item__meta">

                        <div class="uol-results-items__item__meta__group">
                            <dt class="uol-results-items__item__meta__label">Published</dt>
                            <dd class="uol-results-items__item__meta__data">
                                Sunday 9th May, 2021
                            </dd>
                        </div>

                        <div class="uol-results-items__item__meta__group">
                            <dt class="uol-results-items__item__meta__label">Categories</dt>

                            <dd class="uol-results-items__item__meta__data">Environment</dd>

                            <dd class="uol-results-items__item__meta__data">Global</dd>

                            <dd class="uol-results-items__item__meta__data">Science</dd>

                        </div>

                    </dl>

                    <p class="uol-results-items__item__summary">Heat-induced male infertility will see some species succumb to the effects of climate change earlier than thought, new research warns.</p>

                </div>
            </div>

        </div>

    </article>

    <article class="uol-results-items__item">

        <div class="uol-results-items__item__content-wrapper">

            <div class="uol-results-items__item__image-container">
                <img class="uol-results-items__item__img" src="/placeholders/banner/banner-02.jpg" alt="A super informative description">
            </div>

            <div class="uol-results-items__item__text-container">
                <div class="uol-results-items__item__text-container__inner">
                    <h2 class="uol-results-items__item__title">
                        <a href="/result-link-2" class="uol-results-items__item__link">Vice-Chancellor&apos;s latest blog: Why humanity needs the arts</a>
                    </h2>

                    <dl class="uol-results-items__item__meta">

                        <div class="uol-results-items__item__meta__group">
                            <dt class="uol-results-items__item__meta__label">Published</dt>
                            <dd class="uol-results-items__item__meta__data">
                                Saturday 8th May, 2021
                            </dd>
                        </div>

                        <div class="uol-results-items__item__meta__group">
                            <dt class="uol-results-items__item__meta__label">Categories</dt>

                            <dd class="uol-results-items__item__meta__data">University</dd>

                            <dd class="uol-results-items__item__meta__data">Arts &amp; culture</dd>

                        </div>

                    </dl>

                    <p class="uol-results-items__item__summary">The inaugural Edith Pechey online lecture with guest speaker Professor Simone Buitendijk, University of Leeds Vice Chancellor.</p>

                </div>
            </div>

        </div>

    </article>

    <article class="uol-results-items__item">

        <div class="uol-results-items__item__content-wrapper">

            <div class="uol-results-items__item__image-container">
                <img class="uol-results-items__item__img" src="/placeholders/banner/banner-03.jpg" alt="A super informative description">
            </div>

            <div class="uol-results-items__item__text-container">
                <div class="uol-results-items__item__text-container__inner">
                    <h2 class="uol-results-items__item__title">
                        <a href="/result-link-3" class="uol-results-items__item__link">Species invasions can teach us about COVID-19</a>
                    </h2>

                    <dl class="uol-results-items__item__meta">

                        <div class="uol-results-items__item__meta__group">
                            <dt class="uol-results-items__item__meta__label">Published</dt>
                            <dd class="uol-results-items__item__meta__data">
                                Friday 7th May, 2021
                            </dd>
                        </div>

                        <div class="uol-results-items__item__meta__group">
                            <dt class="uol-results-items__item__meta__label">Categories</dt>

                            <dd class="uol-results-items__item__meta__data">Health</dd>

                            <dd class="uol-results-items__item__meta__data">Science</dd>

                        </div>

                    </dl>

                    <p class="uol-results-items__item__summary">Invasions by alien insect and animal species have much in common with outbreaks of infectious diseases and can tell us a lot about how pandemics spread, according to new research.</p>

                </div>
            </div>

        </div>

    </article>

    <article class="uol-results-items__item">

        <div class="uol-results-items__item__content-wrapper">

            <div class="uol-results-items__item__text-container">
                <div class="uol-results-items__item__text-container__inner">
                    <h2 class="uol-results-items__item__title">
                        <a href="/result-link-4" class="uol-results-items__item__link">African rainforests can resist severe heat and drought</a>
                    </h2>

                    <dl class="uol-results-items__item__meta">

                        <div class="uol-results-items__item__meta__group">
                            <dt class="uol-results-items__item__meta__label">Published</dt>
                            <dd class="uol-results-items__item__meta__data">
                                Friday 7th May, 2021
                            </dd>
                        </div>

                        <div class="uol-results-items__item__meta__group">
                            <dt class="uol-results-items__item__meta__label">Categories</dt>

                            <dd class="uol-results-items__item__meta__data">Environment</dd>

                            <dd class="uol-results-items__item__meta__data">Global</dd>

                            <dd class="uol-results-items__item__meta__data">Science</dd>

                        </div>

                    </dl>

                    <p class="uol-results-items__item__summary">Scientists studying the impact of record heat and drought on intact African tropical rainforests were surprised by how resilient they were to extreme conditions during the last major El Niño event.</p>

                </div>
            </div>

        </div>

    </article>

    <article class="uol-results-items__item">

        <div class="uol-results-items__item__content-wrapper">

            <div class="uol-results-items__item__image-container">
                <img class="uol-results-items__item__img" src="/placeholders/banner/banner-04.jpg" alt="A super informative description">
            </div>

            <div class="uol-results-items__item__text-container">
                <div class="uol-results-items__item__text-container__inner">
                    <h2 class="uol-results-items__item__title">
                        <a href="/result-link-4" class="uol-results-items__item__link">Fibre-optics help create most detailed picture of Greenland Ice Sheet</a>
                    </h2>

                    <dl class="uol-results-items__item__meta">

                        <div class="uol-results-items__item__meta__group">
                            <dt class="uol-results-items__item__meta__label">Published</dt>
                            <dd class="uol-results-items__item__meta__data">
                                Thursday 6th May, 2021
                            </dd>
                        </div>

                        <div class="uol-results-items__item__meta__group">
                            <dt class="uol-results-items__item__meta__label">Categories</dt>

                            <dd class="uol-results-items__item__meta__data">Environment</dd>

                            <dd class="uol-results-items__item__meta__data">Science</dd>

                        </div>

                    </dl>

                    <p class="uol-results-items__item__summary">Scientists have used a fibre-optic sensor passed deep into a borehole to obtain the most detailed measurements of ice properties ever taken on the Greenland Ice Sheet.</p>

                </div>
            </div>

        </div>

    </article>

</div>

<nav class="uol-pagination" aria-label="pagination">
    <ol class="uol-pagination__list">
        <li class="uol-pagination__item">

            <button class="uol-button uol-button--primary uol-icon uol-icon--icon-only uol-icon--mdiPageFirst" type="button" disabled>First page</button>

        </li>
        <li class="uol-pagination__item">

            <button class="uol-button uol-button--primary uol-icon uol-icon--icon-only uol-icon--mdiArrowLeft" type="button" disabled>Previous page</button>

        </li>

        <li class="uol-pagination__item uol-pagination__item--numeric uol-pagination__item--current">
            <a class="uol-button uol-button--secondary uol-icon uol-icon--icon-only uol-pagination__link" href="/page-1" data-number="1" aria-current=page>
                <span class="uol-icon__label">
                    <span class="hide-accessible">Page </span>1
                </span>
            </a>
        </li>

        <li class="uol-pagination__item uol-pagination__item--numeric ">
            <a class="uol-button uol-button--secondary uol-icon uol-icon--icon-only uol-pagination__link" href="/page-2" data-number="2">
                <span class="uol-icon__label">
                    <span class="hide-accessible">Page </span>2
                </span>
            </a>
        </li>

        <li class="uol-pagination__item uol-pagination__item--numeric ">
            <a class="uol-button uol-button--secondary uol-icon uol-icon--icon-only uol-pagination__link" href="/page-3" data-number="3">
                <span class="uol-icon__label">
                    <span class="hide-accessible">Page </span>3
                </span>
            </a>
        </li>

        <li class="uol-pagination__item">

            <a href="/page-2" class="uol-button uol-button--primary uol-icon uol-icon--icon-only uol-icon--mdiArrowRight">Next page</a>

        </li>
        <li class="uol-pagination__item">

            <a href="/page-4" class="uol-button uol-button--primary uol-icon uol-icon--icon-only uol-icon--mdiPageLast">Last page</a>

        </li>
    </ol>

    <span class="uol-pagination__status">
        Page 1 of 4
    </span>
</nav>
 
{
  "page_heading": {
    "title": "News"
  },
  "form": {
    "button_inline": true,
    "action": "/example-form-action",
    "button": {
      "content": "Search",
      "type": "submit",
      "style": "primary"
    },
    "fields": [
      {
        "type": "search",
        "id": "search-term",
        "name": "search-term",
        "label": "Search news by keyword",
        "required": true,
        "invalid": false,
        "minlength": 2,
        "has_icon": true
      }
    ]
  },
  "results_items": [
    {
      "type": "news",
      "featured": true,
      "url": "/result-link-1",
      "date": "Sunday 9th May, 2021",
      "categories": [
        {
          "title": "Environment"
        },
        {
          "title": "Global"
        },
        {
          "title": "Science"
        }
      ],
      "title": "Infertility poses major threat to biodiversity during climate change",
      "text": "Heat-induced male infertility will see some species succumb to the effects of climate change earlier than thought, new research warns.",
      "image": {
        "src": "/placeholders/banner/banner-01.jpg",
        "alt": "A super informative description"
      }
    },
    {
      "type": "news",
      "url": "/result-link-2",
      "title": "Vice-Chancellor&apos;s latest blog: Why humanity needs the arts",
      "date": "Saturday 8th May, 2021",
      "categories": [
        {
          "title": "University"
        },
        {
          "title": "Arts &amp; culture"
        }
      ],
      "text": "The inaugural Edith Pechey online lecture with guest speaker Professor Simone Buitendijk, University of Leeds Vice Chancellor.",
      "image": {
        "src": "/placeholders/banner/banner-02.jpg",
        "alt": "A super informative description"
      }
    },
    {
      "type": "news",
      "url": "/result-link-3",
      "title": "Species invasions can teach us about COVID-19",
      "date": "Friday 7th May, 2021",
      "categories": [
        {
          "title": "Health"
        },
        {
          "title": "Science"
        }
      ],
      "text": "Invasions by alien insect and animal species have much in common with outbreaks of infectious diseases and can tell us a lot about how pandemics spread, according to new research.",
      "image": {
        "src": "/placeholders/banner/banner-03.jpg",
        "alt": "A super informative description"
      }
    },
    {
      "type": "news",
      "url": "/result-link-4",
      "title": "African rainforests can resist severe heat and drought",
      "date": "Friday 7th May, 2021",
      "categories": [
        {
          "title": "Environment"
        },
        {
          "title": "Global"
        },
        {
          "title": "Science"
        }
      ],
      "text": "Scientists studying the impact of record heat and drought on intact African tropical rainforests were surprised by how resilient they were to extreme conditions during the last major El Niño event."
    },
    {
      "type": "news",
      "url": "/result-link-4",
      "title": "Fibre-optics help create most detailed picture of Greenland Ice Sheet",
      "date": "Thursday 6th May, 2021",
      "categories": [
        {
          "title": "Environment"
        },
        {
          "title": "Science"
        }
      ],
      "text": "Scientists have used a fibre-optic sensor passed deep into a borehole to obtain the most detailed measurements of ice properties ever taken on the Greenland Ice Sheet.",
      "image": {
        "src": "/placeholders/banner/banner-04.jpg",
        "alt": "A super informative description"
      }
    }
  ],
  "pagination": {
    "current": 1,
    "pages": [
      {
        "number": 1,
        "url": "/page-1"
      },
      {
        "number": 2,
        "url": "/page-2"
      },
      {
        "number": 3,
        "url": "/page-3"
      },
      {
        "number": 4,
        "url": "/page-4"
      }
    ]
  }
}