EU System

Messages: Warning

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
{#
  Parameters:
    - "screen_reader_description" (string) (default: '')
    - "messages" (array) (default: []): array of string messages
    - "title" (string) (default: '')
    - "dismiss" (boolean) (default: false)
    - "dismiss_label" (string) (default: 'Dismiss this alert')
    - "modifier" (string) (default: ''): "", "warning", "success", "error" or "live"
    - "extra_classes" (string) (default: '')
    - "extra_attributes" (array) (default: []): format: [
        {
          "name" (string) (default: ''),
          "value" (string) (default: '')
        },
        ...
      ]
#}

{% include '@ecl/generic-component-message' with {
  'screen_reader_description': screen_reader_description|default(''),
  'messages': messages|default([]),
  'title': title|default(''),
  'dismiss': dismiss|default(false),
  'dismiss_label': dismiss_label|default('Close this message'),
  'modifier': modifier|default(''),
  'extra_classes': extra_classes|default(''),
  'extra_attributes': extra_attributes|default([])
} only %}
 
{
  "_demo": {
    "scripts": "document.addEventListener('DOMContentLoaded', function () { ECL.initMessages(); });"
  },
  "modifier": "warning",
  "dismiss": true,
  "screen_reader_description": "Warning message",
  "title": "Some warning title",
  "messages": [
    "Lorem ipsum lor sit amet, consectetur adipi",
    "Lorem ipsum lor sit amet, consectetur adipi",
    "Lorem ipsum lor sit amet, consectetur adipi"
  ]
}
 
<div class="ecl-message ecl-message--warning" role="alert">
  <span class="ecl-u-sr-only">Warning message</span>
  <button type="button" class="ecl-message__dismiss" aria-label="Close this message">Close</button>
  <div class="ecl-message__title">Some warning title</div>
  <ul class="ecl-list ecl-message__body">
    <li>Lorem ipsum lor sit amet, consectetur adipi</li>
    <li>Lorem ipsum lor sit amet, consectetur adipi</li>
    <li>Lorem ipsum lor sit amet, consectetur adipi</li>
  </ul>
</div>
  • Content: 
    /**
 * Messages
 * @define message
 */

// Import base and generic
@import '@ecl/eu-base/eu-base';
@import '@ecl/generic-component-message/generic-component-message';

// Check if overridden dependencies are already loaded, if needed
@include check-imports(('eu-style-typography-list'));

// Use generic mixin
@include exports('eu-component-message') {
  @include ecl-message();
}
  • URL: /components/raw/eu-component-message/eu-component-message.scss
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-message/eu-component-message.scss
  • Size: 381 Bytes