University of Leeds Design System v1.0.13

Status Message

Guidance

The @uol-status-message component provides a method of displaying messages with statuses and corresponding status icons.

Available statuses are:

  • info
  • success
  • error
  • warning

When to use

This component is currently only used within the @uol-people-profile-card component.

When not to use

Do not use outside the @uol-people-profile-card component.

Developer guidance

Configuration parameters:

Name Type Required/Optional Description
type string Required. ‘info’, ‘success’, ‘error’ or ‘warning’
text string Required. Text string. May contain <strong>, <em> or <a>tags

Example config

  'context': {
    'type': 'info',
    'text': '<strong>This</strong> in an info message'
  },
<div class="uol-status-message {% if type %} uol-status-message--{{ type }} {% endif %}">
  <span class="uol-icon {% if type %} uol-icon--status-{{ type }} {% endif %}">
    {% if type %}<span class="hide-accessible">{{ type | title }}:</span>{% endif %}
    {{ text | safe }}
  </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>
        <strong>This</strong> in an info message
    </span>
</div>
  • Content: 
    .uol-status-message {
  display: block;

  + .uol-status-message {
    margin-top: $spacing-2;
  }

  color: $color-font--dark;

  strong {
    font-weight: $font-weight-medium--sans-serif;
  }

  svg {
    path {
      fill: $color-black--dark;

      @media screen and (forced-colors: active) {
        fill: CanvasText;
      }
    }
  }

  svg + .uol-icon__label {
    margin-left: $spacing-1;
  }
}
  • URL: /components/raw/uol-status-message/_status-message.scss
  • Filesystem Path: src/library/02-components/status-message/_status-message.scss
  • Size: 404 Bytes 
/* No context defined. */