Search results pattern: With Content Area Paragraphs Only

Ready

Notes
View
HTML
Assets
Info
Context

Search results pattern

Summary

The search filters panel shows a standard layout for a UoL search page. The pattern consists of a heading section, a filter panel (left hand side on large screens / behind a toggle button on smaller devices), a search form, results count, a chips container, search results and pagination.

This documentation details the sections of the page relating to filters (filters panel and search form).

Search results heading area

The heading area houses the uol-page-heading component. Here the page is introduced with a title, subheading and further content where required.

The filter panel is viewable at all times on the left hand side for large width devices, but hidden on smaller devices. This is triggered by a filter results button.

The title for the filter panel is dynamically added depending on what type of filters are included within. With no Javascript enabled this title is set to be “Filter by”, When Javascript is enabled, a “scan” through the type of filters included with the panel sets this title to be one of the following:

Filters only - “Filter by” Sort only - “Sort by” Combination - “Filter and sort by”

This text is also applied to the filter button which triggers panel opening as detailed above.

Filters

Filters can be radio button groups, checkbox groups or select lists (single or multiselect). These input types are all derived from the @uol-form-input component. Each of these is introduced here via an example. Each filter is nested within a form block denoted by the config example for radio button group below.

Radio button group

The default variant has a radio button selected to select either full time or part time mode of study option (only one can be selected at any point). This is set up with the following config:

