Europa Component Library

List items

List items are intended to be used only in listings component.

For more information, read documentation in ecl-listings.

{#
  Common parameters:
    - "variant" (string): can be empty, 'date' or 'thumbnail' (default: empty)
    - "href" (string): target of the list item link (default: empty)
    - "title" (string): title of the list item (default: empty)
    - "primary_image" (object): primary image. Should follow ecl-image structure (default: empty)
    - "secondary_image" (object): secondary image. Should follow ecl-image structure (default: empty)
    - "screen_reader" (string): alternative text for screen readers (default: "List item")
    - "detail" (string): detail concerning the list item (default empty)
    - "metas" (array): array of meta item, as in 'ecl-meta' component (default empty)
    - "action" (string): extra actions related to this list item (default empty)
    - "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'}])
  Blocks:
    - "meta_block": instead of providing metas as an array, you can also embed the template and fill the 'meta_block' block directly
    - "detail_block": instead of providing detail as a string, you can also embed the template and fill the 'detail_block' block directly
    - "action_block": instead of providing action as a string, you can also embed the template and fill the 'action_block' block directly

  Date parameters:
    - "date" (object): contains all parameters of ecl-date-block
#}

{# Internal properties #}

{% set _primary = primary_image|default('') %}
{% set _secondary = secondary_image|default('') %}
{% set _screen_reader = screen_reader|default('List item') %}
{% set _css_class = 'ecl-list-item' %}
{% set _extra_attributes = '' %}

{# Internal logic - Process properties #}

{% if date is defined and date is not empty %}
  {% set _primary = date %}
{% endif %}

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

<li class="{{ _css_class }}" {{ _extra_attributes|raw }}>
  <a href="{{ href }}" class="ecl-link ecl-list-item__link">
    <div class="ecl-u-sr-only">{{ _screen_reader }}</div>

    {% if _primary is not empty %}
    <div class="ecl-list-item__primary">
      {% if variant == 'date' %}
        {% include '@ec-europa/ecl-date-blocks' with _primary %}
      {% else %}
        {% include '@ec-europa/ecl-images' with _primary %}
      {% endif %}
    </div>
    {% endif %}

    <div class="ecl-list-item__body">
      <div class="ecl-list-item__meta">
        {% block meta_block %}
        {% include '@ec-europa/ecl-meta' with { metas: metas } %}
        {% endblock %}
      </div>

      <h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">{{ title }}</h3>

      <p class="ecl-list-item__detail ecl-paragraph">
        {% block detail_block %}
          {{ detail }}
        {% endblock %}
      </p>

      <div class="ecl-list-item__action">
        {% block action_block %}
          {{ action }}
        {% endblock %}
      </div>
    </div>

    {% if _secondary is not empty %}
    <div class="ecl-list-item__secondary">
      {% include '@ec-europa/ecl-images' with _secondary %}
    </div>
    {% endif %}

  </a>
</li>
/* Default list item */
{
  "href": "#list-item-1",
  "metas": [
    "Service department",
    "PMO"
  ],
  "title": "Administration and Payment of Individual Entitlements"
}

/* Date list item */
{
  "variant": "date",
  "date": {
    "week_day": "Tue",
    "day": "07",
    "month": "Sep"
  },
  "href": "#list-item-2",
  "title": "Citizens' Dialogue in Kraków with Commissioner Elżbieta Bieńkowska",
  "detail": "<small><span class=\"ecl-icon ecl-icon--location\">Kraków, Poland</span> <span class=\"ecl-icon ecl-icon--livestreaming ecl-u-ml-s\">live streaming available</span></small>"
}

/* Thumbnail list item */
{
  "metas": [
    "Director-General"
  ],
  "title": "John Doe",
  "href": "#list-item-3",
  "primary_image": {
    "src": "../../assets/demo_images/default_profile_image.png",
    "alt": "Director-General John Doe"
  }
}

/* Highlight list item */
{
  "variant": "highlight",
  "title": "State of European Union 2017",
  "href": "#list-item-4",
  "primary_image": {
    "src": "../../assets/demo_images/nature-demo-1.jpg",
    "alt": "Highlighted image"
  }
}

<!-- Default list item -->
<li class="ecl-list-item">
  <a href="#list-item-1" 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">

        <div class="ecl-meta">

          <span class="ecl-meta__item">Service department</span>

          <span class="ecl-meta__item">PMO</span>

        </div>
      </div>

      <h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Administration and Payment of Individual Entitlements</h3>

      <p class="ecl-list-item__detail ecl-paragraph">

      </p>

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

      </div>
    </div>

  </a>
</li>

<!-- Date list item -->
<li class="ecl-list-item ecl-list-item--date">
  <a href="#list-item-2" class="ecl-link ecl-list-item__link">
    <div class="ecl-u-sr-only">List item</div>

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

      <div class="ecl-date-block ecl-date-block--date">
        <div class="ecl-date-block__body">
          <span class="ecl-date-block__week-day">Tue</span>

          <span class="ecl-date-block__day">07</span>

          <span class="ecl-date-block__month">Sep</span>

        </div>
      </div>
    </div>

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

        <div class="ecl-meta ecl-meta--date">
        </div>
      </div>

      <h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Citizens' Dialogue in Kraków with Commissioner Elżbieta Bieńkowska</h3>

      <p class="ecl-list-item__detail ecl-paragraph">
        <small><span class="ecl-icon ecl-icon--location">Kraków, Poland</span> <span class="ecl-icon ecl-icon--livestreaming ecl-u-ml-s">live streaming available</span></small>
      </p>

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

      </div>
    </div>

  </a>
</li>

<!-- Thumbnail list item -->
<li class="ecl-list-item">
  <a href="#list-item-3" class="ecl-link ecl-list-item__link">
    <div class="ecl-u-sr-only">List item</div>

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

      <img alt="Director-General John Doe" src="../../assets/demo_images/default_profile_image.png" />

    </div>

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

        <div class="ecl-meta">

          <span class="ecl-meta__item">Director-General</span>

        </div>
      </div>

      <h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">John Doe</h3>

      <p class="ecl-list-item__detail ecl-paragraph">

      </p>

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

      </div>
    </div>

  </a>
</li>

<!-- Highlight list item -->
<li class="ecl-list-item ecl-list-item--highlight">
  <a href="#list-item-4" class="ecl-link ecl-list-item__link">
    <div class="ecl-u-sr-only">List item</div>

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

      <img alt="Highlighted image" src="../../assets/demo_images/nature-demo-1.jpg" />

    </div>

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

        <div class="ecl-meta ecl-meta--highlight">
        </div>
      </div>

      <h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">State of European Union 2017</h3>

      <p class="ecl-list-item__detail ecl-paragraph">

      </p>

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

      </div>
    </div>

  </a>
</li>

  • Content:
    /**
     * list-items
     * @define list-item; weak
     */
    
    .ecl-list-item {
      border-bottom: 1px solid map-get($ecl-colors, 'grey-10');
      list-style-type: none;
      margin: 0;
    }
    
    .ecl-list-item:first-child {
      border-top: 1px solid map-get($ecl-colors, 'grey-10');
    }
    
    .ecl-list-item__body {
      flex-grow: 1;
    }
    
    .ecl-list-item__link {
      color: $ecl-color-shade;
      display: flex;
      flex-direction: row;
      padding-bottom: map-get($ecl-spacing, 's');
      padding-top: map-get($ecl-spacing, 's');
      text-decoration: none;
    }
    
    .ecl-list-item__meta {
      margin-bottom: map-get($ecl-spacing, 's');
    }
    
    .ecl-list-item__title {
      color: $ecl-color-primary;
      font-size: map-get($ecl-font-size, 'm');
      margin-bottom: map-get($ecl-spacing, 's');
      margin-top: 0;
    }
    
    .ecl-list-item--highlight .ecl-list-item__title {
      font-size: map-get($ecl-font-size, 'l');
      height: 2.2em;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .ecl-list-item__link:hover,
    .ecl-list-item__link:focus {
      .ecl-list-item__title {
        color: $ecl-color-shade;
        text-decoration: underline;
      }
    }
    
    .ecl-list-item__primary {
      flex-shrink: 0;
      height: auto;
      margin-right: map-get($ecl-spacing, 'm');
      max-height: 5.55rem;
      max-width: 5.55rem;
      width: auto;
    }
    
    // Highlited item
    .ecl-list-item--highlight .ecl-list-item__link {
      flex-direction: column;
      padding-top: 0;
    }
    
    .ecl-list-item--highlight .ecl-list-item__primary {
      margin-right: 0;
      max-height: 100%;
      max-width: 100%;
      object-fit: contain;
      width: 100%;
    
      img {
        display: block;
        width: 100%;
      }
    }
    
    .ecl-list-item--highlight .ecl-list-item__body {
      background-color: map-get($ecl-colors, 'grey-10');
      padding-left: map-get($ecl-spacing, 's');
      padding-right: map-get($ecl-spacing, 's');
    }
    
  • URL: /components/raw/ecl-list-items/ecl-list-items.scss
  • Filesystem Path: framework/components/ecl-list-items/ecl-list-items.scss
  • Size: 1.7 KB
  • Handle: @ec-europa/ecl-list-items
  • Tags: molecule
  • Preview:
  • Filesystem Path: framework/components/ecl-list-items/ecl-list-items.twig