Wellcome Web Components

System Message: Error 

<div class="system-message system-message--error" role="alert">
    <h3 class="system-message__title">This is a system error message</h3>
    <ul class="system-message__messages">
        <li class="system-message__messages__item">Something is wrong</li>
        <li class="system-message__messages__item">It is not our fault</li>
        <li class="system-message__messages__item">Perhaps it is</li>
        <li class="system-message__messages__item">Give me 5 mins</li>
    </ul>
</div>
  • Content: 
    .system-message {
  @include rem(margin, $grid-typo-spacing-l 0);
  background: none;
  padding: 0;

  .system-message__title {
    @include rem(padding, $grid-typo-spacing-xs);
    border-top: 0;
    color: $white;
    margin-top: 0;

    &:before {
      @extend %icon--error--white;
      background-repeat: no-repeat;
      content: '';
      display: inline-block;
      height: 1em;
      margin-right: 0.4em;
      position: relative;
      top: -2px; // optically correcting for svg shape
      vertical-align: middle;
      width: 1em;
    }
  }

  .system-message__messages {
    @include rem(padding, $grid-typo-spacing-xs);
    margin: 0;
  }
}

@mixin system-message-colour($colour) {
  border: solid 1px $colour;

  .system-message__title {
    background-color: $colour;
  }

  .system-message__messages__item {
    &:before {
      background: $colour;
    }
  }
}

.system-message--error {
  @include system-message-colour($iscNegative);
}

.system-message--warning,
.system-message--status {
  @include system-message-colour($ncOrange);
}
  • URL: /components/raw/system-message/_error-message.scss
  • Filesystem Path: ../../modules/custom/corp_markup/theme/misc/system_message.tpl.php/_error-message.scss
  • Size: 1.1 KB

Description

This is the component for Drupal error/warning/staus messages.

Example usage: ideally never. These messages are not shown to users who are not logged in to Drupal.

Content notes

UX notes

Design notes

Back-end notes

Front-end notes

{
  "title": "This is a system error message",
  "level": "error",
  "messages": [
    "Something is wrong",
    "It is not our fault",
    "Perhaps it is",
    "Give me 5 mins"
  ]
}