EC System

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.

{#
  Parameters:
    - "variant" (string, '' or 'aligned' ) (default: '')
    - "label" (string) (default: '')
    - "body" (string) (default: ''): content of the field
    - "extra_classes" (string) (default: '')
    - "extra_attributes" (array) (default: []): format: [
        {
          "name" (string) (default: ''),
          "value" (string) (default: '')
        },
        ...
      ]
#}


{% include '@ecl/generic-component-field' %}
 
/* 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
 */

// Import base and generic
@import '@ecl/ec-base/ec-base';
@import '@ecl/generic-component-field/generic-component-field';

// Use generic mixin
@include exports('ec-component-field') {
  @include ecl-field();
}
  • URL: /components/raw/ec-component-field/ec-component-field.scss
  • Filesystem Path: ../../src/systems/ec/ec-component/ec-component-field/ec-component-field.scss
  • Size: 258 Bytes
  • Handle: @ecl/ec-component-field
  • Tags: atom
  • Preview:
  • Filesystem Path: ../../src/systems/ec/ec-component/ec-component-field/ec-component-field.twig