University of Leeds Design System v1.0.14.2

People Profile Card: With Message

Guidance

The @uol-people-profile-card provides a summary of a person’s details and contains a link to their full profile page. This guidance is for the implementation of one profile card, to display multiple cards use the @uol-people-profile-cards component.

When to use

Use when a page will only ever display one profile card. As an example, an author’s profile on a blog post. If multiple cards are intended to be displayed, such as in a group of staff members, then use the @uol-people-profile-cards.

When not to use

Do not use in instances where there will be multiple cards to display, use @uol-people-profile-cards for instances where the number of cards to be displayed in a group exceeds one.

Developer guidance

Heading Level

heading_level is optional, if it is set it should be set using the correct hierarchy, considering the page’s existing heading structure, otherwise it will default to <h3>. The heading level should be reflect any changes in the overall page heading outline.

example:

'context': {
  'heading_level': 'h3',
  ...

Item

Example:

'context': {
  ...
  'item': {
     ...
  }
}

The following sections detail required and optional parameters which can be added to an item object. A full example including all parameters is provided below.

Name

Required parameter ‘person_name’: Person’s name.

Image

Optional parameter ‘img’: The image should be .jpg format with dimensions 344px x 344px. The image content data should be the relative path to the image location.

URL

Optional parameter ‘url’: Relative or absolute link to the person’s profile page.

Position

Optional parameter ‘position’: The staff member’s position within the organisation.

Specialisms

Optional parameter ‘specialisms’: An array of objects with each specialism set by the label value.

eg. ‘specialisms’: [ {‘label’: ‘Deafness in childhood and young people (0-25 yrs)’}, {‘label’: ‘Language development’} ]

Email

Optional parameter ‘email’: Person’s email address (will act as an active link to default email) .

Phone

Optional parameter ‘phone’: This should take one of two formats ‘+44(0)113 343 5000’ or ‘0113 343 5000’. Using either of these formats will result in the device being an active link placing a call on an applicable device.

Actions and Messages

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

Full example

A full example of an item to display is as follows (this example omits the heading_level) and it will be automatically set as h3:

'context': {
  'item': {
    'person_name': 'Tony Bailey',
    'img': '/placeholders/ph-profile-staff-01.jpg',
    'url': '#',
    'position': 'Associate Professor in Inclusive Education (SEND) with expertise in Deaf Education',
    'specialisms': ['Deafness in childhood and young people (0-25 yrs)', 'Language development', 'Special educational needs and disability', 'Inclusive education', 'Classroom practice', 'Teacher development and CPD'],
    'email': 'bailey92@techholic.in',
    'phone': '+44(0)113 343 5000',
    'messages': [
      {
        'text': '<strong>Email sent</strong> 22 November 2022',
        'type': 'success'
      },
      {
        'text': 'Response received',
        'type': 'info'
      }
    ],
    'actions': [
      {
        'id': 'button-unique-id-1',
        'style': 'primary',
        'type': 'button',
        'name': 'contact',
        'content': 'Contact',
      }
    ]
  }

<{{ 'li' if multiple else 'div'}} class="uol-people-profile__card {{ 'uol-people-profile__card--image-layout' if item.img }}">

  <{{ heading_level if heading_level else 'h3' }} class="uol-people-profile__name">
    {% if item.url%}
      <a href="{{ item.url }}">{{ item.person_name }}</a>
    {% else %}
      {{ item.person_name }}
    {% endif %}
  </{{ heading_level if heading_level else 'h3' }}>
  {% if item.img %}
    <img class="uol-people-profile__img" src="{{ item.img }}" alt="Profile picture of {{ item.person_name }}">
  {% endif %}
  <strong class="uol-people-profile__position">{{ item.position }}</strong>

  {% 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.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 %}

  {% render '@uol-info-list', { 'info_list': item.additional } %}

  {% if item.messages or item.actions %}
    <div class="uol-people-profile__footer">

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

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

    </div>

  {% endif %}
</{{ 'li' if multiple else 'div' }}>
 
<div 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>

    <div class="uol-people-profile__footer">

        <div class="uol-people-profile__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>

    </div>

</div>
  • Content: 
    // Images sizes: Used for images and sizing of neighbours
$ProfileImageSize: 5.75rem;
$ProfileImageSizeXS: 7.25rem;
$ProfileImageSizeM: 9.75rem;
$ProfileImageSizeL: 7.875rem;
$ProfileImageSizeXL: 10.75rem;

.uol-people-profile__card {
  position: relative;
  list-style: none;
  margin-bottom: $spacing-4;
  padding: $spacing-5 $spacing-4 $spacing-6;
  border: 1px solid $color-border--light;
  border-radius: 6px;
  background-color: $color-grey--faded;
  font-variant-numeric: lining-nums;
  color: $color-font;
  overflow: auto;

  &:last-child {
    margin-bottom: $spacing-6;
  }

  // TODO: Add XXS breakpoint
  @include media("<320px") {
    display: flex;
    flex-wrap: wrap;
  }

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

  @include media(">=uol-media-l") {
    margin-bottom: $spacing-5;
    padding: $spacing-5 $spacing-5 $spacing-6;

    &:last-child {
      margin-bottom: $spacing-7;
    }
  }

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

  .uol-info-list {
    @extend %text-size-paragraph--small;

    margin: 0 0 $spacing-2;
  }

  .uol-info-list-container {

    @include media("<uol-media-m") {
      clear: both;
    }


    &:last-of-type {
      .uol-info-list {
        margin-bottom: 0;
      }
    }
  }

  .uol-info-list__group {
    margin-bottom: $spacing-2;

    &:last-of-type {
      margin-bottom: 0;
    }
  }

}

    .uol-people-profile__card--image-layout {

      .uol-info-list {
        width: 100%;

        @include media(">=uol-media-xs") {
          clear: both;
        }
        @include media(">=uol-media-m") {
          clear: none;
          float: right;
          width: calc(100% - #{$ProfileImageSizeM + $spacing-4})
        }

        @include media(">=uol-media-l") {
          width: calc(100% - #{$ProfileImageSizeL + $spacing-5})
        }

        @include media(">=uol-media-xl") {
          width: calc(100% - #{$ProfileImageSizeXL + $spacing-6})
        }
      }
    }

  .uol-people-profile__name {
    @extend %text-size-heading-4;

    margin: 0 0 $spacing-1;
    font-family: $font-family-serif;

    .uol-people-profile__card--image-layout & {
      float: right;

      // TODO: Add XXS breakpoint
      @include media("<320px") {
        width: 100%;
        margin-top: $spacing-4;
      }

      @include media(">=320px") {
        margin-top: $spacing-4;
        width: calc(100% - #{$ProfileImageSize + $spacing-4});
      }

      @include media(">=uol-media-xs") {
        margin-top: 0;
        width: calc(100% - #{$ProfileImageSizeXS + $spacing-4})
      }
      @include media(">=uol-media-m") {
        width: calc(100% - #{$ProfileImageSizeM + $spacing-4})
      }
      @include media(">=uol-media-l") {
        width: calc(100% - #{$ProfileImageSizeL + $spacing-5})
      }
      @include media(">=uol-media-xl") {
        width: calc(100% - #{$ProfileImageSizeXL + $spacing-6})
      }
    }

    a {
      text-decoration: none;

      &:hover,
      &:focus {
        text-decoration: underline;
        outline: 3px dotted transparent;
      }
    }
  }

  .uol-people-profile__img {
    border-radius: 50%;
    width: $ProfileImageSize;
    height: $ProfileImageSize;

    @include media("<uol-media-xs") {
      order: -1;
      margin-bottom: $spacing-2;
    }

    @include media(">=uol-media-xs") {
      float: left;
      width: $ProfileImageSizeXS;
      height: $ProfileImageSizeXS;
      margin-bottom: $spacing-4;
    }

    @include media(">=uol-media-m") {
      width: $ProfileImageSizeM;
      height: $ProfileImageSizeM;
    }

    @include media(">=uol-media-l") {
      width: $ProfileImageSizeL;
      height: $ProfileImageSizeL;
    }

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

  .uol-people-profile__position {
    @extend %text-size-heading-6;

    display: inline-block;
    margin-bottom: $spacing-2;
    font-family: $font-family-serif;
    color: $color-brand;

    .uol-people-profile__card--image-layout & {

      @include media(">=uol-media-xs") {
        float: right;
        width: calc(100% - #{$ProfileImageSizeXS + $spacing-4})
      }

      @include media(">=uol-media-m") {
        width: calc(100% - #{$ProfileImageSizeM + $spacing-4})
      }

      @include media(">=uol-media-l") {
        width: calc(100% - #{$ProfileImageSizeL + $spacing-5})
      }

      @include media(">=uol-media-xl") {
        width: calc(100% - #{$ProfileImageSizeXL + $spacing-6})
      }
    }
  }

  .uol-people-profile__footer {
    clear: both;
    padding: $spacing-4 0 0;

    &:before {
      content: "";
      display: block;
      width: 100%;
      height: 1px;
      background-color: $color-border--light;
    }
  }

    .uol-people-profile__footer__messages {
      @extend %text-size-paragraph--small;

      display: block;
      padding-top: $spacing-4;
      margin-bottom: -#{$spacing-4};

      .js & svg {
        height: 1.5em;
        width: 1.5em;
        min-width: 1.5em;
        margin-top: 0;
      }

      + .uol-people-profile__footer__actions {
        margin-top: $spacing-4;
      }
    }

    .uol-people-profile__footer__actions {
      margin-bottom: -#{$spacing-5};
      padding-top: $spacing-4;

      .uol-button {
        margin: 0 $spacing-4 $spacing-4 0;
      }
    }
  • URL: /components/raw/uol-people-profile-card/_people-profile-card.scss
  • Filesystem Path: src/library/02-components/people-profile-card/_people-profile-card.scss
  • Size: 5.5 KB 
{
  "heading_level": "h3",
  "item": {
    "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-01.jpg",
    "messages": [
      {
        "text": "<strong>Email sent</strong> 22 November 2022",
        "type": "success"
      }
    ]
  }
}