University of Leeds Design System v1.0.14.2

People profile search results

Guidance

When to use

This pattern should be used to return a collection of results that match a search query when a user searches for staff where there is a need to display the results as summary cards that link to each staff member’s profile page.

When not to use

Do not use when the pattern is not a set of results returned by a search query

Developer guidance

This pattern makes use of the following components:

@uol-form-pattern to provide the Search Form

@uol-people-results-count to provide the search parameter and enumerate the number of results returned to the user, which is displayed to them above the returned results

@uol-people-profile-cards Each result item is contained in a card and contains the summary of each member of staff that has a match against the search term

@uol-pagination For when the number of results returned exceeds the number that should be displayed, as specified by the designers

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

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

{% render '@uol-people-profile-cards', { profiles: 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 people</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="" autocomplete="off">

                            <!--  -->
                        </div>

                    </div>

                </div>

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

                </div>

            </div>

        </form>

    </div>

</div>

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

    <h2 class="uol-results-count__title">4 results for <strong>'Smith'</strong></h2>

</div>

<ul class="uol-people-profile-cards">

    <li class="uol-people-profile__card ">

        <h3 class="uol-people-profile__name">

            <a href="#">Isla Ellis</a>

        </h3>

        <strong class="uol-people-profile__position">Lecturer in Algebra</strong>

        <div class="uol-info-list-container">
            <dl class="uol-info-list ">

                <div class="uol-info-list__group">
                    <dt class="uol-info-list__term ">Areas of expertise</dt>

                    <dd class="uol-info-list__data ">

                        Deafness in childhood and young people (0-25 yrs)

                    </dd>

                    <dd class="uol-info-list__data ">

                        Language development

                    </dd>

                    <dd class="uol-info-list__data ">

                        Special educational needs and disability

                    </dd>

                    <dd class="uol-info-list__data ">

                        Inclusive education

                    </dd>

                    <dd class="uol-info-list__data ">

                        Classroom practice

                    </dd>

                    <dd class="uol-info-list__data ">

                        Teacher development and CPD

                    </dd>

                </div>

            </dl>
        </div>

        <div class="uol-info-list-container">
            <dl class="uol-info-list uol-info-list--inline">

                <div class="uol-info-list__group">
                    <dt class="uol-info-list__term ">Email</dt>

                    <dd class="uol-info-list__data uol-info-list__data--email">

                        <a href="mailto:I.Ellis@leeds.ac.uk">I.Ellis@leeds.ac.uk</a>

                    </dd>

                </div>

                <div class="uol-info-list__group">
                    <dt class="uol-info-list__term ">Phone</dt>

                    <dd class="uol-info-list__data uol-info-list__data--phone">

                        <a href="tel:+44(0)113 343 4433">+44(0)113 343 4433</a>

                    </dd>

                </div>

            </dl>
        </div>

    </li>

    <li class="uol-people-profile__card uol-people-profile__card--image-layout">

        <h3 class="uol-people-profile__name">

            <a href="#">Tony Bailey</a>

        </h3>

        <img class="uol-people-profile__img" src="/placeholders/ph-profile-staff-01.jpg" alt="Profile picture of Tony Bailey">

        <strong class="uol-people-profile__position">Associate Professor in Inclusive Education (SEND) with expertise in Deaf Education</strong>

        <div class="uol-info-list-container">
            <dl class="uol-info-list ">

                <div class="uol-info-list__group">
                    <dt class="uol-info-list__term ">Areas of expertise</dt>

                    <dd class="uol-info-list__data ">

                        Deafness in childhood and young people (0-25 yrs)

                    </dd>

                    <dd class="uol-info-list__data ">

                        Language development

                    </dd>

                    <dd class="uol-info-list__data ">

                        Special educational needs and disability

                    </dd>

                    <dd class="uol-info-list__data ">

                        Inclusive education

                    </dd>

                    <dd class="uol-info-list__data ">

                        Classroom practice

                    </dd>

                    <dd class="uol-info-list__data ">

                        Teacher development and CPD

                    </dd>

                </div>

            </dl>
        </div>

        <div class="uol-info-list-container">
            <dl class="uol-info-list uol-info-list--inline">

                <div class="uol-info-list__group">
                    <dt class="uol-info-list__term ">Email</dt>

                    <dd class="uol-info-list__data uol-info-list__data--email">

                        <a href="mailto:t.bailey@leeds.ac.uk">t.bailey@leeds.ac.uk</a>

                    </dd>

                </div>

                <div class="uol-info-list__group">
                    <dt class="uol-info-list__term ">Phone</dt>

                    <dd class="uol-info-list__data uol-info-list__data--phone">

                        <a href="tel:+44(0)113 343 5000">+44(0)113 343 5000</a>

                    </dd>

                </div>

            </dl>
        </div>

    </li>

    <li class="uol-people-profile__card uol-people-profile__card--image-layout">

        <h3 class="uol-people-profile__name">

            <a href="#">Quentin Perezz</a>

        </h3>

        <img class="uol-people-profile__img" src="/placeholders/ph-profile-staff-02.jpg" alt="Profile picture of Quentin Perezz">

        <strong class="uol-people-profile__position">Associate Professor in Social Inequalities (Teaching &amp; Research)</strong>

        <div class="uol-info-list-container">
            <dl class="uol-info-list ">

                <div class="uol-info-list__group">
                    <dt class="uol-info-list__term ">Areas of expertise</dt>

                    <dd class="uol-info-list__data ">

                        The sociology of youth and education

                    </dd>

                    <dd class="uol-info-list__data ">

                        Youth transitions and inequalities of class, gender and race

                    </dd>

                    <dd class="uol-info-list__data ">

                        Class, gender and popular culture

                    </dd>

                </div>

            </dl>
        </div>

        <div class="uol-info-list-container">
            <dl class="uol-info-list uol-info-list--inline">

                <div class="uol-info-list__group">
                    <dt class="uol-info-list__term ">Email</dt>

                    <dd class="uol-info-list__data uol-info-list__data--email">

                        <a href="mailto:Q.Perezz@leeds.ac.uk">Q.Perezz@leeds.ac.uk</a>

                    </dd>

                </div>

                <div class="uol-info-list__group">
                    <dt class="uol-info-list__term ">Phone</dt>

                    <dd class="uol-info-list__data uol-info-list__data--phone">

                        <a href="tel:+44(0)113 343 5000">+44(0)113 343 5000</a>

                    </dd>

                </div>

            </dl>
        </div>

    </li>

    <li class="uol-people-profile__card uol-people-profile__card--image-layout">

        <h3 class="uol-people-profile__name">

            <a href="#">Logan Fox</a>

        </h3>

        <img class="uol-people-profile__img" src="/placeholders/ph-profile-staff-03.jpg" alt="Profile picture of Logan Fox">

        <strong class="uol-people-profile__position">Head of School of Mathematics, Professor in Theoretical Physics</strong>

        <div class="uol-info-list-container">
            <dl class="uol-info-list ">

                <div class="uol-info-list__group">
                    <dt class="uol-info-list__term ">Areas of expertise</dt>

                    <dd class="uol-info-list__data ">

                        Theoretical Physics

                    </dd>

                    <dd class="uol-info-list__data ">

                        Quantum Field Theory

                    </dd>

                    <dd class="uol-info-list__data ">

                        Computational Physics

                    </dd>

                    <dd class="uol-info-list__data ">

                        Lattice Gauge Theory

                    </dd>

                    <dd class="uol-info-list__data ">

                        Statistical Field Theory

                    </dd>

                </div>

            </dl>
        </div>

        <div class="uol-info-list-container">
            <dl class="uol-info-list uol-info-list--inline">

                <div class="uol-info-list__group">
                    <dt class="uol-info-list__term ">Email</dt>

                    <dd class="uol-info-list__data uol-info-list__data--email">

                        <a href="mailto:L.Fox@leeds.ac.uk ">L.Fox@leeds.ac.uk </a>

                    </dd>

                </div>

                <div class="uol-info-list__group">
                    <dt class="uol-info-list__term ">Phone</dt>

                    <dd class="uol-info-list__data uol-info-list__data--phone">

                        <a href="tel:+44(0)113 343 5414">+44(0)113 343 5414</a>

                    </dd>

                </div>

            </dl>
        </div>

    </li>

</ul>

<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": "Staff profile search"
  },
  "form": {
    "button_inline": true,
    "action": "/example-form-action",
    "button": {
      "content": "Search",
      "type": "submit"
    },
    "fields": [
      {
        "type": "search",
        "id": "search-term",
        "name": "search-term",
        "label": "Search people",
        "invalid": false,
        "has_icon": true
      }
    ]
  },
  "search_term": "Smith",
  "results_items": {
    "heading_level": "h3",
    "items": [
      {
        "url": "#",
        "person_name": "Isla Ellis",
        "position": "Lecturer in Algebra",
        "specialisms": [
          {
            "label": "Deafness in childhood and young people (0-25 yrs)"
          },
          {
            "label": "Language development"
          },
          {
            "label": "Special educational needs and disability"
          },
          {
            "label": "Inclusive education"
          },
          {
            "label": "Classroom practice"
          },
          {
            "label": "Teacher development and CPD"
          }
        ],
        "email": "I.Ellis@leeds.ac.uk",
        "phone": "+44(0)113 343 4433"
      },
      {
        "img": "/placeholders/ph-profile-staff-01.jpg",
        "url": "#",
        "person_name": "Tony Bailey",
        "position": "Associate Professor in Inclusive Education (SEND) with expertise in Deaf Education",
        "specialisms": [
          {
            "label": "Deafness in childhood and young people (0-25 yrs)"
          },
          {
            "label": "Language development"
          },
          {
            "label": "Special educational needs and disability"
          },
          {
            "label": "Inclusive education"
          },
          {
            "label": "Classroom practice"
          },
          {
            "label": "Teacher development and CPD"
          }
        ],
        "email": "t.bailey@leeds.ac.uk",
        "phone": "+44(0)113 343 5000"
      },
      {
        "img": "/placeholders/ph-profile-staff-02.jpg",
        "url": "#",
        "person_name": "Quentin Perezz",
        "position": "Associate Professor in Social Inequalities (Teaching & Research)",
        "specialisms": [
          {
            "label": "The sociology of youth and education"
          },
          {
            "label": "Youth transitions and inequalities of class, gender and race"
          },
          {
            "label": "Class, gender and popular culture"
          }
        ],
        "email": "Q.Perezz@leeds.ac.uk",
        "phone": "+44(0)113 343 5000"
      },
      {
        "img": "/placeholders/ph-profile-staff-03.jpg",
        "url": "#",
        "person_name": "Logan Fox",
        "position": "Head of School of Mathematics, Professor in Theoretical Physics",
        "specialisms": [
          {
            "label": "Theoretical Physics"
          },
          {
            "label": "Quantum Field Theory"
          },
          {
            "label": "Computational Physics"
          },
          {
            "label": "Lattice Gauge Theory"
          },
          {
            "label": "Statistical Field Theory"
          }
        ],
        "email": "L.Fox@leeds.ac.uk ",
        "phone": "+44(0)113 343 5414"
      }
    ]
  },
  "pagination": {
    "current": 1,
    "pages": [
      {
        "number": 1,
        "url": "/page-1"
      },
      {
        "number": 2,
        "url": "/page-2"
      },
      {
        "number": 3,
        "url": "/page-3"
      },
      {
        "number": 4,
        "url": "/page-4"
      }
    ]
  }
}