Europa Component Library

List items

Documentation • Demo

EMA list items

{% set _classes = 'ema-list-item ' ~ extra_classes %}

{% if translations is defined and translations is not empty %}
  {% set _classes = _classes ~ ' ecl-list-items--with-translations' %}
{% endif %}

{% set _id = translations_id|default('translations-expand') %}

{% embed '@ec-europa/ecl-list-items' with { 'extra_classes': _classes } %}
  {% block meta_block %}
    {% include 'ema-icons' with icon %}
  {% endblock %}
{% endembed %}

{% if translations is defined and translations is not empty %}
  <li class="ecl-list-item ema-list-item__translations">
    <div class="ecl-file__translations">
      {% include '@ec-europa/ecl-buttons' with {
        'label': translations_label,
        'modifier': 'secondary',
        'extra_classes': 'ecl-file__translations-toggle',
        'extra_attributes': [
          { 'name': 'aria-controls', 'value': _id },
          { 'name': 'aria-expanded', 'value': 'false' },
          { 'name': 'id', 'value': _id ~ '-button'},
          { 'name': 'type', 'value': 'button' },
          { 'name': 'title', 'value': translations_tooltip }
        ]
      } %}

      <div aria-hidden="true" aria-labelledby="{{ _id }}-button" id="{{ _id }}">
        <ul class="ecl-file__translations-list">
          {% if translations is defined %}
            {% for translation in translations %}
              <li class="ecl-file__translations-item">
                <div class="ecl-file__translations-metadata">
                  <span class="ecl-file__translations-title">{{ translation.title }}</span>
                  <div class="ecl-file__translations-info">({{ translation.meta }})</div>
                </div>
                {% include '@ec-europa/ecl-buttons' with {
                  'label': _button_label ~ '<span class="ecl-u-sr-only">(' ~ translation.meta ~ ')',
                  'modifier': 'secondary',
                  'extra_classes': 'ecl-file__translations-download',
                  'extra_attributes': [{ 'name': 'type', 'value': 'button' }]
                } %}
              </li>
            {% endfor %}
          {% endif %}
        </ul>
      </div>
    </div>
  </li>
{% endif %}
 
/* PDF list item */
{
  "title": "Title of the document <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"
}


/* DOC list item */
{
  "title": "Title of the document <small class=\"ema-u-color-grey-2 ecl-list-item__title--normal\">(doc - 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-doc"
}


/* XLS list item */
{
  "title": "Title of the document <small class=\"ema-u-color-grey-2 ecl-list-item__title--normal\">(xls - 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-xls"
}


/* PPT list item */
{
  "title": "Title of the document <small class=\"ema-u-color-grey-2 ecl-list-item__title--normal\">(ppt - 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-ppt"
}


/* ZIP list item */
{
  "title": "Title of the document <small class=\"ema-u-color-grey-2 ecl-list-item__title--normal\">(zip - 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-zip"
}


<!-- PDF list item -->
<li class="ecl-list-item ema-list-item ecl-list-item--ema-pdf">
  <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">
  <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">Title of the document <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>


<!-- DOC list item -->
<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">Title of the document <small class="ema-u-color-grey-2 ecl-list-item__title--normal">(doc - 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>


<!-- XLS list item -->
<li class="ecl-list-item ema-list-item ecl-list-item--ema-xls">
  <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-xls">
  <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">Title of the document <small class="ema-u-color-grey-2 ecl-list-item__title--normal">(xls - 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>


<!-- PPT list item -->
<li class="ecl-list-item ema-list-item ecl-list-item--ema-ppt">
  <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-ppt">
  <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">Title of the document <small class="ema-u-color-grey-2 ecl-list-item__title--normal">(ppt - 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>


<!-- ZIP list item -->
<li class="ecl-list-item ema-list-item ecl-list-item--ema-zip">
  <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-zip">
  <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">Title of the document <small class="ema-u-color-grey-2 ecl-list-item__title--normal">(zip - 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>
  • Content: 
    /**
* EMA List item component
*/
.ema-list-item {
  .ecl-list-item__title {
    font-weight: normal;
  }

  .ecl-file__translations-title {
    font-weight: normal;
  }

  .ecl-list-item__meta {
    left: 0;
    position: absolute;

    /* top: map-get($ecl-spacing, 'l'); */
  }

  .ema-icon {
    fill: map-get($ema-colors, 'grey-2');
    height: map-get($ecl-spacing, 'l');
    width: map-get($ecl-spacing, 'l');
  }
}

.ema-list-item--file {
  .ecl-list-item__link {
    position: relative;
  }

  .ecl-list-item__body {
    padding-left: map-get($ecl-spacing, 'xl');
  }
}

.ema-list-item__translations .ecl-file__translations-item {
  border-bottom: 0;
  border-top: 1px solid map-get($ema-colors, 'light-grey-3');
}
.ema-list-item__translations .ecl-file__translations-item:first-child {
  border-top: 0;
}
.ecl-list-items--with-translations {
  border-bottom: 0;
  .ecl-link {
    padding-bottom: 0;
  }
}

.ecl-list-item .ecl-link:visited {
  color: initial;
}
  • URL: /components/raw/ema-list-items/ema-list-items.scss
  • Filesystem Path: framework/components/ema-list-items/ema-list-items.scss
  • Size: 970 Bytes
  • Handle: @ec-europa/ema-list-items
  • Tags: molecule
  • Preview:
  • Filesystem Path: framework/components/ema-list-items/ema-list-items.twig