Europa Component Library

Legends

Documentation • Demo

Forms Legends

Legends are used to add a caption to a group of related form elements that have been grouped together into a fieldset.

When to use this component

When there is a need to name a group of related input elements in a form.

{# Internal properties #}

{% set _css_class = 'ecl-form-legend' %}
{% set _extra_attributes = '' %}

{# Internal logic - Process properties #}

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

{% if level is defined %}
  {% set _css_class = _css_class ~ ' ecl-form-legend--level-' ~ level %}
{% endif %}


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

{% spaceless %}
<legend class="{{ _css_class }}"{{ _extra_attributes|raw }}>
  {%- block legend content -%}
</legend>
{% endspaceless %}
 
/* Level 1 */
{
  "content": "Legend for a top-level fieldset",
  "level": 1
}


/* Level 2 */
{
  "content": "Legend for a nested fieldset",
  "level": 2
}


<!-- Level 1 -->
<legend class="ecl-form-legend ecl-form-legend--level-1">

  Legend for a top-level fieldset</legend>


<!-- Level 2 -->
<legend class="ecl-form-legend ecl-form-legend--level-2">

  Legend for a nested fieldset</legend>
  • Content: 
    /**
 * Legend component
 * @define form-legend
 */

.ecl-form-legend {
  font-weight: 600;
  line-height: 1.66;
  margin: 0;
}

/* Variants */

.ecl-form-legend--level-1 {
  border-bottom: 1px solid map-get($ecl-colors, 'grey-50');
  color: $ecl-color-shade;
  display: block;
  font-size: map-get($ecl-font-size, 'l');
  width: 100%;
}

.ecl-form-legend--level-2 {
  color: #000;
  font-size: map-get($ecl-font-size, 'm');
}
  • URL: /components/raw/ecl-forms-legends/_legends.scss
  • Filesystem Path: framework/components/ecl-forms/ecl-forms-legends/_legends.scss
  • Size: 426 Bytes
  • Handle: @ec-europa/ecl-forms-legends
  • Tags: atom
  • Preview:
  • Filesystem Path: framework/components/ecl-forms/ecl-forms-legends/ecl-forms-legends.twig