Link blocks
Link block component displays a list of links, with an optional title. It is used for instance in the dropdown component.
{#
Parameters:
- "title" (string) (default: ''): optional title of the link block
- "links" (array) (default: []): collection of standalone @ecl/ec-component-link
- "extra_classes" (string) (default: '')
- "extra_attributes" (array) (default: []): format: [
{
"name" (string) (default: ''),
"value" (string) (default: '')
},
...
]
#}
{% include '@ecl/generic-component-link-block' with {
'title': title|default(''),
'links': links|default([]),
'extra_classes': extra_classes|default(''),
'extra_attributes': extra_attributes|default([]),
'system': 'ec'
} only %}
/* Standalone block of links */
{
"links": [
{
"href": "../../example.html#",
"label": "European Commission"
},
{
"href": "../../example.html#",
"label": "Priorities"
},
{
"href": "../../example.html#",
"label": "Jobs, Growth and Investment"
}
]
}
/* Block of links with title */
{
"title": "More information",
"links": [
{
"href": "../../example.html#",
"label": "European Commission"
},
{
"href": "../../example.html#",
"label": "Priorities"
},
{
"href": "../../example.html#",
"label": "Jobs, Growth and Investment"
}
]
}
<!-- Standalone block of links -->
<div class="ecl-link-block">
<ul class="ecl-link-block__list">
<li class="ecl-link-block__item">
<a class="ecl-link ecl-link--standalone ecl-link-block__link" href="../../example.html#">European Commission</a>
</li>
<li class="ecl-link-block__item">
<a class="ecl-link ecl-link--standalone ecl-link-block__link" href="../../example.html#">Priorities</a>
</li>
<li class="ecl-link-block__item">
<a class="ecl-link ecl-link--standalone ecl-link-block__link" href="../../example.html#">Jobs, Growth and Investment</a>
</li>
</ul>
</div>
<!-- Block of links with title -->
<div class="ecl-link-block">
<div class="ecl-link-block__title">More information</div>
<ul class="ecl-link-block__list">
<li class="ecl-link-block__item">
<a class="ecl-link ecl-link--standalone ecl-link-block__link" href="../../example.html#">European Commission</a>
</li>
<li class="ecl-link-block__item">
<a class="ecl-link ecl-link--standalone ecl-link-block__link" href="../../example.html#">Priorities</a>
</li>
<li class="ecl-link-block__item">
<a class="ecl-link ecl-link--standalone ecl-link-block__link" href="../../example.html#">Jobs, Growth and Investment</a>
</li>
</ul>
</div>
-
Content:
/** * ECL Link blocks * @define link-block */ // Import base and generic @import '@ecl/ec-base/ec-base'; @import '@ecl/generic-component-link-block/generic-component-link-block'; // Check if overridden dependencies are already loaded, if needed @include check-imports(('ec-component-link')); // Use generic mixin @include exports('ec-component-link-block') { @include ecl-link-block(); }
- URL: /components/raw/ec-component-link-block/ec-component-link-block.scss
- Filesystem Path: ../../src/systems/ec/ec-component/ec-component-link-block/ec-component-link-block.scss
- Size: 396 Bytes
- Handle: @ecl/ec-component-link-block
- Tags: molecule
- Preview:
- Filesystem Path: ../../src/systems/ec/ec-component/ec-component-link-block/ec-component-link-block.twig