Results

Results component

Summary

Thoroughout the design system there are a range of different but similar results components. These have now been consolidated in to one single component called ‘results’. This component and its associated variants incorporates all different styles and requirements of previously used results components.

Previous components are still in the design system as implemented sites may still use them. Going forward implemented sites to use this new component and where possible convert any old to new.

Implementation caution

Despite similarities between other components, when implemented this should be treated as a new component. Parameter names, mark up and styling are not the same as previous component detail.

Results items display as a results card within a bounding box. The whole card can act as a single active link, or individual elements can appear as an separate links within the card. Both options should be giving a valid link address in the ‘url’ parameter.

In order to make the whole card an active link the ‘block_link’ parameter (see example below) should be set to true. This makes the whole card act as an active link and no other options with links should be used within the card.

If ‘block_link’ is omitted or set to be false then the link URL is added to the title on the card and this title acts as the active link.

Image options

The result card can either have no image, a rectangular image or a circular image.

When no image is provided, the text content takes up the space where the image would be. Although it is advisable to have all results cards the same (all with no image, all with rectangular image or all with circular images) a page can contain some items with no image and some with an image. A page must not have a combination of some rectangular images and some circular images. Circular images are cropped to the horizontal centre of the image so ensure faces are central. An image is set to be circular when the ‘circle’ parameter is true. All images must have a ‘url’ (path to image) and ‘alt’ tag text representation.

Cards are generally all of a certain type. This type can be any text, example types are ‘event’, ‘course’, ‘profile’. One or more of these results can be labelled as a featured result. This/these should be placed at the top of the list of items. When the ‘featured’ parameter is set to true, this visuially highlights this item and labels it as ‘Featured type’ where type is specified by the ‘type’ parameter. The type should start with a lower case letter. See example below.

Text content

The only compulsory item a result card must have is a title, but aim to add further relevant content to the card. Content appears in the following order:

  • Title
  • Subtitle
  • Opening text
  • Specialisms
  • Category data pairs
  • Email
  • Phone
  • Closing paragraph
  • Footer with actions and messages

Specialisms

As a special content example, the optional specialisms array shows an array of labels. These display as:

‘Area(s) of expertise: Specialism 1, Specialism 2 etc.’

Category data pairs

Visually displaying similar to the specialisms, singular category data pairs are displayed as:

‘Category title: Category data’

Email

Adding the email value displays the email address as follows with the email address acting as an active link to the default email client.

‘Email: email address’

Phone

Adding the phone value displays the phone number as follows with the phone number acting as an active link on communication devices.

‘Phone: valid phone number’

The optional footer element of the card can have one or multiple optional Actions and or Messages.

Actions

Actions are intended to be used to provide interactivity to a profile card e.g., “Connect”, “Save”, “Edit” etc.

Each action is rendered as a button and supports all @uol-button configuration options.

NB: Although it is technically possible to render an “icon-only” button, you must not do so in this context.

Messages

Messages are intended to provide post interaction confirmation (e.g. “You messaged this user on [DATE]” ) or status information (e.g. “User last active X days ago”).

Messages are rendered using @uol-status-message

Config example

Each card is an object within the items array. The following example exhibits all possible content as detailed above:

