Europa Component Library

Messages: Success

Documentation • Demo

Messages

Why and how to use this component

Provide contextual feedback messages for typical user actions with the available flexible alert messages.\ These includes errors, warnings, and general updates. For each kind of warning we use an icon and a specific colour.

When to use this component

Status Colour Usage
Success EC Green N Forms / Page notification (bellow the page header)
Informative EC Blue N Forms / Page notification (bellow the page header)
Warning EC Orange N Forms / Page notification (bellow the page header)
Error EC Red N Forms / Page notification (bellow the page header)
Live stream EC Orange N Pages with livestream content (bellow the page header)

When not to use this component

  • to include notifications that aren’t related to the user’s current goal
  • but don’t overdo it — too many notifications will either overwhelm or annoy the user and are likely to be ignored
<div class="ecl-message {% if modifier is defined %} ecl-message--{{ modifier }} {% endif %}" role="alert">
  <span class="ecl-u-sr-only">{{ srOnly }}</span>

  {% if dismiss is defined and dismiss %}
  <button type="button" class="ecl-message__dismiss" aria-label="Dismiss this alert">&times;</button>
  {% endif %}

  {% if title is defined %}
  <div class="ecl-message__title">{{ title }}</div>
  {% endif %}

  {% if messages is defined %}
  <ul class="ecl-message__body ecl-list">
    {% for message in messages %}
      <li>{{ message }}</li>
    {% endfor %}
  </ul>
  {% endif %}
</div>
 
{
  "_demo": {
    "scripts": "document.addEventListener('DOMContentLoaded', function () { ECL.initMessages(); });"
  },
  "modifier": "success",
  "dismiss": true,
  "srOnly": "Success message",
  "title": "Some success title",
  "messages": [
    "Lorem ipsum lor sit amet, consectetur adipi"
  ]
}
 
<div class="ecl-message  ecl-message--success " role="alert">
  <span class="ecl-u-sr-only">Success message</span>

  <button type="button" class="ecl-message__dismiss" aria-label="Dismiss this alert">&times;</button>

  <div class="ecl-message__title">Some success title</div>

  <ul class="ecl-message__body ecl-list">
    <li>Lorem ipsum lor sit amet, consectetur adipi</li>
  </ul>
</div>
  • Content: 
    /**
 * Messages
 * @define message
 */

.ecl-message {
  background: transparent url($ecl-assets-path + 'images/messages-info.svg')
    no-repeat 1.2rem 1.2rem;
  border: 2px solid map-get($ecl-colors, 'blue-75');
  color: $ecl-color-shade;
  font-size: map-get($ecl-font-size, 's');
  margin-bottom: map-get($ecl-spacing, 's');
  min-height: map-get($ecl-spacing, 'l');
  padding: map-get($ecl-spacing, 'xs') map-get($ecl-spacing, 'l')
    map-get($ecl-spacing, 'xs') map-get($ecl-spacing, 'xxl');
  position: relative;

  &--success {
    background-image: url($ecl-assets-path + 'images/messages-success.svg');
    border-color: $ecl-color-success;
  }

  &--warning {
    background-image: url($ecl-assets-path + 'images/messages-warning.svg');
    border-color: map-get($ecl-colors, 'yellow-110');
  }

  &--error {
    background-image: url($ecl-assets-path + 'images/messages-error.svg');
    border-color: $ecl-color-error;
  }

  &--live {
    background-image: url($ecl-assets-path + 'images/live_streaming.svg');
    border-color: map-get($ecl-colors, 'yellow-110');
  }
}

.ecl-message__title {
  font-weight: bold;
  margin-bottom: map-get($ecl-spacing, 'xs');
}

.ecl-message__body {
  margin: 0;
  padding-left: map-get($ecl-spacing, 'xs');
}

.ecl-message__dismiss {
  background: transparent url($ecl-assets-path + 'images/close.svg') no-repeat
    center center;
  border-width: 0;
  color: transparent;
  display: block;
  font-size: map-get($ecl-font-size, 'xxl');
  line-height: map-get($ecl-font-size, 'l');
  padding: 0;
  position: absolute;
  right: map-get($ecl-spacing, 'xxs');
  text-decoration: none;
  text-shadow: none;
  top: map-get($ecl-spacing, 'xxs');

  &:hover {
    background-image: url($ecl-assets-path + 'images/close_hover.svg');
  }
}

.ecl-message__dismiss--inverted {
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-size: 0.889em;
  text-decoration: underline;

  &::after {
    border: 1px solid #fff;
    border-radius: 50%;
    content: '\00D7';
    display: inline-block;
    float: right;
    height: 1.5em;
    margin-left: 0.5em;
    text-align: center;
    width: 1.5em;
  }

  &:hover {
    background-image: none;
  }
}
  • URL: /components/raw/ecl-messages/_messages.scss
  • Filesystem Path: framework/components/ecl-messages/_messages.scss
  • Size: 2.2 KB
  • Content: 
    /*
 * Messages behavior
 */

// Dismiss a selected message.
function dismissMessage(message) {
  message.setAttribute('aria-hidden', true);
}

// Helper method to automatically attach the event listener to all the messages on page load
export function initMessages() {
  const selectorClass = 'ecl-message__dismiss';

  const messages = Array.prototype.slice.call(
    document.getElementsByClassName(selectorClass)
  );

  messages.forEach(message =>
    message.addEventListener('click', () =>
      dismissMessage(message.parentElement)
    )
  );
}

export default initMessages;
  • URL: /components/raw/ecl-messages/messages.js
  • Filesystem Path: framework/components/ecl-messages/messages.js
  • Size: 583 Bytes