Europa Component Library

Fields

Documentation • Demo

Fields

The field component is used to display structured information. It consists of sets of labels in the left column and their corresponding values in the right column.

When to use this component

  • to display structured information like characteristics of a feedback, an event, contact information.
  • to display information in list blocks used on filtered list pages

Aligned fields

The field aligned modifier should be used for aligning fields that do not have a label with fields that do have a label.

{#
  - variant: the variant. Can be '' or 'aligned' (default: '')
  - label: label of the field (default: '')
  - body: content of the field (default: '')
  }
#}

{% set variant = variant|default('') %}
{% set image = {
  src: image.src|default(''),
  alt: image.alt|default('')
} %}
{% set meta = {
  type: meta.type|default(''),
  date: meta.date|default('')
} %}
{% set title = title|default('') %}
{% set link = {
  href: link.href|default(''),
  label: link.label|default('')
} %}

{# Internal properties #}

{% set _cssClass = 'ecl-field' ~ (variant != '' ? ' ecl-field--' ~ variant: '') %}
{% set _extraAttributes = '' %}

{# Internal logic - Process properties #}

{% if extraClass is defined %}
  {% set _cssClass = _cssClass ~ ' ' ~ extraClass %}
{% endif %}

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

{# Print result #}

{% if variant == 'aligned' %}

<div class="{{ _cssClass }}" {{ _extraAttributes }}>
  <div class="ecl-field__body">{{ body }}</div>
</div>

{% else %}

<div class="{{ _cssClass }}" {{ _extraAttributes }}>
  <div class="ecl-field__label">{{ label }}</div>
  <div class="ecl-field__body">{{ body }}</div>
</div>

{% endif %}
 
/* Default */
{
  "label": "Name",
  "body": "John Doe"
}


/* Aligned */
{
  "variant": "aligned",
  "body": "Text without label"
}


<!-- Default -->
<div class="ecl-field">
  <div class="ecl-field__label">Name</div>
  <div class="ecl-field__body">John Doe</div>
</div>


<!-- Aligned -->
<div class="ecl-field ecl-field--aligned">
  <div class="ecl-field__body">Text without label</div>
</div>
  • Content: 
    /**
 * Fields component
 * @define field
 */

.ecl-field {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  margin: 0;
  width: 100%;
}

.ecl-field__label {
  font-size: map-get($ecl-font-size, 'xs');
  font-weight: 600;
  margin-bottom: map-get($ecl-spacing, 'xxxs');
  width: 20%;
}

.ecl-field + .ecl-field {
  margin-top: map-get($ecl-spacing, 'xxs');
}

@include ecl-media-breakpoint-up(md) {
  .ecl-field {
    align-items: center;
    flex-direction: row;
  }

  .ecl-field__label {
    margin-bottom: 0;
  }

  .ecl-field--aligned .ecl-field__body {
    margin-left: 20%;
  }
}
  • URL: /components/raw/ecl-fields/ecl-fields.scss
  • Filesystem Path: framework/components/ecl-fields/ecl-fields.scss
  • Size: 609 Bytes
  • Handle: @ec-europa/ecl-fields
  • Tags: atom
  • Preview:
  • Filesystem Path: framework/components/ecl-fields/ecl-fields.twig