'items': [
  {
    'featured': true,
    'type': 'profile',
    'block_link': true,
    'image': {
      'src': '/placeholders/avatars/Avatar-2.jpg',
      'alt': 'Debbi Tennison',
      'circle': true,
    },
    'url': '/result-link-2',
    'title': 'Circluar image',
    'subtitle': 'Subheading',
    'opening_text': 'Opening text',
    'specialisms': [
      {
        'label': 'Theoretical Physics'
      },
      {
        'label': 'Quantum Field Theory'
      },
    ],
    'category_data': [
      {
        'title': 'Category title',
        'data': 'Category data'
      },
      {
        'title': 'Category title',
        'data': 'Category data'
      },
    ],
    'email': 'L.Fox@leeds.ac.uk ',
    'phone': '+44(0)113 343 5414',
    'closing_text': 'Closing text',
    'messages': [
      {
        'text': '<strong>Email sent</strong> 22 November 2022',
        'type': 'success'
      },
      {
        'text': 'Response received',
        'type': 'info'
      },
      {
        'text': 'Something went wrong',
        'type': 'error'
      },
      {
        'text': 'This is a warning',
        'type': 'warning'
      },
      {
        'text': 'This is a warning message with a very long text that will wrap on smaller screens',
        'type': 'warning'
      },
    ],
    'actions': [
      {
        'id': 'button-unique-id-1',
        'style': 'primary',
        'type': 'button',
        'name': 'contact',
        'content': 'Contact',
      },
      {
        'id': 'button-unique-id-2',
        'style': 'secondary',
        'type': 'button',
        'name': 'save',
        'content': 'Save',
      },
      {
        'id': 'button-unique-id-3',
        'type': 'button',
        'name': 'report',
        'content': 'Report',
        'disabled': true,
      },
    ]
  }
]
{% if items.length %}
<div class="uol-results">
  {% for item in items %}
    <article class="uol-results ">
      
      {% if item.featured %}
        <div class="uol-results__featured">
          <div class="uol-results__featured__text">Featured {{ item.type }}</div>
        </div>
      {% endif %}
      
      <div class="uol-results__content {{ 'uol-results__link' if item.block_link }}">

        <div class="
          {{ 'uol-results__image' if item.image }} 
          {{ 'uol-results__image--circle' if item.image.circle else 'uol-results__image--rectangle' }}
          ">

          {% if item.image.src %}
            <div class="uol-results__image__container">
              <img src="{{ item.image.src }}" alt="{{ item.image.alt }}">
            </div>
          {% endif %}

          <div class="uol-results__text">
            <h2>
              <a href="{{ item.url }}">{{ item.title | safe }}{% if item.featured %}<span class="hide-accessible">: Featured {{ item.type }}</span>{% endif %}</a>
            </h2>

            {% if item.subtitle %}
              <p class="uol-results__text--highlight">{{ item.subtitle | safe }}</p> 
            {% endif %}

            {% if item.opening_text %} 
              <p class="uol-results__text--standard">{{ item.opening_text | safe }}</p> 
            {% endif %}

            {% if item.specialisms.length %}
              {% set expertiseLabel = 'Areas of expertise' if item.specialisms.length > 1 else 'Area of expertise' %}
              {% render '@uol-info-list', {
                'info_list': [
                  {
                    'term': expertiseLabel,
                    'data': item.specialisms
                  }
                ]
              } %}
            {% endif %}

            {% if item.category_data.length %}
              <dl class="uol-results__text--definition">
                {% for data in item.category_data %}
                  <div class="uol-results__text--standard">
                    <dt class="uol-results__text--definition__label">{{ data.title }}</dt>
                    <dd class="uol-results__text--definition__data">{{ data.data }}</dd>
                  </div>
                {% endfor %}
              </dl>
            {% endif %}

            {% if item.email or item.phone %}
              {% render '@uol-info-list', {
                'info_list_style': 'inline',
                'info_list': [
                  {
                    'term': 'Email',
                    'data': [
                      {
                        'type': 'email',
                        'label': item.email
                      }
                    ]
                  },
                  {
                    'term': 'Phone',
                    'data': [
                      {
                        'type': 'phone',
                        'label': item.phone
                      }
                    ]
                  }
                ]
              } %}
            {% endif %}

            {% if item.closing_text %} 
              <p class="uol-results__text--standard">{{ item.closing_text | safe }}</p> 
            {% endif %}

            

          </div>

          
        </div>
        
        {% if item.messages or item.actions %}
            <div class="uol-multilink-results__footer">

              {% if item.messages %}
                <div class="uol-multilink-results__footer__messages">
                  {% for message in item.messages %}
                    {% render '@uol-status-message', message  %}
                  {% endfor %}
                </div>
              {% endif %}

              {% if item.actions %}
                <div class="uol-multilink-results__footer__actions">
                  {% for action in item.actions %}
                    {% render '@uol-button', action %}
                  {% endfor %}
                </div>
              {% endif %}

            </div>

          {% endif %}

      </div>

      
    </article>
   {% endfor %}
