Europa Component Library

Fieldsets

Documentation • Demo

Fieldsets

Styling and template for the <fieldset> tag.

{# Internal properties #}

{% set _css_class = 'ecl-fieldset' %}
{% set _extra_attributes = '' %}

{# Internal logic - Process properties #}

{% 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 %}

<fieldset class="{{ _css_class }}"{{ _extra_attributes|raw }}>
  {% block fieldset content %}
</fieldset>
 
/* No context defined for this component. */
 
<fieldset class="ecl-fieldset">
</fieldset>
  • Content: 
    /**
 * Form Fieldset
 * @define fieldset
 */

.ecl-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/* Spacing */

/* stylelint-disable-next-line plugin/selector-bem-pattern */
* + .ecl-fieldset {
  margin-top: map-get($ecl-spacing, 'm');
}

/* Top-level fieldsets */
.ecl-fieldset + .ecl-fieldset {
  margin-top: map-get($ecl-spacing, 'xl');
}

/* Nested fieldsets */
.ecl-fieldset .ecl-fieldset + .ecl-fieldset {
  margin-top: map-get($ecl-spacing, 'l');
}
  • URL: /components/raw/ecl-forms-fieldsets/_fieldsets.scss
  • Filesystem Path: framework/components/ecl-forms/ecl-forms-fieldsets/_fieldsets.scss
  • Size: 464 Bytes
  • Handle: @ec-europa/ecl-forms-fieldsets
  • Tags: atom
  • Preview:
  • Filesystem Path: framework/components/ecl-forms/ecl-forms-fieldsets/ecl-forms-fieldsets.twig