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": "success",
"dismiss": true,
"screen_reader_description": "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="Close this message">Close</button>
<div class="ecl-message__title">Some success title</div>
<ul class="ecl-list ecl-message__body">
<li>Lorem ipsum lor sit amet, consectetur adipi</li>
</ul>
</div>
-
Content:
/* * Messages behavior */ export * from '@ecl/generic-component-message';
- URL: /components/raw/eu-component-message/eu-component-message.js
- Filesystem Path: ../../src/systems/eu/eu-component/eu-component-message/eu-component-message.js
- Size: 77 Bytes
-
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
- Handle: @ecl/eu-component-message--success
- Tags: atom
- Variants (5): Info , Warning , Success , Error , Livestream
- Preview:
- Filesystem Path: ../../src/systems/eu/eu-component/eu-component-message/eu-component-message.twig