EU System

List items

Documentation • Demo

List items

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

For more information, read documentation in ecl-listings.

{#
  Parameters:
    - "variant" (string) (default: ''): can be '', 'date' or 'thumbnail' or 'navigation'
    - "href" (string) (default: '')
    - "title" (string) (default: '')
    - "primary_image" (object) (default: {}): should follow ecl-image structure
    - "secondary_image" (object) (default: {}): should follow ecl-image structure
    - "screen_reader" (string) (default: "List item"): alternative text for screen readers
    - "detail" (string) (default: ''): detail concerning the list item
    - "metas" (array)  (default: []): array of meta item, as in 'ecl-meta' component
    - "action" (string)  (default: ''): extra actions related to this list item
    - "extra_classes" (string) (default: '')
    - "extra_attributes" (array) (default: []): format: [
        {
          "name" (string) (default: ''),
          "value" (string) (default: '')
        },
        ...
      ]
  If "variant" == "date":
    - "date" (object) (default: {}): contains all parameters of ecl-date-block
  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
#}

{# Internal properties #}

{% set _variant = variant|default('') %}
{% set _href = href|default('') %}
{% set _primary_image = primary_image|default({}) %}
{% set _secondary_image = secondary_image|default({}) %}
{% set _screen_reader = screen_reader|default('List item') %}
{% set _detail = detail|default('') %}
{% set _metas = metas|default([]) %}
{% set _action = action|default('') %}
{% set _date = date|default({}) %}
{% set _css_class = 'ecl-list-item' %}
{% set _extra_attributes = '' %}

{# Internal logic - Process properties #}

{% if _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 and extra_attributes is iterable %}
  {% for attr in extra_attributes %}
    {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name ~ '="' ~ attr.value|e ~'"' %}
  {% endfor %}
{% endif %}

{# Print the 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_image is not empty) or (_variant == 'date' and _date is not empty) %}
      <div class="ecl-list-item__primary">
        {% if _variant == 'date' %}
          {% include '@ecl/eu-component-date-block' with _date only %}
        {% else %}
          {% include '@ecl/eu-style-image' with { responsive: true }|merge(_primary_image) only %}
        {% endif %}
      </div>
    {% endif %}
    <div class="ecl-list-item__body">
      {% if _variant is empty or _variant == 'thumbnail' %}
        <div class="ecl-list-item__meta">
          {% block meta_block %}
            {% include '@ecl/eu-component-meta' with { metas: _metas } only %}
          {% endblock %}
        </div>
      {% endif %}
      <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_image is not empty %}
    <div class="ecl-list-item__secondary">
      {% include '@ecl/eu-style-image' with { responsive: true }|merge(_secondary_image) only %}
    </div>
    {% endif %}
  </a>
</li>
 
/* Default list item */
{
  "href": "../../example.html#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": "../../example.html#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": "../../example.html#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": "../../example.html#list-item-4",
  "primary_image": {
    "src": "../../assets/demo_images/nature-demo-1.jpg",
    "alt": "Highlighted image"
  }
}


/* Navigation list item */
{
  "variant": "navigation",
  "screen_reader": "List item: Business, Economy, Euro",
  "title": "Business, Economy, Euro",
  "href": "../../example.html#listing-three-columns-1",
  "detail": "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
}


/* Block list item */
{
  "variant": "block",
  "href": "../../example.html#block-item-1",
  "title": "EU law",
  "detail": "Dolore duis elit in id voluptate nisi commodo quis."
}


<!-- Default list item -->
<li class="ecl-list-item">
  <a href="../../example.html#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="../../example.html#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">
        <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">
      <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="../../example.html#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 class="ecl-image ecl-image--fluid" 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="../../example.html#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 class="ecl-image ecl-image--fluid" alt="Highlighted image" src="../../assets/demo_images/nature-demo-1.jpg" />

    </div>
    <div class="ecl-list-item__body">
      <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>


<!-- Navigation list item -->
<li class="ecl-list-item ecl-list-item--navigation">
  <a href="../../example.html#listing-three-columns-1" class="ecl-link ecl-list-item__link">
    <div class="ecl-u-sr-only">List item: Business, Economy, Euro</div>
    <div class="ecl-list-item__body">
      <h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Business, Economy, Euro</h3>
      <p class="ecl-list-item__detail ecl-paragraph">
        EU economy, the euro, and practical information for EU businesses and entrepreneurs.
      </p>
      <div class="ecl-list-item__action">

      </div>
    </div>
  </a>
</li>


<!-- Block list item -->
<li class="ecl-list-item ecl-list-item--block">
  <a href="../../example.html#block-item-1" class="ecl-link ecl-list-item__link">
    <div class="ecl-u-sr-only">List item</div>
    <div class="ecl-list-item__body">
      <h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">EU law</h3>
      <p class="ecl-list-item__detail ecl-paragraph">
        Dolore duis elit in id voluptate nisi commodo quis.
      </p>
      <div class="ecl-list-item__action">

      </div>
    </div>
  </a>
</li>
  • Content: 
    /**
 * list-items
 * @define list-item
 */

// Import base and generic
@import '@ecl/eu-base/eu-base';
@import '@ecl/generic-component-list-item/generic-component-list-item';

// Check if overridden dependencies are already loaded, if needed
@include check-imports(
  (
    'eu-component-link',
    'eu-style-typography-heading',
    'eu-style-typography-paragraph'
  )
);

// Use generic mixin
@include exports('eu-component-list-item') {
  @include ecl-list-item();
}
  • URL: /components/raw/eu-component-list-item/eu-component-list-item.scss
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-list-item/eu-component-list-item.scss
  • Size: 470 Bytes
  • Handle: @ecl/eu-component-list-item
  • Tags: molecule
  • Preview:
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-list-item/eu-component-list-item.twig