Europa Component Library

Feedback messages

Documentation • Demo

Feedback messages

Users receive feedback, in the form of a message, about an input. Messages can be either positive (indicating that the form was submitted successfully) or negative (“The number you’ve provided is incorrect”).

When to use

Use messages components to give feedback to users.

When validating a page, show one error notification on the top of the page which states “Some required information is missing or incomplete”.

Then, for each input field with an error, show an error notification which states either “This is a required field” or “This is not a valid format”.

Use success messages once the form has been submitted successfully, show a success notification.

{#
  Accepts:
    - "title" (string): message title (mandatory)
    - "body" (string): message body (mandatory)
    - "has_error" (boolean): has error (optional, default: false)
    - "extra_class" (string): extra CSS classes (optional, default: '')
    - "extra_attributes" (array): extra attributes classes (optional, format: [{ 'name': 'name_of_the_attribute', 'value': 'value_of_the_attribute'}])
#}

{# Internal properties #}

{% set _css_class = 'ecl-feedback-message' %}
{% set _extra_attributes = '' %}

{% if has_error is defined and has_error == true %}
  {% set _css_class = _css_class ~ ' ecl-feedback-message--error' %}
{% endif %}

{% if extra_class is defined %}
  {% set _css_class = _css_class ~ ' ' ~ extra_class %}
{% endif %}

{% if extra_attributes is defined %}
  {% for attr in extra_attributes %}
    {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name ~ '="' ~ attr.value ~'"' %}
  {% endfor %}
{% endif %}

<div class="{{ _css_class }}" role="alert"{{ _extra_attributes|raw }}>
  <div class="ecl-feedback-message__title" role="heading">{{ title }}</div>
  <p class="ecl-feedback-message__body">{{ body }}</p>
</div>
 
/* Default */
{
  "title": "Some feedback message",
  "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quam urna, elementum eget ultrices non, efficitur quis lectus. Donec mollis felis ac felis tempus mattis"
}


/* Error */
{
  "title": "Some feedback message",
  "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quam urna, elementum eget ultrices non, efficitur quis lectus. Donec mollis felis ac felis tempus mattis",
  "has_error": true
}


<!-- Default -->
<div class="ecl-feedback-message" role="alert">
  <div class="ecl-feedback-message__title" role="heading">Some feedback message</div>
  <p class="ecl-feedback-message__body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quam urna, elementum eget ultrices non, efficitur quis lectus. Donec mollis felis ac felis tempus mattis</p>
</div>


<!-- Error -->
<div class="ecl-feedback-message ecl-feedback-message--error" role="alert">
  <div class="ecl-feedback-message__title" role="heading">Some feedback message</div>
  <p class="ecl-feedback-message__body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quam urna, elementum eget ultrices non, efficitur quis lectus. Donec mollis felis ac felis tempus mattis</p>
</div>
  • Content: 
    /*
 * Feedback message
 * @define feedback-message
 */

@import '~@ec-europa/ecl-typography-paragraphs/paragraphs-mixins';

.ecl-feedback-message {
  @include ecl-hidden-print();

  background: transparent url($ecl-assets-path + 'images/messages-info.svg')
    no-repeat 1.2rem 1.2rem;
  color: $ecl-color-shade;
  font-size: map-get($ecl-font-size, 's');
  margin: 0;
  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');
}

.ecl-feedback-message--error {
  background-color: map-get($ecl-colors, 'grey-5');
  background-image: url($ecl-assets-path + 'images/messages-error.svg');
}

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

.ecl-feedback-message__body {
  @include paragraph();

  margin: 0;
}

/* Spacing */

/* stylelint-disable-next-line plugin/selector-bem-pattern */
* + .ecl-feedback-message {
  margin-top: map-get($ecl-spacing, 'xs');
}
  • URL: /components/raw/ecl-forms-feedback-messages/ecl-forms-feedback-messages.scss
  • Filesystem Path: framework/components/ecl-forms/ecl-forms-feedback-messages/ecl-forms-feedback-messages.scss
  • Size: 1 KB
  • Handle: @ec-europa/ecl-forms-feedback-messages
  • Tags: atom
  • Preview:
  • Filesystem Path: framework/components/ecl-forms/ecl-forms-feedback-messages/ecl-forms-feedback-messages.twig