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/eu-base/eu-base'; @import '@ecl/generic-component-field/generic-component-field'; // Use generic mixin @include exports('eu-component-field') { @include ecl-field(); }
- URL: /components/raw/eu-component-field/eu-component-field.scss
- Filesystem Path: ../../src/systems/eu/eu-component/eu-component-field/eu-component-field.scss
- Size: 258 Bytes
- Handle: @ecl/eu-component-field
- Tags: atom
- Preview:
- Filesystem Path: ../../src/systems/eu/eu-component/eu-component-field/eu-component-field.twig