</div>
{% endif %}
<div class="uol-results">

    <article class="uol-results ">

        <div class="uol-results__content ">

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

                <div class="uol-results__image__container">
                    <img src="/placeholders/campus/medium/28598.jpeg" alt="Image description">
                </div>

                <div class="uol-results__text">
                    <h2>
                        <a href="/result-link-2">Default item</a>
                    </h2>

                    <p class="uol-results__text--highlight">Subtitle</p>

                    <p class="uol-results__text--standard">Optional data appears on page in following order. Subtitle, opening text, specialisms, category data pairs, email, phone, closing paragraph, footer with actions and messages</p>

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

                    <dl class="uol-results__text--definition">

                        <div class="uol-results__text--standard">
                            <dt class="uol-results__text--definition__label">Category title</dt>
                            <dd class="uol-results__text--definition__data">Category data</dd>
                        </div>

                        <div class="uol-results__text--standard">
                            <dt class="uol-results__text--definition__label">Category title</dt>
                            <dd class="uol-results__text--definition__data">Category data</dd>
                        </div>

                    </dl>

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

                    <p class="uol-results__text--standard">Closing text. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Placeat porro cupiditate magnam ex enim tempore corrupti corporis laudantium reiciendis voluptatem, sapiente saepe officiis dolorum.</p>

                </div>

            </div>

            <div class="uol-multilink-results__footer">

                <div class="uol-multilink-results__footer__messages">

                    <div class="uol-status-message  uol-status-message--success ">
                        <span class="uol-icon  uol-icon--status-success ">
                            <span class="hide-accessible">Success:</span>
                            <strong>Email sent</strong> 22 November 2022
                        </span>
                    </div>

                    <div class="uol-status-message  uol-status-message--info ">
                        <span class="uol-icon  uol-icon--status-info ">
                            <span class="hide-accessible">Info:</span>
                            Response received
                        </span>
                    </div>

                    <div class="uol-status-message  uol-status-message--error ">
                        <span class="uol-icon  uol-icon--status-error ">
                            <span class="hide-accessible">Error:</span>
                            Something went wrong
                        </span>
                    </div>

                    <div class="uol-status-message  uol-status-message--warning ">
                        <span class="uol-icon  uol-icon--status-warning ">
                            <span class="hide-accessible">Warning:</span>
                            This is a warning
                        </span>
                    </div>

                    <div class="uol-status-message  uol-status-message--warning ">
                        <span class="uol-icon  uol-icon--status-warning ">
                            <span class="hide-accessible">Warning:</span>
                            This is a warning message with a very long text that will wrap on smaller screens
                        </span>
                    </div>

                </div>

                <div class="uol-multilink-results__footer__actions">

                    <button id="button-unique-id-1" name="contact" class="uol-button uol-button--primary
    " type="button">Contact</button>

                    <button id="button-unique-id-2" name="save" class="uol-button uol-button--secondary
    " type="button">Save</button>

                    <button id="button-unique-id-3" name="report" class="uol-button uol-button--
    " type="button" disabled>Report</button>

                </div>

            </div>

        </div>

    </article>

