Europa Component Library

Help blocks

Documentation • Demo

Help blocks

Description text to help the user know what to do.

When to use

When you need to provide the user with extra information on what he/she should input on this field.

{# Internal properties #}

{% set _css_class = 'ecl-help-block' %}
{% set _extra_attributes = '' %}

{# Internal logic - Process properties #}

{% if has_error is defined and has_error == true %}
  {% set _css_class = _css_class ~ ' ecl-help-block--has-error' %}
{% endif %}

{% if is_disabled is defined and is_disabled == true %}
  {% set _css_class = _css_class ~ ' ecl-help-block--disabled' %}
{% 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 %}

<p class="{{ _css_class }}"{{ _extra_attributes|raw }}>{% block help_block content %}</p>
 
/* Default */
{
  "content": "This is some placeholder help text."
}


/* Disabled */
{
  "content": "Disabled: This is some placeholder help text.",
  "is_disabled": true
}


/* Error */
{
  "content": "On error: This is some placeholder help text.",
  "has_error": true
}


<!-- Default -->
<p class="ecl-help-block">

  This is some placeholder help text.</p>


<!-- Disabled -->
<p class="ecl-help-block ecl-help-block--disabled">

  Disabled: This is some placeholder help text.</p>


<!-- Error -->
<p class="ecl-help-block ecl-help-block--has-error">

  On error: This is some placeholder help text.</p>
  • Content: 
    /*
 * Help Block
 * @define help-block
 */

$ecl-forms-help-block-text-color: map-get($ecl-colors, 'grey-100') !default;
$ecl-forms-help-block-text-color-disabled: map-get($ecl-colors, 'grey-75')
  !default;
$ecl-forms-help-block-text-color-has-error: $ecl-forms-help-block-text-color
  !default;

.ecl-help-block {
  @include ecl-hidden-print();

  color: $ecl-forms-help-block-text-color;
  font-size: map-get($ecl-font-size, 'xs');
  line-height: 1.66;
  margin: 0;
}

.ecl-help-block--disabled {
  color: $ecl-forms-help-block-text-color-disabled;
}

.ecl-help-block--has-error {
  color: $ecl-forms-help-block-text-color-has-error;
}

/* Spacing */

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