University of Leeds Design System v1.0.13

News Events Search And List: News With Search Term And No Results

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

    <h2 class="uol-results-count__title uol-results-count__title--no-results">No results for <strong>'ipsum'</strong></h2>

</div>
 
{
  "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": [],
  "pagination": [],
  "search_term": "ipsum"
}