Europa Component Library

Separator

Documentation • Demo

Separator

Provides a way to separate different blocks of content

{#
  Accepts:
    - title (string): title of the panel (default: '')
    - icon (string): name of the ECL-icons class to be used in the heading
    - extra_classes (string): additional classes to add to the component
    - extra_attributes (array of { name: '', value: '' })
#}

{# Internal properties #}
{% set _css_class = 'ema-separator' %}
{% set _extra_attributes = '' %}
{% set _title = title|default('') %}

{% if modifier is defined and modifier is not empty %}
  {% set _modifier = 'ema-separator--' ~ modifier %}
{% endif %}

{% if extra_classes is defined and extra_classes is not empty %}
  {% set _css_class = _css_class ~ ' ' ~ extra_classes %}
{% endif %}

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

{# Print result #}
<div class="{{ _css_class }} {{ _modifier }}"{{ _extra_attributes }}>
  <div class="ema-separator__heading">
    <h3 class="ema-separator__heading--title ecl-heading ecl-heading--ema-h3">
      {{_title}}
    </h3>

    {% include '@ec-europa/ema-icons' with {
      'icon': icon,
      'extra_classes': 'ema-separator__heading--icon'
    } %}
  </div>
</div>
 
/* Separator */
{
  "title": "Related documents"
}


/* Separator secondary */
{
  "icon": "related-documents",
  "title": "Related documents",
  "modifier": "secondary"
}


<!-- Separator -->
<div class="ema-separator ">
  <div class="ema-separator__heading">
    <h3 class="ema-separator__heading--title ecl-heading ecl-heading--ema-h3">
      Related documents
    </h3>

    <svg class="ema-icon ema-separator__heading--icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_" />
</svg>
  </div>
</div>


<!-- Separator secondary -->
<div class="ema-separator ema-separator--secondary">
  <div class="ema-separator__heading">
    <h3 class="ema-separator__heading--title ecl-heading ecl-heading--ema-h3">
      Related documents
    </h3>

    <svg class="ema-icon ema-separator__heading--icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_related-documents" />
</svg>
  </div>
</div>
  • Content: 
    /**
* EMA Separator component
*/

.ema-separator {
  margin: 0;
}

.ema-separator__heading {
  background-color: map-get($ema-colors, 'blue-1');
  display: flex;
  line-height: 1.1;
  padding: map-get($ecl-spacing, 's');
}

.ema-separator__heading--title {
  color: #fff;
  flex-grow: 1;
  margin: 0;
  max-width: none;
}

.ema-separator__heading--icon {
  fill: map-get($ema-colors, 'grey-3');
}

.ema-separator--secondary .ema-separator__heading {
  background-color: map-get($ema-colors, 'light-grey-2');
}

.ema-separator--secondary .ema-separator__heading--title {
  color: #000;
}
  • URL: /components/raw/ema-separator/ema-separator.scss
  • Filesystem Path: framework/components/ema-separator/ema-separator.scss
  • Size: 587 Bytes
  • Handle: @ec-europa/ema-separator
  • Preview:
  • Filesystem Path: framework/components/ema-separator/ema-separator.twig