'form': {
  'action': '/forms/some-action',
  'filter_inputs': [{
    "id": "filter-study-mode",
    "name": "filter-study-mode",
    "label": "Mode of study",
    "type": "radio",
    'input_width': 'small',
    "legend": "Mode of study",
    "hint": "Select one option",
    "heading_level": "h3",
    "group_label_id": "filter-study-mode-group",
    "options": [{
        "id": "filter-study-mode-1",
        "name": "filter-study-mode-group",
        "value": "full-time",
        "label": "Full time"
      },
      {
        "id": "filter-study-mode-2",
        "name": "filter-study-mode-group",
        "value": "part-time",
        "label": "Part time",
        "checked": true
      }

Of note in the above:

“type” set to radio
“options” set to be an array of objects giving an id, name, value and label for each radio button
“checked” set to be true for the second option, setting this as the default radio button selected

Checkbox group

The second filter type on the default variant has a checkbox group - the difference here being that more than one option can be selected. This is set up with the following config:

"type": "checkbox",
"input_width": "small",
"legend": "Delivery type",
"hint": "Select all that apply",
"heading_level": "h3",
"group_label_id": "filter-delivery-type-group",
"options": [{
    "id": "filter-delivery-type-campus",
    "name": "filter-delivery-type-campus",
    "value": "campus",
    "label": "On campus"
  },
  {
    "id": "filter-delivery-type-blended",
    "name": "filter-delivery-type-blended",
    "value": "blended",
    "label": "Blended learning",
    "checked": true
  },

Of note in the above:

“type” set to “checkbox”
“options” set to be an array of objects giving an id, name, value and label for each checkbox
“checked” set to be true for the second option, setting this as one of the checkboxes selected

Typeahead (single)

The second filter type on the default variant has a checkbox group - the difference here being that more than one option can be selected. This is set up with the following config:

"type": "select",
"label": "Subject",
"hint": "Select one option",
"name": "filter-subject",
"id": "filter-subject",
"invalid": false,
"options": [{
    "value": "art_design_media_and_communication",
    "label": "Art, Design, Media and Communication"
  },
  {
    "value": "biological_biomedical_and_sports_sciences",
    "label": "Biological, Biomedical and Sports Sciences"
  },
  {
    "value": "business_management_finance_and_economics",
    "label": "Business, Management, Finance and Economics",
    "selected": true
  },

Of note in the above:

“type” set to “select”
“options” set to be an array of objects giving a value and label for each select option
“selected” set to be true for the third option, setting this to be the selected value (only one permitted)

Typeahead (multiple)

To incorporate a multiple select typeahead component requires the following parameters setting (all other config as per single typeahead above)

"type": "select",
"multiple": true,
"chips_hide": true,

The multiselect component when used in other page areas shows ‘chips’ for each selection within the component. For search results pages, chips should appear elsewhere on the page (see below), and their incorporation is done server side and beyond the scope of this pattern.

Clear all filters button

All filters panel include a “Clear all filters” button. When activated this button loops through all filters in the filter panel and clears their default values.

The search form uses the @uol-form-block component. This config is nested within the form element used above for filter inputs (although in different sections of the page layout, both the filters and form above results act as form elements). The default config below results in a form with keyword and search button. Please note this is not a second form but an addition to the above form object.

'form': {
  'form_block': {
    'lead': null,
    'additional_info_before': null,
    'button': {
      'style': 'primary',
      'type': 'submit',
      'content': 'Search'
    },
    'fields': [
      {
        'type': 'search',
        'id': 'inputId2',
        'name': 'searchCourses2',
        'label': 'Search by keyword',
        'invalid': 'false',
        'autocomplete': 'off',
        'has_icon': true
      }
    ],
    'button_inline': true
  }

Chips area

For all current live Design System pages utilising chips, these are generated at run time via Funnelback integration. This design pattern includes a container which can be used to house these chips (further information to follow).

This variant of the search results will display the usual search results page pattern but without the Search Form. This will enable editors to create a filterable (but not searchable) list of results.

This can be implemented through the following configuration:

{
  'no_form_variant': true,
  'form': {
    'form_block': false,
  }
}

Please note the property ‘no_form_variant’: true, is required for this variant to add the correct styling.

With content area

This variant of the search results pattern shows an example with the addition of the content area at the top of the results. The content area uses the @uol-typography-rich-text component to allow editors to add and edit content within this section (typically through a text editor found within a CMS).

This can be implemented through the following configuration (for example):

{
    'content': `
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
      <div class="uol-in-text-cta">
        <h2 class="uol-in-text-cta__heading">
            <a class="uol-in-text-cta__link" href="/">Find out more about cheese</a>
        </h2>
        <p class="uol-in-text-cta__text">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
      </div>
    `
}

Please note, as in the configuration example above only paragraphs and/or a CTA should be displayed.

Other elements (eg. Lists, Blockquotes, In Text Facts, etc.) should not be used.

We would recommend adding minimum amounts of content within this area to avoid distracting the user from the results section below.


        <form {% if form.action %}action="{{ form.action }}"{% endif %} class="uol-col-container uol-search-results {{ 'uol-search--has-filters' if form.filter_inputs }} {{ 'uol-search--publications' if publications_items }} {{ 'uol-search--has-map-content' if with_map_and_content_variant }} {{ 'uol-search--no-form' if no_form_variant }}">
  <div class="uol-search-results__page-heading">
    {% render '@uol-page-heading', { page_heading: page_heading } %}
  </div>

  {% if content %}
    <div class="uol-search-results__content-area">
      <div class="uol-rich-text">
        {{ content | safe }}
      </div>
    </div>
  {% endif %}

  {% if iframe %}
    {% render '@uol-iframe', { iframe: iframe } %}
  {% endif %}

  {% if form.filter_inputs %}
    <div class="uol-search-result__filters">
      {% render '@uol-filters-panel', { filter_inputs: form.filter_inputs,
                                        results_button: form.results_button } %}
    </div>
  {% endif %}

  <div id="main" tabindex="-1" class="uol-search-results__main">

    {% render '@uol-form-block', { form_block: form.form_block } %}

    <div class="uol-search-results__results">

      {% render '@uol-results-count' %}

      <div class="uol-search-results__button-chips-container">
        {% render '@uol-chips', { items: chips } %}
      </div>
      
      {% render '@uol-results', { items: results } %}

      {% render '@uol-publications-items', { publications: publications_items } %}

      {% render '@uol-pagination', { pagination: pagination } %}
    </div>
  </div>

</form>


        
        <form action="/forms/some-action" class="uol-col-container uol-search-results uol-search--has-filters   ">
    <div class="uol-search-results__page-heading">
        <header class="page-heading">

            <h1 class="page-heading__title">
                <span class="page-heading__title__main">Search cheeses</span>

            </h1>

        </header>

    </div>

    <div class="uol-search-results__content-area">
        <div class="uol-rich-text">

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>

        </div>
    </div>

    <div class="uol-search-result__filters">

        <div class="uol-filters-panel " id="search-filters" aria-labelledby="filters-panel-title" role="group">
            <div class="dialog-overlay" tabindex="-1" data-a11y-dialog-hide></div>

            <h2 id="filters-panel-title" class="uol-filters-panel__title">Filters</h2>

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

                <div role="group" aria-labelledby="filter-study-mode-group filter-study-mode-group-hint" class="uol-form__custom-fieldset">

                    <span id="filter-study-mode-group" class="uol-form__custom__legend">Mode of study</span>

                    <span class="uol-form__input-label__hint" id="filter-study-mode-group-hint">Select all that apply </span>

                    <div class="uol-form__input--checkbox-wrapper">
                        <input class="uol-form__input--checkbox" type="checkbox" id="filter-study-mode-1" name="filter-study-mode-group" value="">
                        <label class="uol-form__input--checkbox-label" for="filter-study-mode-1" id="filter-study-mode-1-label">Full time</label>
                        <span class="uol-form__input--checkbox-custom">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="38" height="38" focusable="false" aria-hidden="true">
                                <path fill="#000" fill-rule="nonzero" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
                            </svg>
                        </span>
                    </div>

                    <div class="uol-form__input--checkbox-wrapper">
                        <input class="uol-form__input--checkbox" type="checkbox" id="filter-study-mode-2" name="filter-study-mode-group" value="" checked>
                        <label class="uol-form__input--checkbox-label" for="filter-study-mode-2" id="filter-study-mode-2-label">Part time</label>
                        <span class="uol-form__input--checkbox-custom">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="38" height="38" focusable="false" aria-hidden="true">
                                <path fill="#000" fill-rule="nonzero" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
                            </svg>
                        </span>
                    </div>

                </div>

            </div>

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

                <div role="group" aria-labelledby="filter-delivery-type-group filter-delivery-type-group-hint" class="uol-form__custom-fieldset">

                    <span id="filter-delivery-type-group" class="uol-form__custom__legend">Delivery type</span>

                    <span class="uol-form__input-label__hint" id="filter-delivery-type-group-hint">Select all that apply </span>

                    <div class="uol-form__input--checkbox-wrapper">
                        <input class="uol-form__input--checkbox" type="checkbox" id="filter-delivery-type-campus" name="filter-delivery-type-campus" value="">
                        <label class="uol-form__input--checkbox-label" for="filter-delivery-type-campus" id="filter-delivery-type-campus-label">On campus</label>
                        <span class="uol-form__input--checkbox-custom">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="38" height="38" focusable="false" aria-hidden="true">
                                <path fill="#000" fill-rule="nonzero" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
                            </svg>
                        </span>
                    </div>

                    <div class="uol-form__input--checkbox-wrapper">
                        <input class="uol-form__input--checkbox" type="checkbox" id="filter-delivery-type-blended" name="filter-delivery-type-blended" value="" checked>
                        <label class="uol-form__input--checkbox-label" for="filter-delivery-type-blended" id="filter-delivery-type-blended-label">Blended learning</label>
                        <span class="uol-form__input--checkbox-custom">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="38" height="38" focusable="false" aria-hidden="true">
                                <path fill="#000" fill-rule="nonzero" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
                            </svg>
                        </span>
                    </div>

                    <div class="uol-form__input--checkbox-wrapper">
                        <input class="uol-form__input--checkbox" type="checkbox" id="filter-delivery-type-online" name="filter-delivery-type-online" value="">
                        <label class="uol-form__input--checkbox-label" for="filter-delivery-type-online" id="filter-delivery-type-online-label">Online exclusive</label>
                        <span class="uol-form__input--checkbox-custom">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="38" height="38" focusable="false" aria-hidden="true">
                                <path fill="#000" fill-rule="nonzero" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
                            </svg>
                        </span>
                    </div>

                </div>

            </div>

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

                <div role="group" aria-labelledby="filter-course-type filter-course-type-hint" class="uol-form__custom-fieldset">

                    <span id="filter-course-type" class="uol-form__custom__legend">Course type</span>

                    <span class="uol-form__input-label__hint" id="filter-course-type-hint">Select all that apply </span>

                    <div class="uol-form__input--checkbox-wrapper">
                        <input class="uol-form__input--checkbox" type="checkbox" id="filter-course-type-foundation" name="filter-course-type-foundation" value="">
                        <label class="uol-form__input--checkbox-label" for="filter-course-type-foundation" id="filter-course-type-foundation-label">Foundation year</label>
                        <span class="uol-form__input--checkbox-custom">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="38" height="38" focusable="false" aria-hidden="true">
                                <path fill="#000" fill-rule="nonzero" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
                            </svg>
                        </span>
                    </div>

                    <div class="uol-form__input--checkbox-wrapper">
                        <input class="uol-form__input--checkbox" type="checkbox" id="filter-course-type-apprenticeship" name="filter-course-type-apprenticeship" value="">
                        <label class="uol-form__input--checkbox-label" for="filter-course-type-apprenticeship" id="filter-course-type-apprenticeship-label">Apprenticeships</label>
                        <span class="uol-form__input--checkbox-custom">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="38" height="38" focusable="false" aria-hidden="true">
                                <path fill="#000" fill-rule="nonzero" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
                            </svg>
                        </span>
                    </div>

                    <div class="uol-form__input--checkbox-wrapper">
                        <input class="uol-form__input--checkbox" type="checkbox" id="filter-course-type-intercalated" name="filter-course-type-intercalated" value="">
                        <label class="uol-form__input--checkbox-label" for="filter-course-type-intercalated" id="filter-course-type-intercalated-label">Intercalated degree</label>
                        <span class="uol-form__input--checkbox-custom">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="38" height="38" focusable="false" aria-hidden="true">
                                <path fill="#000" fill-rule="nonzero" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
                            </svg>
                        </span>
                    </div>

                </div>

            </div>

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

                <label class="uol-form__input-label " for="filter-subject" id="filter-subject-label">
                    <span class="uol-form__input-label__text">Subject</span>

                    <span class="uol-form__input-label__hint" id="filter-subject-hint">Select one option </span>

                </label>

                <div class="uol-form__input-wrapper " data-field-invalid=false>
                    <select class="uol-form__input uol-form__input--select " name="filter-subject" id="filter-subject" aria-label="Select Subject">

                        <option value="">Select an option</option>

                        <option value="art_design_media_and_communication">Art, Design, Media and Communication</option>

                        <option value="biological_biomedical_and_sports_sciences">Biological, Biomedical and Sports Sciences</option>

                        <option value="business_management_finance_and_economics" selected>Business, Management, Finance and Economics</option>

                        <option value="chemistry_food_science_and_nutrition">Chemistry, Food Science and Nutrition</option>

                        <option value="education_sociology_and_social_policy">Education, Sociology and Social Policy</option>

                        <option value="engineering_and_computing">Engineering and Computing</option>

                        <option value="english_history_and_humanities">English, History and Humanities</option>

                        <option value="geography_environment_and_earth_sciences">Geography, Environment and Earth Sciences</option>

                        <option value="languages_cultures_and_societies">Languages, Cultures and Societies</option>

                        <option value="law_criminology_and_politics">Law, Criminology and Politics</option>

                        <option value="mathematics_and_physics">Mathematics and Physics</option>

                        <option value="medicine_dentistry_psychology_and_healthcare">Medicine, Dentistry, Psychology and Healthcare</option>

                        <option value="music_theatre_and_performance">Music, Theatre and Performance</option>

                    </select>
                    <svg class="uol-form__input__chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" focusable="false" aria-hidden="true">
                        <path fill="none" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
                    </svg>
                </div>

            </div>

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

                <label class="uol-form__input-label " for="filter-subject-2" id="filter-subject-2-label">
                    <span class="uol-form__input-label__text">Subject</span>

                    <span class="uol-form__input-label__hint" id="filter-subject-2-hint">Select one option </span>

                </label>

                <div class="uol-form__input-wrapper " data-field-invalid=false>
                    <select class="uol-form__input uol-form__input--select " name="filter-subject-2" id="filter-subject-2" aria-label="Select Subject">

                        <option value="">Select an option</option>

                        <option value="art_design_media_and_communication">Art, Design, Media and Communication</option>

                        <option value="biological_biomedical_and_sports_sciences">Biological, Biomedical and Sports Sciences</option>

                        <option value="business_management_finance_and_economics" selected>Business, Management, Finance and Economics</option>

                        <option value="chemistry_food_science_and_nutrition">Chemistry, Food Science and Nutrition</option>

                        <option value="education_sociology_and_social_policy">Education, Sociology and Social Policy</option>

                        <option value="engineering_and_computing">Engineering and Computing</option>

                        <option value="english_history_and_humanities">English, History and Humanities</option>

                        <option value="geography_environment_and_earth_sciences">Geography, Environment and Earth Sciences</option>

                        <option value="languages_cultures_and_societies">Languages, Cultures and Societies</option>

                        <option value="law_criminology_and_politics">Law, Criminology and Politics</option>

                        <option value="mathematics_and_physics">Mathematics and Physics</option>

                        <option value="medicine_dentistry_psychology_and_healthcare">Medicine, Dentistry, Psychology and Healthcare</option>

                        <option value="music_theatre_and_performance">Music, Theatre and Performance</option>

                    </select>
                    <svg class="uol-form__input__chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" focusable="false" aria-hidden="true">
                        <path fill="none" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
                    </svg>
                </div>

            </div>

            <div class="uol-filters-panel__footer">
                <button id="clear_filter_panel" class="uol-button uol-button--secondary
    
      uol-icon uol-icon--mdiDeleteForeverOutline
      
      
      uol-icon--icon-only--large
    " type="button">Clear all filters</button>

                <button id="show_search_results" class="uol-button uol-button--primary
    " type="button">Show 15 search results</button>

            </div>
        </div>
        <div class="uol-filters-panel__overlay"></div>

    </div>

    <div id="main" tabindex="-1" class="uol-search-results__main">

        <div class="uol-form__container">

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

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

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

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

                            <label class="uol-form__input-label" for="inputId2">
                                <span class="uol-form__input-label__text">Search by keyword</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="inputId2" name="searchCourses2" aria-invalid="false" value="" autocomplete="off">

                                <!--  -->
                            </div>

                        </div>

                    </div>

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

                    </div>

                </div>

            </div>

        </div>

        <div class="uol-search-results__results">

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

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

            </div>

            <div class="uol-search-results__button-chips-container">

            </div>

            <div class="uol-results">

                <article class="uol-results ">

                    <div class="uol-results__content uol-results__link">

                        <div class="
          uol-results__image 
          uol-results__image--rectangle
          ">

                            <div class="uol-results__image__container">
                                <img src="/placeholders/banner/banner-05.jpg" alt="Image description">
                            </div>

                            <div class="uol-results__text">
                                <h2>
                                    <a href="/cheese/brie">Brie</a>
                                </h2>

                                <p class="uol-results__text--standard">Brie is a soft cow&apos;s-milk cheese named after Brie, the French region from which it originated. It is pale in color with a slight grayish tinge under a rind of white mould. The rind is typically eaten, with its flavor depending largely upon the ingredients used and its manufacturing environment.</p>

                            </div>

                        </div>

                    </div>

                </article>

                <article class="uol-results ">

                    <div class="uol-results__content uol-results__link">

                        <div class="
           
          uol-results__image--rectangle
          ">

                            <div class="uol-results__text">
                                <h2>
                                    <a href="/cheese/cashel-blue">Cashel Blue</a>
                                </h2>

                                <p class="uol-results__text--standard">Cashel Blue is a hand-made, semi-soft, blue veined, medium-strength blue cheese with a creamy texture. Cashel Blue was the first Irish blue cheese, named after the Rock of Cashel overlooking the pastures close to the cheese farm of the family Grubb.</p>

                            </div>

                        </div>

                    </div>

                </article>

                <article class="uol-results ">

                    <div class="uol-results__content uol-results__link">

                        <div class="
           
          uol-results__image--rectangle
          ">

                            <div class="uol-results__text">
                                <h2>
                                    <a href="/cheese/cheddar">Cheddar</a>
                                </h2>

                                <p class="uol-results__text--standard">Cheddar cheese is a relatively hard, off-white, sometimes sharp-tasting, natural cheese. Originating in the English village of Cheddar in Somerset, cheeses of this style are now produced beyond the region and in several countries around the world.</p>

                            </div>

                        </div>

                    </div>

                </article>

                <article class="uol-results ">

                    <div class="uol-results__content uol-results__link">

                        <div class="
          uol-results__image 
          uol-results__image--rectangle
          ">

                            <div class="uol-results__image__container">
                                <img src="/placeholders/banner/banner-05.jpg" alt="Image description">
                            </div>

                            <div class="uol-results__text">
                                <h2>
                                    <a href="/cheese/edam">Edam</a>
                                </h2>

                                <p class="uol-results__text--standard">Edam is a semi-hard cheese that originated in the Netherlands, and is named after the town of Edam in the province of North Holland. Edam is traditionally sold in rounded cylinders with a pale yellow interior and a coat, or rind, of red paraffin wax. Edam ages and travels well, and does not spoil; it only hardens.</p>

                            </div>

                        </div>

                    </div>

                </article>

                <article class="uol-results ">

                    <div class="uol-results__content uol-results__link">

                        <div class="
          uol-results__image 
          uol-results__image--rectangle
          ">

                            <div class="uol-results__image__container">
                                <img src="/placeholders/banner/banner-05.jpg" alt="Image description">
                            </div>

                            <div class="uol-results__text">
                                <h2>
                                    <a href="/cheese/manchego">Manchego</a>
                                </h2>

                                <p class="uol-results__text--standard">Manchego is a cheese made in the La Mancha region of Spain from the milk of sheep of the Manchega breed. It is aged between 60 days and 2 years. Manchego has a firm and compact consistency and a buttery texture, and often contains small, unevenly distributed air pockets.</p>

                            </div>

                        </div>

                    </div>

                </article>

                <article class="uol-results ">

                    <div class="uol-results__content uol-results__link">

                        <div class="
          uol-results__image 
          uol-results__image--rectangle
          ">

                            <div class="uol-results__image__container">
                                <img src="/placeholders/banner/banner-05.jpg" alt="Image description">
                            </div>

                            <div class="uol-results__text">
                                <h2>
                                    <a href="/cheese/parmigiano-reggiano">Parmigiano-Reggiano</a>
                                </h2>

                                <p class="uol-results__text--standard">Parmigiano-Reggiano or Parmesan is an Italian hard, granular cheese that is produced from cow&apos;s milk and has aged 12-36 months.</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>

        </div>
    </div>

</form>

File:

Content:


                                .uol-search-results__page-heading {
  @extend .uol-col;
  @extend .uol-col-12;

  padding-bottom: 0;


  .page-heading {
    @include media("<uol-media-xs") {
      padding-left: $spacing-2;
      padding-top: $spacing-2;
    }



    margin-bottom: $spacing-4;

    @include media(">=uol-media-m") {
      margin-bottom: $spacing-6;
    }
  }
}

.uol-search--no-form {
  .page-heading {
    margin-bottom: 0.625rem; // 10px

    @include media(">=uol-media-xs") {
      margin-bottom: 0.125rem; // 2px
    }

    @include media(">=uol-media-m") {
      margin-bottom: 0.938rem; // 15px
    }

    @include media(">=uol-media-l") {
      margin-bottom: 1.688rem; // 27px
    }

    @include media(">=uol-media-xl") {
      margin-bottom: 1.188rem; // 19px
    }
  }
}

.uol-search-results__content-area {
  @extend .uol-col;
  @extend .uol-col-12;
  padding: 0 $spacing-2;

  .site-outer & {
    padding-top: 0;
    margin-top: -0.438rem; // -7px

    @include media(">=uol-media-xs") {
      padding-bottom: 0;
      margin-top: -0.938rem // -15px
    }

    @include media(">=uol-media-m") {
      padding-bottom: $spacing-4;
      margin-top: -$spacing-5;
    }

    @include media(">=uol-media-l") {
      padding-bottom: 1.75rem; // 28px
      margin-top: -1.563rem; // -25px
    }

    @include media(">=uol-media-xl") {
      padding-bottom: $spacing-4;
      margin-top: -1.813rem; // -29px
    }

    .uol-rich-text > p:last-child {
      margin-bottom: 2.5rem; // 40px

      @include media(">=uol-media-m") {
        margin-bottom: $spacing-5;
      }

      @include media(">=uol-media-xl") {
        margin-bottom: $spacing-6;
      }
    }
  }

  .site-outer .uol-search--has-map-content & {
    @include media(">=uol-media-l") {
      padding-bottom: 1.25rem // 20px
    }

    @include media(">=uol-media-xl") {
      padding-bottom: 0.75rem // 12px
    }
  }

  .site-outer .uol-search--no-form & {
    margin-bottom: -0.938rem; // -15px
    padding-top: 0.375rem; // 6px

    @include media(">=uol-media-xs") {
      padding-top: 0.875rem; // 14px
    }

    @include media(">=uol-media-m") {
      margin-bottom: -1.063rem; // -17px
      padding-top: 1rem; // 16px
    }

    @include media(">=uol-media-l") {
      margin-bottom: 0;
      padding-top: 0.313rem; // 5px
    }

    @include media(">=uol-media-xl") {
      padding-top: 0.813rem; // 13px
    }
  }
}

.uol-search-results__main {
  @include page-width("full");
}

.uol-search-result__filters {
  @extend .uol-col;
  @extend .uol-col-12;
  @extend .uol-col-l-3;

  .js & {
    @include media("<uol-media-l") {
      padding: 0;
    }
  }
}

// Components margin/padding changes if in search results pattern
.uol-search-results {

  margin-bottom: $spacing-7;

  .uol-form__container,
  .uol-results-count {
    margin-bottom: $spacing-6;

    @include media(">=uol-media-m") {
      margin-bottom: $spacing-7;
    }
  }

  .uol-chips {
    padding: 0;
  }

  .uol-search-results__button-chips-container {
    .uol-button {
      margin-bottom: $spacing-5;

      @include media(">=uol-media-m") {
        margin-bottom: $spacing-6;
      }
    }
  }

  .uol-results-items {
    margin: 1.25rem 0 $spacing-6;
    padding: 0;

    @include media(">=uol-media-m") {
      margin: 2.25rem 0 $spacing-7;
    }
  }

  .uol-form__inner-wrapper .uol-form__input-wrapper {
    &::before {
      @include media("<uol-media-m") {
        bottom: 0; // add comment to force update
      }
    }
  }

  .uol-publications-list {
    @include media(">=uol-media-s") {
      margin-right: calc(100% / 12 * 2 + 0.25rem);
    }

    @include media(">=uol-media-l") {
      margin-right: calc(100% / 9 * 2 + 0.25rem);
    }
  }
}

.uol-search--publications .page-heading__title__main::after {
  content: " - Publications";
}

URL: /components/raw/uol-pattern-search-results/_search-results.scss
Filesystem Path: src/library/03-patterns/search-results/_search-results.scss
Size: 3.8 KB

Content:


                                const focusTrap = require('focus-trap');
let courseFinderFilterPage = false;

export const uolSearchResults = () => {
  const filterPanel = document.querySelector('.uol-search-result__filters');
  const searchResultsPage = document.querySelector('.uol-search--has-filters');

  let filterPanelTitle = "Filter By";

  if (filterPanel) {
    const numOfSortByOptions = filterPanel.getElementsByClassName("uol-form__input-container__sort-by").length;
    const numOfFilterOptions = filterPanel.getElementsByClassName("uol-form__input-container").length;

    // console.log('numOfSortByOptions ' + numOfSortByOptions);
    // console.log('numOfFilterOptions ' + numOfFilterOptions);



    if (numOfSortByOptions > 0 && numOfFilterOptions == numOfSortByOptions) {
      filterPanelTitle = "Sort by";
    }
    if (numOfSortByOptions == 0 && numOfFilterOptions > 0) {
      filterPanelTitle = "Filter by";
    }
    if (numOfSortByOptions > 0 && numOfFilterOptions > numOfSortByOptions) {
      filterPanelTitle = "Filter and sort by";
    }
    document.getElementById("filters-panel-title").innerHTML = filterPanelTitle;
  }

  if (searchResultsPage) {
   let filtersOffscreen = false;

    function trackWindowWidth() {
      if (window.innerWidth < 1024) {
        if (filtersOffscreen === false) {
          offScreenFiltersCreate();
          filtersOffscreen = true;
        }
      } else {
        if (filtersOffscreen === true) {
          offScreenFiltersDestroy();
          filtersOffscreen = false;
        }
      }
    }

    window.addEventListener("resize", trackWindowWidth);

    // Select button container
    const btnContainer = searchResultsPage.querySelector('.uol-search-results__button-chips-container');

    // Close filters panel button
    const btnCloseFilters = document.getElementById('filters-close-button');

    // Show results button
    const btnShowResults = document.getElementById('show_search_results');

    // Create toggle button
    const btnFilterToggle = document.createElement('button');
    btnFilterToggle.id = 'filters-toggle';
    btnFilterToggle.type = 'button';
    btnFilterToggle.classList.add('uol-button');
    btnFilterToggle.classList.add('uol-button--secondary');
    btnFilterToggle.classList.add('uol-icon');
    btnFilterToggle.classList.add('uol-icon--icon-only--large');

    // Sort by icon if only sorting, otherwise, filter by icon
    if (filterPanel) {
      if (filterPanelTitle) {
        let svgCode = (filterPanelTitle == "Sort by") ?
          `<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M120-240v-60h240v60H120Zm0-210v-60h480v60H120Zm0-210v-60h720v60H120Z"/></svg>`:
          `<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M400-240v-60h160v60H400ZM240-450v-60h480v60H240ZM120-660v-60h720v60H120Z"/></svg>`;

        btnFilterToggle.innerHTML = svgCode +
          `<span id="open-filter-button-text" class="uol-icon__label">` +
          filterPanelTitle +
          `</span>
        `;
      }

    }


    // Select filters panel
    const filtersPanel = document.querySelector('.uol-filters-panel');

    const filterPanelFocusTrap = focusTrap.createFocusTrap(filtersPanel, {
      clickOutsideDeactivates: true,
      returnFocusOnDeactivate: true,
      onActivate: () => {
        filtersPanel.classList.add('uol-filters-panel--open');
        document.body.style.overflow = 'hidden';
      },
      onDeactivate: () => {
        filtersPanel.classList.remove('uol-filters-panel--open');
        document.body.style.removeProperty('overflow');

        // Slight delay before attempting to move focus to allow reactivation of non-modal elements
        const interval = setInterval(() => {
          btnFilterToggle.focus();
          clearInterval(interval);
        }, 5);
      }
    });

    btnFilterToggle.addEventListener('click', () => {
      filtersOpen();
    })

    const filtersOpen = () => {
      filtersPanel.setAttribute('tabindex', '-1')
      filtersPanel.removeAttribute('hidden');
      filtersPanel.focus();
      filterPanelFocusTrap.activate();
    }

    const filtersClose = () => {
      filterPanelFocusTrap.deactivate();
      filtersPanel.addEventListener('transitionend', hidePanel)
      const hidePanel = () => filtersPanel.setAttribute('hidden', true);
      filtersPanel.removeEventListener('transitionend', hidePanel)
    }

    const offScreenFiltersCreate = () => {

      // Hide the filters
      filtersPanel.setAttribute('hidden', true);

      // Add btnFilterToggle to DOM
      btnContainer.insertAdjacentElement('afterbegin', btnFilterToggle);

      btnCloseFilters.addEventListener('click', () => {
        filtersClose();
      })

      btnShowResults.addEventListener('click', () => {
        filtersClose();
      })
    }

    const offScreenFiltersDestroy = () => {

      // Unhide the filters
      filtersPanel.removeAttribute('hidden');

      // Remove btnFilterToggle from DOM
      btnFilterToggle.remove();

      // In case the filters are open we need to close
      filtersClose();

      // Remove 'hidden' attribute that was added by filtersClose()
      filtersPanel.removeAttribute('hidden');

    }
  }
}

URL: /components/raw/uol-pattern-search-results/search-results.module.js
Filesystem Path: src/library/03-patterns/search-results/search-results.module.js
Size: 5.3 KB

Handle: @uol-pattern-search-results--with-content-area-paragraphs-only
Variants (11): Default , With Content Area , With Content Area Paragraphs Only , Without Search Form , Without Search Form And With Content Area , With Map , With Map And Content Area , With Sort Option , With Filter Option , With Filter And Sort By , With Multiselect Without Chips
Preview:
- With layout
- Component only
Filesystem Path: src/library/03-patterns/search-results/search-results.njk
References (9):

@uol-page-heading ,

@uol-iframe ,

@uol-filters-panel ,

@uol-form-block ,

@uol-results-count ,

@uol-chips ,

@uol-results ,

@uol-publications-items ,

@uol-pagination


        
            
            {
  "page_heading": {
    "title": "Search cheeses"
  },
  "form": {
    "action": "/forms/some-action",
    "filter_inputs": [
      {
        "id": "filter-study-mode",
        "name": "filter-study-mode",
        "label": "Mode of study",
        "type": "checkbox",
        "input_width": "small",
        "legend": "Mode of study",
        "hint": "Select all that apply",
        "heading_level": "h3",
        "group_label_id": "filter-study-mode-group",
        "options": [
          {
            "id": "filter-study-mode-1",
            "name": "filter-study-mode-group",
            "value": "full-time",
            "label": "Full time"
          },
          {
            "id": "filter-study-mode-2",
            "name": "filter-study-mode-group",
            "value": "part-time",
            "label": "Part time",
            "checked": true
          }
        ]
      },
      {
        "id": "filter-delivery-type",
        "name": "filter-delivery-type",
        "label": "Delivery type",
        "type": "checkbox",
        "input_width": "small",
        "legend": "Delivery type",
        "hint": "Select all that apply",
        "heading_level": "h3",
        "group_label_id": "filter-delivery-type-group",
        "options": [
          {
            "id": "filter-delivery-type-campus",
            "name": "filter-delivery-type-campus",
            "value": "campus",
            "label": "On campus"
          },
          {
            "id": "filter-delivery-type-blended",
            "name": "filter-delivery-type-blended",
            "value": "blended",
            "label": "Blended learning",
            "checked": true
          },
          {
            "id": "filter-delivery-type-online",
            "name": "filter-delivery-type-online",
            "value": "online",
            "label": "Online exclusive"
          }
        ]
      },
      {
        "id": "filter-course-type",
        "name": "filter-course-type",
        "label": "Course type",
        "type": "checkbox",
        "input_width": "small",
        "legend": "Course type",
        "hint": "Select all that apply",
        "heading_level": "h3",
        "group_label_id": "filter-course-type",
        "options": [
          {
            "id": "filter-course-type-foundation",
            "name": "filter-course-type-foundation",
            "value": "foundation",
            "label": "Foundation year"
          },
          {
            "id": "filter-course-type-apprenticeship",
            "name": "filter-course-type-apprenticeship",
            "value": "apprenticeship",
            "label": "Apprenticeships"
          },
          {
            "id": "filter-course-type-intercalated",
            "name": "filter-course-type-intercalated",
            "value": "intercalated",
            "label": "Intercalated degree"
          }
        ]
      },
      {
        "type": "select",
        "label": "Subject",
        "hint": "Select one option",
        "name": "filter-subject",
        "id": "filter-subject",
        "invalid": false,
        "options": [
          {
            "value": "art_design_media_and_communication",
            "label": "Art, Design, Media and Communication"
          },
          {
            "value": "biological_biomedical_and_sports_sciences",
            "label": "Biological, Biomedical and Sports Sciences"
          },
          {
            "value": "business_management_finance_and_economics",
            "label": "Business, Management, Finance and Economics",
            "selected": true
          },
          {
            "value": "chemistry_food_science_and_nutrition",
            "label": "Chemistry, Food Science and Nutrition"
          },
          {
            "value": "education_sociology_and_social_policy",
            "label": "Education, Sociology and Social Policy"
          },
          {
            "value": "engineering_and_computing",
            "label": "Engineering and Computing"
          },
          {
            "value": "english_history_and_humanities",
            "label": "English, History and Humanities"
          },
          {
            "value": "geography_environment_and_earth_sciences",
            "label": "Geography, Environment and Earth Sciences"
          },
          {
            "value": "languages_cultures_and_societies",
            "label": "Languages, Cultures and Societies"
          },
          {
            "value": "law_criminology_and_politics",
            "label": "Law, Criminology and Politics"
          },
          {
            "value": "mathematics_and_physics",
            "label": "Mathematics and Physics"
          },
          {
            "value": "medicine_dentistry_psychology_and_healthcare",
            "label": "Medicine, Dentistry, Psychology and Healthcare"
          },
          {
            "value": "music_theatre_and_performance",
            "label": "Music, Theatre and Performance"
          }
        ]
      },
      {
        "type": "select",
        "label": "Subject",
        "hint": "Select one option",
        "name": "filter-subject-2",
        "id": "filter-subject-2",
        "invalid": false,
        "options": [
          {
            "value": "art_design_media_and_communication",
            "label": "Art, Design, Media and Communication"
          },
          {
            "value": "biological_biomedical_and_sports_sciences",
            "label": "Biological, Biomedical and Sports Sciences"
          },
          {
            "value": "business_management_finance_and_economics",
            "label": "Business, Management, Finance and Economics",
            "selected": true
          },
          {
            "value": "chemistry_food_science_and_nutrition",
            "label": "Chemistry, Food Science and Nutrition"
          },
          {
            "value": "education_sociology_and_social_policy",
            "label": "Education, Sociology and Social Policy"
          },
          {
            "value": "engineering_and_computing",
            "label": "Engineering and Computing"
          },
          {
            "value": "english_history_and_humanities",
            "label": "English, History and Humanities"
          },
          {
            "value": "geography_environment_and_earth_sciences",
            "label": "Geography, Environment and Earth Sciences"
          },
          {
            "value": "languages_cultures_and_societies",
            "label": "Languages, Cultures and Societies"
          },
          {
            "value": "law_criminology_and_politics",
            "label": "Law, Criminology and Politics"
          },
          {
            "value": "mathematics_and_physics",
            "label": "Mathematics and Physics"
          },
          {
            "value": "medicine_dentistry_psychology_and_healthcare",
            "label": "Medicine, Dentistry, Psychology and Healthcare"
          },
          {
            "value": "music_theatre_and_performance",
            "label": "Music, Theatre and Performance"
          }
        ]
      }
    ],
    "results_button": {
      "type": "button",
      "content": "Show 15 search results",
      "style": "primary",
      "id": "show_search_results"
    },
    "form_block": {
      "lead": null,
      "additional_info_before": null,
      "button": {
        "style": "primary",
        "type": "submit",
        "content": "Search"
      },
      "fields": [
        {
          "type": "search",
          "id": "inputId2",
          "name": "searchCourses2",
          "label": "Search by keyword",
          "invalid": "false",
          "autocomplete": "off",
          "has_icon": true
        }
      ],
      "button_inline": true
    }
  },
  "results": [
    {
      "block_link": true,
      "image": {
        "src": "/placeholders/banner/banner-05.jpg",
        "alt": "Image description"
      },
      "url": "/cheese/brie",
      "title": "Brie",
      "opening_text": "Brie is a soft cow&apos;s-milk cheese named after Brie, the French region from which it originated. It is pale in color with a slight grayish tinge under a rind of white mould. The rind is typically eaten, with its flavor depending largely upon the ingredients used and its manufacturing environment."
    },
    {
      "block_link": true,
      "url": "/cheese/cashel-blue",
      "title": "Cashel Blue",
      "opening_text": "Cashel Blue is a hand-made, semi-soft, blue veined, medium-strength blue cheese with a creamy texture. Cashel Blue was the first Irish blue cheese, named after the Rock of Cashel overlooking the pastures close to the cheese farm of the family Grubb."
    },
    {
      "block_link": true,
      "url": "/cheese/cheddar",
      "title": "Cheddar",
      "opening_text": "Cheddar cheese is a relatively hard, off-white, sometimes sharp-tasting, natural cheese. Originating in the English village of Cheddar in Somerset, cheeses of this style are now produced beyond the region and in several countries around the world."
    },
    {
      "block_link": true,
      "image": {
        "src": "/placeholders/banner/banner-05.jpg",
        "alt": "Image description"
      },
      "url": "/cheese/edam",
      "title": "Edam",
      "opening_text": "Edam is a semi-hard cheese that originated in the Netherlands, and is named after the town of Edam in the province of North Holland. Edam is traditionally sold in rounded cylinders with a pale yellow interior and a coat, or rind, of red paraffin wax. Edam ages and travels well, and does not spoil; it only hardens."
    },
    {
      "block_link": true,
      "image": {
        "src": "/placeholders/banner/banner-05.jpg",
        "alt": "Image description"
      },
      "url": "/cheese/manchego",
      "title": "Manchego",
      "opening_text": "Manchego is a cheese made in the La Mancha region of Spain from the milk of sheep of the Manchega breed. It is aged between 60 days and 2 years. Manchego has a firm and compact consistency and a buttery texture, and often contains small, unevenly distributed air pockets."
    },
    {
      "block_link": true,
      "image": {
        "src": "/placeholders/banner/banner-05.jpg",
        "alt": "Image description"
      },
      "url": "/cheese/parmigiano-reggiano",
      "title": "Parmigiano-Reggiano",
      "opening_text": "Parmigiano-Reggiano or Parmesan is an Italian hard, granular cheese that is produced from cow&apos;s milk and has aged 12-36 months."
    }
  ],
  "pagination": {
    "current": 1,
    "pages": [
      {
        "number": 1,
        "url": "/page-1"
      },
      {
        "number": 2,
        "url": "/page-2"
      },
      {
        "number": 3,
        "url": "/page-3"
      },
      {
        "number": 4,
        "url": "/page-4"
      }
    ]
  },
  "content": "\n            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>\n            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>\n          "
}

Search results pattern: With Content Area Paragraphs Only