Communities pages
When and how to use
Page template for communities
{#
This is an example and should not be used as it is.
#}
{% include '@ecl/ec-component-skip-link' with {
'href': '#main-content',
'label': 'Skip to main content'
} %}
{% include '@ecl/ec-component-site-header' %}
{% include '@ecl/ec-component-page-header' with {
variant: 'basic',
identity: 'Template community',
breadcrumb: [
{ href: '../../example.html#', label: 'Home' },
{ href: '../../example.html#', label: 'Europa Component Library' },
{ label: 'My community' },
],
} %}
{% include "@ecl/ec-component-navigation-menu" with menu %}
<main id="main-content">
<div class="ecl-container ecl-u-mv-l">
<h1 class="ecl-heading ecl-heading--h1">My community</h1>
<div class="ecl-row">
<div class="ecl-col-md-3">
{% include '@ecl/ec-component-form-label' with {
for_attribute: 'create-content',
label: 'Create content'
} %}
{% embed '@ecl/ec-component-form-select' with { 'id': 'create-content', 'name': 'create-content' }%}
{% block options %}
<option>Article</option>
<option>Event</option>
<option>News</option>
<option>Media item</option>
{% endblock %}
{% endembed %}
{% include '@ecl/ec-component-link-block' with {
wrapper: true,
title: 'Members list',
links: [
{ href: '../../example.html#', label: 'John Doe' },
{ href: '../../example.html#', label: 'Jane Doe' },
{ href: '../../example.html#', label: 'Mike Doe' },
{ href: '../../example.html#', label: 'Richard Doe' }
],
extra_classes: 'ecl-u-mt-m',
} %}
</div>
<div class="ecl-col-md-9">
<p class="ecl-paragraph ecl-paragraph--l">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin elit nisi, scelerisque non elementum ac, placerat in eros. Integer volutpat mi eros. Nunc at nibh eros.
</p>
{% include '@ecl/ec-component-gallery' with {
rows: [
[
{
classes: 'ecl-col-md-4',
image: {
src: 'http://placehold.it/380x185',
alt: 'Example alt text',
responsive: true,
extra_attributes: [
{ name: 'typeof', value: 'foaf:Image' },
{ name: 'width', value: '380' },
{ name: 'height', value: '185' },
],
},
caption: 'Example image caption',
icon: 'ecl-icon--camera',
},
{
classes: 'ecl-col-md-3',
image: {
src: 'http://placehold.it/285x185',
alt: 'Example alt text',
responsive: true,
extra_attributes: [
{ name: 'typeof', value: 'foaf:Image' },
{ name: 'width', value: '285' },
{ name: 'height', value: '185' },
],
},
icon: 'ecl-icon--audio',
},
{
classes: 'ecl-col-md-2',
image: {
src: 'http://placehold.it/190x185',
alt: 'Example alt text',
responsive: true,
extra_attributes: [
{ name: 'typeof', value: 'foaf:Image' },
{ name: 'width', value: '190' },
{ name: 'height', value: '185' },
],
},
caption: 'Example image caption',
icon: 'ecl-icon--camera',
},
{
classes: 'ecl-col-md-3',
image: {
src: 'http://placehold.it/285x185',
alt: 'Example alt text',
responsive: true,
extra_attributes: [
{ name: 'typeof', value: 'foaf:Image' },
{ name: 'width', value: '285' },
{ name: 'height', value: '185' },
],
},
},
],
[
{
classes: 'ecl-col-md-2',
image: {
src: 'http://placehold.it/190x185',
alt: 'Example alt text',
responsive: true,
extra_attributes: [
{ name: 'typeof', value: 'foaf:Image' },
{ name: 'width', value: '190' },
{ name: 'height', value: '185' },
],
},
caption: 'Example image caption',
},
{
classes: 'ecl-col-md-3',
image: {
src: 'http://placehold.it/285x185',
alt: 'Example alt text',
responsive: true,
extra_attributes: [
{ name: 'typeof', value: 'foaf:Image' },
{ name: 'width', value: '285' },
{ name: 'height', value: '185' },
],
},
},
{
classes: 'ecl-col-md-3',
image: {
src: 'http://placehold.it/285x185',
alt: 'Example alt text',
responsive: true,
extra_attributes: [
{ name: 'typeof', value: 'foaf:Image' },
{ name: 'width', value: '285' },
{ name: 'height', value: '185' },
],
},
},
{
classes: 'ecl-col-md-4',
image: {
src: 'http://placehold.it/380x185',
alt: 'Example alt text',
responsive: true,
extra_attributes: [
{ name: 'typeof', value: 'foaf:Image' },
{ name: 'width', value: '380' },
{ name: 'height', value: '185' },
],
},
caption: 'Example image caption',
},
],
]
} %}
{% include '@ecl/ec-component-button' with {
label: "Unsubscribe",
modifier: "default",
extra_classes: "ecl-u-mt-m",
} %}
</div>
</div>
</div>
</main>
{% include '@ecl/ec-component-footer' with {
custom_footer: {
identity: 'Europa Component Library',
social_links: {
label: 'Follow us:',
links: [
{
type: 'social-network',
icon: 'facebook',
link: {
href: '../../example.html#',
label: 'Facebook',
},
},
{
type: 'social-network',
icon: 'twitter',
link: {
href: '../../example.html#',
label: 'Twitter',
},
},
{
type: 'external',
link: {
href: '../../example.html#',
label: 'Other social media',
},
},
],
},
other_links: {
links: [
{
link: {
href: '../../example.html#',
label: 'Contact',
},
},
{
link: {
href: '../../example.html#',
label: 'Site map',
},
},
],
},
},
corporate_footer: {
about_ec: {
title: 'European Commission',
items: [
{
href: 'https://ec.europa.eu/info/index',
label: 'European Commission website',
},
],
},
social_media: {
title: 'Follow the European Commission',
items: [
{
type: 'social-network',
icon: 'facebook',
link: {
href: '../../example.html#',
label: 'Facebook',
},
},
{
type: 'social-network',
icon: 'twitter',
link: {
href: '../../example.html#',
label: 'Twitter',
},
},
{
type: 'external',
link: {
href: '../../example.html#',
label: 'Other social media',
},
},
],
},
about_eu: {
title: 'European Union',
items: [
{
href: '../../example.html#',
label: 'EU institutions',
},
{
href: '../../example.html#',
label: 'European Union',
},
],
},
bottom_links: [
{
href:
'http://ec.europa.eu/info/about-commissions-new-web-presence_en',
label: "About the Commission's new web presence",
},
{
href: 'http://ec.europa.eu/info/resources-partners_en',
label: 'Resources for partners',
},
{
href: 'http://ec.europa.eu/info/cookies_en',
label: 'Cookies',
},
{
href: 'http://ec.europa.eu/info/legal-notice_en',
label: 'Legal notice',
},
{
href: 'http://ec.europa.eu/info/contact_en',
label: 'Contact',
},
],
},
} %}
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
ECL.megamenu('.ecl-navigation-menu__root');
ECL.initExpandables('.ecl-navigation-menu__toggle');
});
</script>
{
"menu": {
"menu_aria_label": "Main Navigation",
"menu_label": "Menu",
"links": [
{
"label": "Home",
"href": "../../example.html#"
},
{
"label": "Communities",
"href": "../../example.html#",
"is_active": true,
"children_links": [
{
"links": [
{
"label": "Homepage",
"href": "../../example.html#",
"is_active": true
},
{
"label": "Articles",
"href": "../../example.html#"
}
]
},
{
"links": [
{
"label": "Events",
"href": "../../example.html#"
},
{
"label": "Media gallery",
"href": "../../example.html#"
}
]
}
]
},
{
"label": "Events",
"href": "../../example.html#"
},
{
"label": "Galleries",
"href": "../../example.html#"
}
]
},
"global": {
"language": "en"
}
}
<div class="ecl-skip-link__wrapper" id="skip-link">
<a href="#main-content" class="ecl-skip-link">Skip to main content</a>
</div>
<header class="ecl-site-header" role="banner">
<div class="ecl-container ecl-site-header__banner">
<a href="https://ec.europa.eu/info/index" class="ecl-logo ecl-logo--logotype ecl-site-header__logo" title="Home - European Commission"><span class="ecl-u-sr-only">Home - European Commission</span></a>
<div class="ecl-language-list ecl-language-list--overlay ecl-site-header__language-list">
<div id="ecl-overlay-language-list" class="ecl-dialog__overlay ecl-dialog__overlay--blue" aria-hidden="true"></div>
<div class="ecl-lang-select-sites ecl-link" data-ecl-dialog="ecl-dialog" id="ecl-lang-select-sites__overlay">
<a href="#" class="ecl-lang-select-sites__link">
<span class="ecl-lang-select-sites__label">English</span>
<span class="ecl-lang-select-sites__code">
<span class="ecl-icon ecl-icon--language ecl-lang-select-sites__icon"></span>
<span class="ecl-lang-select-sites__code-text">en</span>
</span>
</a>
</div>
<div class="ecl-dialog ecl-dialog--transparent ecl-dialog--wide" id="ecl-dialog" aria-labelledby="ecl-dialog-title" aria-describedby="ecl-dialog-description" aria-hidden="true" role="dialog">
<h3 id="ecl-dialog-title" class="ecl-heading ecl-heading--h3 ecl-u-sr-only">Dialog</h3>
<p id="ecl-dialog-description" class="ecl-u-sr-only"></p>
<div class="ecl-dialog__body">
<section>
<div>
<div class="ecl-container">
<div class="ecl-row">
<div class="ecl-col-lg-8 ecl-offset-lg-2">
<h2 lang="en" class="ecl-heading ecl-heading--h2 ecl-dialog__title">
<span class="ecl-icon ecl-icon--generic-lang"></span> Select your language
</h2>
<div class="ecl-row">
<div class="ecl-col-md-6">
</div>
<button class="ecl-dialog__dismiss ecl-dialog__dismiss--inverted">Close</button>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<form class="ecl-search-form ecl-site-header__search">
<label class="ecl-search-form__textfield-wrapper">
<span class="ecl-u-sr-only">Search this website</span>
<input type="search" class="ecl-text-input ecl-search-form__textfield" id="global-search" name="default-name" />
</label>
<button type="submit" class="ecl-button ecl-button--form ecl-search-form__button">Search</button>
</form>
</div>
</header>
<div class="ecl-page-header ecl-page-header--basic">
<div class="ecl-container">
<nav class="ecl-breadcrumb" aria-label="breadcrumb">
<span class="ecl-u-sr-only">You are here:</span>
<ol class="ecl-breadcrumb__segments-wrapper">
<li class="ecl-breadcrumb__segment ecl-breadcrumb__segment--first">
<a class="ecl-link ecl-link--inverted ecl-link--standalone ecl-breadcrumb__link" href="../../example.html#">Home</a>
</li>
<li class="ecl-breadcrumb__segment">
<a class="ecl-link ecl-link--inverted ecl-link--standalone ecl-breadcrumb__link" href="../../example.html#">Europa Component Library</a>
</li>
<li class="ecl-breadcrumb__segment ecl-breadcrumb__segment--last">
<span>My community</span>
</li>
</ol>
</nav>
<div class="ecl-page-header__body">
<div class="ecl-page-header__identity">
Template community
</div>
</div>
</div>
</div>
<nav class="ecl-navigation-menu" aria-label="Main Navigation">
<div class="ecl-container">
<button class="ecl-navigation-menu__toggle ecl-navigation-menu__hamburger ecl-navigation-menu__hamburger--squeeze" aria-controls="nav-menu-expandable-root" aria-expanded="false">
<span class="ecl-navigation-menu__hamburger-box">
<span class="ecl-navigation-menu__hamburger-inner"></span>
</span>
<span class="ecl-navigation-menu__hamburger-label">Menu</span>
</button>
<ul class="ecl-navigation-menu__root" id="nav-menu-expandable-root" aria-hidden="true">
<li class="ecl-navigation-menu__item">
<a href="../../example.html#" class="ecl-navigation-menu__link">Home</a>
</li>
<li class="ecl-navigation-menu__item ecl-navigation-menu__item--active">
<a href="../../example.html#" class="ecl-navigation-menu__link" aria-controls="nav-menu-expandable-group-2" aria-expanded="false" aria-haspopup="true">Communities</a>
<div class="ecl-navigation-menu__group ecl-row" id="nav-menu-expandable-group-2">
<div class="ecl-col">
<ul class="ecl-navigation-menu__links ecl-list ecl-list--unstyled">
<li class="ecl-navigation-menu__item">
<a href="../../example.html#" class="ecl-navigation-menu__link ecl-navigation-menu__link--active">Homepage</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#" class="ecl-navigation-menu__link">Articles</a>
</li>
</ul>
</div>
<div class="ecl-col">
<ul class="ecl-navigation-menu__links ecl-list ecl-list--unstyled">
<li class="ecl-navigation-menu__item">
<a href="../../example.html#" class="ecl-navigation-menu__link">Events</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#" class="ecl-navigation-menu__link">Media gallery</a>
</li>
</ul>
</div>
</div>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#" class="ecl-navigation-menu__link">Events</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#" class="ecl-navigation-menu__link">Galleries</a>
</li>
</ul>
</div>
</nav>
<main id="main-content">
<div class="ecl-container ecl-u-mv-l">
<h1 class="ecl-heading ecl-heading--h1">My community</h1>
<div class="ecl-row">
<div class="ecl-col-md-3">
<label class="ecl-form-label" for="create-content">Create content</label>
<select class="ecl-select" id="create-content" name="create-content">
<option>Article</option>
<option>Event</option>
<option>News</option>
<option>Media item</option>
</select>
<div class="ecl-link-block ecl-u-mt-m">
<div class="ecl-link-block__title">Members list</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#">John Doe</a>
</li>
<li class="ecl-link-block__item">
<a class="ecl-link ecl-link--standalone ecl-link-block__link" href="../../example.html#">Jane Doe</a>
</li>
<li class="ecl-link-block__item">
<a class="ecl-link ecl-link--standalone ecl-link-block__link" href="../../example.html#">Mike Doe</a>
</li>
<li class="ecl-link-block__item">
<a class="ecl-link ecl-link--standalone ecl-link-block__link" href="../../example.html#">Richard Doe</a>
</li>
</ul>
</div>
</div>
<div class="ecl-col-md-9">
<p class="ecl-paragraph ecl-paragraph--l">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin elit nisi, scelerisque non elementum ac, placerat in eros. Integer volutpat mi eros. Nunc at nibh eros.
</p>
<div class="ecl-gallery">
<div class="ecl-row ecl-no-gutters">
<div class="ecl-col-md-4 ecl-gallery__item">
<div class="ecl-gallery__item-container">
<img class="ecl-image ecl-image--fluid ecl-gallery__image" alt="Example alt text" src="http://placehold.it/380x185" typeof="foaf:Image" width="380" height="185" />
<span class="ecl-gallery__caption">Example image caption</span>
<span class="ecl-gallery__icon-wrapper">
<span class="ecl-gallery__icon ecl-icon ecl-icon--camera"></span>
</span>
</div>
</div>
<div class="ecl-col-md-3 ecl-gallery__item">
<div class="ecl-gallery__item-container">
<img class="ecl-image ecl-image--fluid ecl-gallery__image" alt="Example alt text" src="http://placehold.it/285x185" typeof="foaf:Image" width="285" height="185" />
<span class="ecl-gallery__icon-wrapper">
<span class="ecl-gallery__icon ecl-icon ecl-icon--audio"></span>
</span>
</div>
</div>
<div class="ecl-col-md-2 ecl-gallery__item">
<div class="ecl-gallery__item-container">
<img class="ecl-image ecl-image--fluid ecl-gallery__image" alt="Example alt text" src="http://placehold.it/190x185" typeof="foaf:Image" width="190" height="185" />
<span class="ecl-gallery__caption">Example image caption</span>
<span class="ecl-gallery__icon-wrapper">
<span class="ecl-gallery__icon ecl-icon ecl-icon--camera"></span>
</span>
</div>
</div>
<div class="ecl-col-md-3 ecl-gallery__item">
<div class="ecl-gallery__item-container">
<img class="ecl-image ecl-image--fluid ecl-gallery__image" alt="Example alt text" src="http://placehold.it/285x185" typeof="foaf:Image" width="285" height="185" />
</div>
</div>
</div>
<div class="ecl-row ecl-no-gutters">
<div class="ecl-col-md-2 ecl-gallery__item">
<div class="ecl-gallery__item-container">
<img class="ecl-image ecl-image--fluid ecl-gallery__image" alt="Example alt text" src="http://placehold.it/190x185" typeof="foaf:Image" width="190" height="185" />
<span class="ecl-gallery__caption">Example image caption</span>
</div>
</div>
<div class="ecl-col-md-3 ecl-gallery__item">
<div class="ecl-gallery__item-container">
<img class="ecl-image ecl-image--fluid ecl-gallery__image" alt="Example alt text" src="http://placehold.it/285x185" typeof="foaf:Image" width="285" height="185" />
</div>
</div>
<div class="ecl-col-md-3 ecl-gallery__item">
<div class="ecl-gallery__item-container">
<img class="ecl-image ecl-image--fluid ecl-gallery__image" alt="Example alt text" src="http://placehold.it/285x185" typeof="foaf:Image" width="285" height="185" />
</div>
</div>
<div class="ecl-col-md-4 ecl-gallery__item">
<div class="ecl-gallery__item-container">
<img class="ecl-image ecl-image--fluid ecl-gallery__image" alt="Example alt text" src="http://placehold.it/380x185" typeof="foaf:Image" width="380" height="185" />
<span class="ecl-gallery__caption">Example image caption</span>
</div>
</div>
</div>
</div>
<button type="submit" class="ecl-button ecl-button--default ecl-u-mt-m">Unsubscribe</button>
</div>
</div>
</div>
</main>
<footer class="ecl-footer">
<div class="ecl-footer__custom">
<div class="ecl-container">
<div class="ecl-row">
<div class="ecl-footer__column ecl-col-md">
<h2 class="ecl-heading ecl-heading--h4 ecl-u-mt-xxxs ecl-u-mb-none ecl-footer__column-title ecl-footer__custom-title-identity">
Europa Component Library
</h2>
</div>
<div class="ecl-footer__column ecl-col-md">
<p class="ecl-footer__custom-label">Follow us:</p>
<ul class="ecl-list ecl-list--inline ecl-footer__list ecl-footer__list--inline ecl-footer__social-links ecl-u-d-inline">
<li class="ecl-footer__list-item">
<a class="ecl-link ecl-footer__link" href="../../example.html#"> <span class="ecl-icon ecl-icon--facebook ecl-footer__social-icon"></span><span>Facebook</span> </a>
</li>
<li class="ecl-footer__list-item">
<a class="ecl-link ecl-footer__link" href="../../example.html#"> <span class="ecl-icon ecl-icon--twitter ecl-footer__social-icon"></span><span>Twitter</span> </a>
</li>
<li class="ecl-footer__list-item">
<a class="ecl-link ecl-link--external ecl-footer__link" href="../../example.html#">Other social media</a>
</li>
</ul>
</div>
<div class="ecl-footer__column ecl-col-md">
<ul class="ecl-list ecl-list--unstyled ecl-footer__list">
<li class="ecl-footer__list-item">
<a class="ecl-link ecl-footer__link" href="../../example.html#">Contact</a>
</li>
<li class="ecl-footer__list-item">
<a class="ecl-link ecl-footer__link" href="../../example.html#">Site map</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="ecl-footer__corporate">
<div class="ecl-footer__corporate-top">
<div class="ecl-container">
<div class="ecl-row">
<div class="ecl-footer__column ecl-col-md">
<h2 class="ecl-heading ecl-heading--h4 ecl-footer__column-title" id="footer-corporate-about-ec">European Commission</h2>
<ul class="ecl-list ecl-list--unstyled ecl-footer__list" aria-labelledby="footer-corporate-about-ec">
<li class="ecl-footer__list-item">
<a class="ecl-link ecl-link--inverted ecl-footer__link" href="https://ec.europa.eu/info/index">European Commission website</a>
</li>
</ul>
</div>
<div class="ecl-footer__column ecl-col-md">
<h2 class="ecl-heading ecl-heading--h4 ecl-footer__column-title" id="footer-corporate-social-media">Follow the European Commission</h2>
<ul class="ecl-list ecl-list--unstyled ecl-list--inline ecl-footer__list ecl-footer__list--inline ecl-footer__social-links" aria-labelledby="footer-corporate-social-media">
<li class="ecl-footer__list-item">
<a class="ecl-link ecl-link--inverted ecl-footer__link" href="../../example.html#"> <span class="ecl-icon ecl-icon--facebook ecl-footer__social-icon"></span><span>Facebook</span> </a>
</li>
<li class="ecl-footer__list-item">
<a class="ecl-link ecl-link--inverted ecl-footer__link" href="../../example.html#"> <span class="ecl-icon ecl-icon--twitter ecl-footer__social-icon"></span><span>Twitter</span> </a>
</li>
<li class="ecl-footer__list-item">
<a class="ecl-link ecl-link--inverted ecl-link--external ecl-footer__link" href="../../example.html#">Other social media</a>
</li>
</ul>
</div>
<div class="ecl-footer__column ecl-col-md">
<h2 class="ecl-heading ecl-heading--h4 ecl-footer__column-title" id="footer-corporate-about-eu">European Union</h2>
<ul class="ecl-list ecl-list--unstyled ecl-footer__list" aria-labelledby="footer-corporate-about-eu">
<li class="ecl-footer__list-item">
<a class="ecl-link ecl-link--inverted ecl-footer__link" href="../../example.html#">EU institutions</a>
</li>
<li class="ecl-footer__list-item">
<a class="ecl-link ecl-link--inverted ecl-footer__link" href="../../example.html#">European Union</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="ecl-footer__corporate-bottom">
<div class="ecl-container">
<div class="ecl-row">
<div class="ecl-col">
<ul class="ecl-list ecl-list--unstyled ecl-list--inline ecl-footer__list ecl-footer__list--inline">
<li class="ecl-footer__list-item">
<a class="ecl-link ecl-link--inverted ecl-footer__link" href="http://ec.europa.eu/info/about-commissions-new-web-presence_en">About the Commission's new web presence</a>
</li>
<li class="ecl-footer__list-item">
<a class="ecl-link ecl-link--inverted ecl-footer__link" href="http://ec.europa.eu/info/resources-partners_en">Resources for partners</a>
</li>
<li class="ecl-footer__list-item">
<a class="ecl-link ecl-link--inverted ecl-footer__link" href="http://ec.europa.eu/info/cookies_en">Cookies</a>
</li>
<li class="ecl-footer__list-item">
<a class="ecl-link ecl-link--inverted ecl-footer__link" href="http://ec.europa.eu/info/legal-notice_en">Legal notice</a>
</li>
<li class="ecl-footer__list-item">
<a class="ecl-link ecl-link--inverted ecl-footer__link" href="http://ec.europa.eu/info/contact_en">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
ECL.megamenu('.ecl-navigation-menu__root');
ECL.initExpandables('.ecl-navigation-menu__toggle');
});
</script>
- Handle: @ecl/ec-template-community
- Tags: template
- Preview:
- Filesystem Path: ../../src/systems/ec/ec-template/ec-template-community/ec-template-community.twig