</div>
  • Content:
    .uol-results {
      /*
      Circle image sizes
      Do as parameters as also used for heading alongside with float layout
      */
    
      $width320: 97px;
      $width414: 116px;
      $width768: 156px;
      $width1024: 161px;
      $width1440: 179px;
      $width1660: 215px;
    
      margin: 0 auto;
      max-width: 1188px;
    
      .uol-results {
        position: relative;
        margin: $spacing-4 0;
    
        @include media(">=uol-media-l") {
          margin: $spacing-5 0;
        }
    
        @include media(">=uol-media-xl") {
          margin: $spacing-6 0;
        }
    
        &:first-child {
          margin-top: 0;
        }
    
        // Whatever is last item has no margin or padding so spacing set by container    
        .uol-results__text > *:last-child,
        .uol-results__text > *:last-child > *:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
        }
    
        .uol-results__featured {
          color: $color-white;
          display: flex;
          border-bottom: 2px solid $color-black;
    
          & ~ .uol-results__link {
            border-top: none;
          }
    
          @include media(">=uol-media-m") {
            flex-direction: row;
          }
        }
    
        .uol-results__featured__text {
          padding: $spacing-2 $spacing-4;
          background: $color-black;
          color: $color-white; 
        }
    
        .uol-results__content {
          background: $color-grey--faded;
          border: 1px solid rgba($color-border--light, 0.6);
          padding: $spacing-5 $spacing-4 $spacing-6;
    
          @include media(">=uol-media-m") {
            padding: $spacing-5 $spacing-4 $spacing-6;
          }
    
          @include media(">=uol-media-l") {
            padding: $spacing-5 $spacing-5 $spacing-6;
          }
        }
    
        .uol-results__link {
          box-sizing: border-box;
          position: relative;
          display: flex;
          flex-direction: column;
          transition: all .25s ease-in-out;
          transition: box-shadow 0.25s ease-in-out;
    
          &:hover,
          &:focus-within {
            box-shadow:
              0 15px 25px rgba($color-black--dark, 0.15),
              0 5px 10px rgba($color-black--dark, 0.05);
          }
    
          a {
            text-decoration: none;
            display: block;
            
            // Sets whole parent container to be active link
            &::after {
              content: "";
              position: absolute;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0;
            }
    
            &:hover,
            &:focus {
              text-decoration: underline;
            }
          }
        }
    
        .uol-results__image {
          display: flex;
          flex-direction: column;
    
          @include media(">=uol-media-m") {
            flex-direction: row;
            column-gap: $spacing-4;
          }
    
          @include media(">=uol-media-l") {
            column-gap: $spacing-5;
          }
    
          @include media(">=uol-media-xl") {
            column-gap: $spacing-6;
          }
        }
          
          .uol-results__image__container {
            position: relative;
    
            img {
              width: 100%;
              display: block;
            }
          }
        
        h2 {
          margin: 0;
    
          @extend .uol-typography-heading-4;
    
          font-size: 1.375rem; // 22px
      
          @include media(">=uol-media-m") {
            font-size: 1.75rem; // 28px
          }
    
          text-decoration: none;
        }
    
        .uol-results__image--circle {
          display: block;
    
          @include media(">=uol-media-m") {
            display: flex;
          }
    
          .uol-results__image__container {
            min-width: inherit;
            position: relative;
            float: left;
            margin-right: $spacing-4;
    
            @include media(">=uol-media-m") {
              margin-right: 0;
            }
          }
    
          img {
            border-radius: 50%;
            object-fit: cover;
            width: $width320;
            height: $width320;
            
            @include media(">=uol-media-xs") {
              width: $width414;
              height: $width414;
            }
      
            @include media(">=uol-media-m") {
              width: $width768;
              height: $width768;
            }
      
            @include media(">=uol-media-l") {
              width: $width1024;
              height: $width1024;
            }
      
            @include media(">=uol-media-xl") {
              width: $width1440;
              height: $width1440;
            }
      
            @include media(">=uol-media-xxl") {
              width: $width1660;
              height: $width1660;
            }
          }
    
          h2 {
    
            height: calc(#{$width320} - #{$spacing-4});
            margin-bottom: $spacing-4;
            padding-top: $spacing-4;
    
            @include media(">=uol-media-xs") {
              height: calc(#{$width414} - #{$spacing-4});
            }
      
            @include media(">=uol-media-m") {
              height: inherit;
              margin-bottom: $spacing-2;
              padding-top: 0;
            }
            
          }
        }
    
        .uol-results__image--rectangle {
          img {
            margin: -24px -16px $spacing-5;
            width: calc(100% + #{$spacing-6});
            display: block;
    
            @include media(">=uol-media-m") {
              margin: 0;
              width: 220px;
            }
    
            @include media(">=uol-media-l") {
              width: 290px;
            }
    
            @include media(">=uol-media-xxl") {
              width: 344px;
            }
          }
        }
    
        .uol-results__text {
    
          @include media(">=uol-media-s") {
            max-width: 470px;
          }
    
          @include media(">=uol-media-m") {
            max-width: 610px;
          }
    
          @include media(">=uol-media-l") {
            max-width: 648px;
          }
    
          @include media(">=uol-media-xl") {
            max-width: 674px;
          }
    
          @include media(">=uol-media-xxl") {
            max-width: 784px;
          }
        }
    
        .uol-results__text--highlight {
          @extend .uol-typography-heading-6;
          color: $color-brand;
        }
    
        .uol-results__text--highlight,
        .uol-results__text--standard,
        .uol-info-list {
          margin: $spacing-2 0;
        }
    
        .uol-results__text--standard {
          @extend .uol-typography-paragraph-small;
        }
    
        .uol-results__text--definition {
          // each definition has text--standard margin so this needs to be zero
          margin: 0;
        }
    
        .uol-results__text--definition__data {
          @extend .uol-typography-paragraph-small;
    
          margin: 0;
          display: inline;
    
          &::after {
            content: "";
            display: inline-block;
            position: relative;
            width: 1px;
            height: 0.8em;
            background-color: $color-brand;
            margin-left: 0.3em;
            margin-right: 0.15em;
            top: 0.1em;
          }
    
          &:last-of-type {
            &::after {
              content: none;
            }
          }
        }
    
        .uol-results__text--definition__label {
          
          display: inline;
          font-weight: $font-weight-bold--sans-serif;
    
          &::after {
            content: ":";
          }
        } 
      }
    
      .uol-info-list {
        @extend .text-size-paragraph--small;
      }
    }
    
    
  • URL: /components/raw/uol-results/_results.scss
  • Filesystem Path: src/library/02-components/results/_results.scss
  • Size: 6.6 KB
{
  "items": [
    {
      "featured": false,
      "type": "item",
      "block_link": false,
      "image": {
        "src": "/placeholders/campus/medium/28598.jpeg",
        "alt": "Image description",
        "circle": false
      },
      "url": "/result-link-2",
      "title": "Default item",
      "subtitle": "Subtitle",
      "opening_text": "Optional data appears on page in following order. Subtitle, opening text, specialisms, category data pairs, email, phone, closing paragraph, footer with actions and messages",
      "category_data": [
        {
          "title": "Category title",
          "data": "Category data"
        },
        {
          "title": "Category title",
          "data": "Category data"
        }
      ],
      "closing_text": "Closing text. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Placeat porro cupiditate magnam ex enim tempore corrupti corporis laudantium reiciendis voluptatem, sapiente saepe officiis dolorum.",
      "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",
      "messages": [
        {
          "text": "<strong>Email sent</strong> 22 November 2022",
          "type": "success"
        },
        {
          "text": "Response received",
          "type": "info"
        },
        {
          "text": "Something went wrong",
          "type": "error"
        },
        {
          "text": "This is a warning",
          "type": "warning"
        },
        {
          "text": "This is a warning message with a very long text that will wrap on smaller screens",
          "type": "warning"
        }
      ],
      "actions": [
        {
          "id": "button-unique-id-1",
          "style": "primary",
          "type": "button",
          "name": "contact",
          "content": "Contact"
        },
        {
          "id": "button-unique-id-2",
          "style": "secondary",
          "type": "button",
          "name": "save",
          "content": "Save"
        },
        {
          "id": "button-unique-id-3",
          "type": "button",
          "name": "report",
          "content": "Report",
          "disabled": true
        }
      ]
    }
  ]
}