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