Europa Component Library

Listings

Documentation • Demo

EMA listings

{#
  Common parameters:
    - "variant" (string): can be empty, 'date', date-2 (default: empty)
    - "items" (array): array of ecl-list-items
    - "extra_classes" (string): extra CSS classes to be added
    - "extra_attributes" (array): extra attributes classes (optional, format: [{ 'name': 'name_of_the_attribute', 'value': 'value_of_the_attribute'}])
#}

{# Internal properties #}

{% set _css_class = 'ema-listings' %}
{% set _extra_attributes = '' %}

{# Internal logic - Process properties #}

{% if variant is defined and variant is not empty %}
  {% set _css_class = _css_class ~ ' ' ~ 'ema-listing--' ~ variant %}
{% 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 #}

<ul class="{{ _css_class }}" {{ _extra_attributes|raw }}>

{% for item in items %}

  {% include '@ec-europa/ema-list-items' with item %}

{% endfor %}

</ul>
 
{
  "_demo": {
    "scripts": "document.addEventListener('DOMContentLoaded', function () {\n        ECL.initExpandables('#translations-expand-button');\n      });"
  },
  "items": [
    {
      "title": "Checklist for sponsors applying for the transfer of orphan medicinal product designation <small class=\"ema-u-color-grey-2 ecl-list-item__title--normal\">(pdf - 230kb)</small>",
      "detail": "<div class=\"ema-u-color-grey-2\"><small>Published 15/01/2009<br />Updated 13/11/2017</small></div>",
      "extra_classes": "ecl-list-item--ema-pdf",
      "translations": [
        {
          "title": "Titre du fichier",
          "meta": "230 kB - pdf - 4 pages"
        },
        {
          "title": "Dateititel",
          "meta": "230 kB - pdf - 4 pages"
        },
        {
          "title": "Файл Заглавие",
          "meta": "230 kB - pdf - 4 pages"
        }
      ],
      "translations_label": "Available languages (3)",
      "translations_tooltip": "Click to see translations"
    },
    {
      "title": "Template 1 - Orphan designation transfer form <small class=\"ema-u-color-grey-2 ecl-list-item__title--normal\">(doc - 512kb)</small>",
      "detail": "<div class=\"ema-u-color-grey-2\"><small>Published 13/04/2016<br />Updated 13/12/2016</small></div>",
      "extra_classes": "ecl-list-item--ema-doc"
    },
    {
      "title": "Template 2 - Translations of the active ingredient and indication for transfer of orphan-medicinal-product designation <small class=\"ema-u-color-grey-2 ecl-list-item__title--normal\">(docx - 132kb)</small>",
      "detail": "<div class=\"ema-u-color-grey-2\"><small>Published 24/11/2008<br />Updated 04/07/2013</small></div>",
      "extra_classes": "ecl-list-item--ema-doc"
    }
  ]
}
 
<ul class="ema-listings">

  <li class="ecl-list-item ema-list-item ecl-list-item--ema-pdf ecl-list-items--with-translations">
    <a href="" class="ecl-link ecl-list-item__link">
      <div class="ecl-u-sr-only">List item</div>

      <div class="ecl-list-item__body">
        <div class="ecl-list-item__meta">

          <svg class="ema-icon ema-list-item ecl-list-item--ema-pdf ecl-list-items--with-translations">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_" />
</svg>
        </div>

        <h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Checklist for sponsors applying for the transfer of orphan medicinal product designation <small class="ema-u-color-grey-2 ecl-list-item__title--normal">(pdf - 230kb)</small></h3>

        <p class="ecl-list-item__detail ecl-paragraph">
          <div class="ema-u-color-grey-2"><small>Published 15/01/2009<br />Updated 13/11/2017</small></div>
        </p>

        <div class="ecl-list-item__action">

        </div>
      </div>

    </a>
  </li>

  <li class="ecl-list-item ema-list-item__translations">
    <div class="ecl-file__translations">

      <button class="ecl-button ecl-button--secondary ecl-file__translations-toggle" aria-controls="translations-expand" aria-expanded="false" id="translations-expand-button" type="button" title="Click to see translations">Available languages (3)</button>

      <div aria-hidden="true" aria-labelledby="translations-expand-button" id="translations-expand">
        <ul class="ecl-file__translations-list">
          <li class="ecl-file__translations-item">
            <div class="ecl-file__translations-metadata">
              <span class="ecl-file__translations-title">Titre du fichier</span>
              <div class="ecl-file__translations-info">(230 kB - pdf - 4 pages)</div>
            </div>

            <button class="ecl-button ecl-button--secondary ecl-file__translations-download" type="button"><span class="ecl-u-sr-only">(230 kB - pdf - 4 pages)</button>
          </li>
          <li class="ecl-file__translations-item">
            <div class="ecl-file__translations-metadata">
              <span class="ecl-file__translations-title">Dateititel</span>
              <div class="ecl-file__translations-info">(230 kB - pdf - 4 pages)</div>
            </div>

            <button class="ecl-button ecl-button--secondary ecl-file__translations-download" type="button"><span class="ecl-u-sr-only">(230 kB - pdf - 4 pages)</button>
          </li>
          <li class="ecl-file__translations-item">
            <div class="ecl-file__translations-metadata">
              <span class="ecl-file__translations-title">Файл Заглавие</span>
              <div class="ecl-file__translations-info">(230 kB - pdf - 4 pages)</div>
            </div>

            <button class="ecl-button ecl-button--secondary ecl-file__translations-download" type="button"><span class="ecl-u-sr-only">(230 kB - pdf - 4 pages)</button>
          </li>
        </ul>
      </div>
    </div>
  </li>

  <li class="ecl-list-item ema-list-item ecl-list-item--ema-doc">
    <a href="" class="ecl-link ecl-list-item__link">
      <div class="ecl-u-sr-only">List item</div>

      <div class="ecl-list-item__body">
        <div class="ecl-list-item__meta">

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

        <h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Template 1 - Orphan designation transfer form <small class="ema-u-color-grey-2 ecl-list-item__title--normal">(doc - 512kb)</small></h3>

        <p class="ecl-list-item__detail ecl-paragraph">
          <div class="ema-u-color-grey-2"><small>Published 13/04/2016<br />Updated 13/12/2016</small></div>
        </p>

        <div class="ecl-list-item__action">

        </div>
      </div>

    </a>
  </li>

  <li class="ecl-list-item ema-list-item ecl-list-item--ema-doc">
    <a href="" class="ecl-link ecl-list-item__link">
      <div class="ecl-u-sr-only">List item</div>

      <div class="ecl-list-item__body">
        <div class="ecl-list-item__meta">

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

        <h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Template 2 - Translations of the active ingredient and indication for transfer of orphan-medicinal-product designation <small class="ema-u-color-grey-2 ecl-list-item__title--normal">(docx - 132kb)</small></h3>

        <p class="ecl-list-item__detail ecl-paragraph">
          <div class="ema-u-color-grey-2"><small>Published 24/11/2008<br />Updated 04/07/2013</small></div>
        </p>

        <div class="ecl-list-item__action">

        </div>
      </div>

    </a>
  </li>

</ul>
  • Content: 
    .ema-listings {
  margin: 0;
  max-width: 56rem;
  padding-left: 0;
}

.ecl-editor ul {
  max-width: 56em;
}
  • URL: /components/raw/ema-listings/ema-listings.scss
  • Filesystem Path: framework/components/ema-listings/ema-listings.scss
  • Size: 109 Bytes
  • Handle: @ec-europa/ema-listings
  • Preview:
  • Filesystem Path: framework/components/ema-listings/ema-listings.twig