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--error ">
    <span class="uol-icon  uol-icon--status-error ">
        <span class="hide-accessible">Error:</span>
        This is an error 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
{
  "type": "error",
  "text": "This is an error message"
}