EU System

Communities

Documentation • Demo

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/eu-component-skip-link' with {
  'href': '#main-content',
  'label': 'Skip to main content'
} %}

{% include '@ecl/eu-component-site-header' %}

{% include '@ecl/eu-component-page-header' with {
  variant: 'basic',
  breadcrumb: [
    { href: '../../example.html#', label: 'Home' },
    { href: '../../example.html#', label: 'Group lists' },
    { label: 'My community' },
  ],
} %}

{% include "@ecl/eu-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/eu-component-form-label' with {
          for_attribute: 'create-content',
          label: 'Create content'
        } %}

        {% embed '@ecl/eu-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/eu-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/eu-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/eu-component-button' with {
          label: "Unsubscribe",
          modifier: "default",
          extra_classes: "ecl-u-mt-m",
        } %}
      </div>
    </div>
  </div>
</main>

{% include '@ecl/eu-component-footer' with {
  custom_footer: {
    identity: 'Site Identification',
    social_links: {
      label: 'Follow us:',
      links: [
        {
          type: 'social-network',
          icon: 'facebook',
          link: {
            href: '../../example.html#facebook',
            label: 'Facebook',
          },
        },
        {
          type: 'social-network',
          icon: 'twitter',
          link: {
            href: '../../example.html#twitter',
            label: 'Twitter',
          },
        },
        {
          type: 'social-network',
          icon: 'instagram',
          link: {
            href: '../../example.html#instagram',
            label: 'Instagram',
          },
        },
      ],
    },
    other_links: {
      links: [
        {
          link: {
            href: '../../example.html#loremipsum1',
            label: 'Lorem ipsum',
          },
        },
        {
          link: {
            href: '../../example.html#loremipsum2',
            label: 'Lorem ipsum',
          },
        },
        {
          link: {
            href: '../../example.html#loremipsum3',
            label: 'Lorem ipsum dolor sit',
          },
        },
        {
          link: {
            href: '../../example.html#loremipsum4',
            label: 'Lorem ipsum dolor sit',
          },
        },
      ],
    },
  },
  corporate_footer: {
    contact_eu: {
      title: 'Contact the EU',
      items: [
        {
          html:
            'Call us <a href="../../example.html#call" class="ecl-link ecl-link--standalone">00 800 6 7 8 9 10 11</a>',
        },
        {
          html:
            'Use other <a href="../../example.html#call-other-options" class="ecl-link ecl-link--standalone">telephone options</a>',
        },
        {
          html:
            'Write to us via our <a href="../../example.html#contact-form" class="ecl-link ecl-link--standalone">contact form</a>',
        },
        {
          html:
            'Meet us at a <a href="../../example.html#local-office" class="ecl-link ecl-link--standalone">local EU office</a>',
        },
      ],
    },
    social_media: {
      title: 'Find a social media account',
      items: [
        {
          html:
            '<a href="../../example.html#call" class="ecl-link ecl-link--standalone">Search for EU social media channels</a>',
        },
      ],
    },
    find_institution: {
      title: 'EU institutions',
      items: [
        {
          href: '../../example.html#',
          label: 'European Parliament',
        },
        {
          href: '../../example.html#',
          label: 'European Council',
        },

        {
          href: '../../example.html#',
          label: 'Council of the European Union',
        },
        {
          href: '../../example.html#',
          label: 'European Commission',
        },
        {
          href: '../../example.html#',
          label: 'Court of Justice of the European Union',
        },
        {
          href: '../../example.html#',
          label: 'European Central Bank',
        },
        {
          href: '../../example.html#',
          label: 'European Court of Auditors',
        },
        {
          href: '../../example.html#',
          label: 'European External Action Service',
        },
        {
          href: '../../example.html#',
          label: 'European Economic and Social Committee',
        },
        {
          href: '../../example.html#',
          label: 'European Committee of the Regions',
        },
        {
          href: '../../example.html#',
          label: 'European Investment Bank',
        },
        {
          href: '../../example.html#',
          label: 'European Ombudsman',
        },
        {
          href: '../../example.html#',
          label: 'European Data Protection Supervisor',
        },
        {
          href: '../../example.html#',
          label: 'European Personnel Selection Office',
        },
        {
          href: '../../example.html#',
          label: 'Publications Office of the European Union',
        },
        {
          href: '../../example.html#',
          label: 'Agencies',
        },
      ],
      short_list: [
        {
          html:
            'Search for <a href="../../example.html#call" class="ecl-link ecl-link--standalone">EU institutions</a>',
        },
      ],
    },
    bottom_links: [
      {
        href: '../../example.html#',
        label: 'Work for the EU',
      },
      {
        href: '../../example.html#',
        label: 'Sitemap',
      },
      {
        href: '../../example.html#',
        label: 'About this site',
      },
      {
        href: '../../example.html#',
        label: 'Language policy',
      },
      {
        href: '../../example.html#',
        label: 'Legal notice',
      },
      {
        href: '../../example.html#',
        label: 'Cookies',
      },
    ],
    published_date: 'Last published 26/06/2018',
  },
} %}

<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"
  },
  "_demo": {
    "scripts": "\n        document.addEventListener('DOMContentLoaded', function () {\n          ECL.dialogs({\n            dialogOverlayId: 'ecl-overlay-language-list',\n            triggerElementsSelector: '#ecl-lang-select-sites__overlay'\n          });\n        });\n      "
  }
}
 
<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://europa.eu" class="ecl-logo ecl-logo--logotype ecl-site-header__logo" title="Home - European Union"><span class="ecl-u-sr-only">Home - European Union</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" 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#">Group lists</a>
        </li>
        <li class="ecl-breadcrumb__segment ecl-breadcrumb__segment--last">
          <span>My community</span>
        </li>
      </ol>
    </nav>

  </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-footer__custom-title">
        Site Identification
      </div>
      <div class="ecl-row">
        <div class="ecl-col-md">
          <div class="ecl-footer__custom-label">Follow us:</div>
          <ul class="ecl-list ecl-list--inline ecl-footer__list ecl-footer__list--inline ecl-footer__social-links">
            <li class="ecl-footer__list-item">

              <a class="ecl-link ecl-footer__link" href="../../example.html#facebook"> <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#twitter"> <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-footer__link" href="../../example.html#instagram"> <span class="ecl-icon ecl-icon--instagram ecl-footer__social-icon"></span><span>Instagram</span> </a>
            </li>
          </ul>
        </div>
        <div class="ecl-col-md ecl-footer__other-links">
          <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-footer__link" href="../../example.html#loremipsum1">Lorem ipsum</a>
            </li>
            <li class="ecl-footer__list-item">

              <a class="ecl-link ecl-footer__link" href="../../example.html#loremipsum2">Lorem ipsum</a>
            </li>
            <li class="ecl-footer__list-item">

              <a class="ecl-link ecl-footer__link" href="../../example.html#loremipsum3">Lorem ipsum dolor sit</a>
            </li>
            <li class="ecl-footer__list-item">

              <a class="ecl-link ecl-footer__link" href="../../example.html#loremipsum4">Lorem ipsum dolor sit</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 ecl-footer__row">
          <div class="ecl-footer__column ecl-col-md-4 ecl-footer__spaced-column">
            <div class="ecl-footer__column-title" id="footer-corporate-contact-eu">Contact the EU</div>
            <ul class="ecl-list ecl-list--unstyled ecl-footer__list" aria-labelledby="footer-corporate-contact-eu">
              <li class="ecl-footer__list-item">
                Call us <a href="../../example.html#call" class="ecl-link ecl-link--standalone">00 800 6 7 8 9 10 11</a>
              </li>
              <li class="ecl-footer__list-item">
                Use other <a href="../../example.html#call-other-options" class="ecl-link ecl-link--standalone">telephone options</a>
              </li>
              <li class="ecl-footer__list-item">
                Write to us via our <a href="../../example.html#contact-form" class="ecl-link ecl-link--standalone">contact form</a>
              </li>
              <li class="ecl-footer__list-item">
                Meet us at a <a href="../../example.html#local-office" class="ecl-link ecl-link--standalone">local EU office</a>
              </li>
            </ul>
            <div class="ecl-footer__column-title ecl-u-mt-l" id="footer-corporate-social-media">Find a social media account</div>
            <ul class="ecl-list ecl-list--unstyled ecl-footer__list" aria-labelledby="footer-corporate-social-media">
              <li class="ecl-footer__list-item">
                <a href="../../example.html#call" class="ecl-link ecl-link--standalone">Search for EU social media channels</a>
              </li>
            </ul>
          </div>
          <div class="ecl-footer__column ecl-col-md-8 ecl-footer__spaced-column">
            <div class="ecl-footer__column-title" id="footer-corporate-find-institution">EU institutions</div>
            <ul class="ecl-list ecl-list--unstyled ecl-footer__list ecl-footer__list--2-col ecl-footer__list--long" aria-labelledby="footer-corporate-find-institution">
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">European Parliament</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">European Council</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">Council of the European Union</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">European Commission</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">Court of Justice of the European Union</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">European Central Bank</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">European Court of Auditors</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">European External Action Service</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">European Economic and Social Committee</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">European Committee of the Regions</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">European Investment Bank</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">European Ombudsman</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">European Data Protection Supervisor</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">European Personnel Selection Office</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">Publications Office of the European Union</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">Agencies</a>
              </li>
            </ul>
            <ul class="ecl-list ecl-list--unstyled ecl-footer__list ecl-footer__list--2-col ecl-footer__list--short">
              <li class="ecl-footer__list-item">
                Search for <a href="../../example.html#call" class="ecl-link ecl-link--standalone">EU institutions</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="ecl-footer__corporate-bottom">
      <div class="ecl-container">
        <div class="ecl-row ecl-footer__row">
          <div class="ecl-col">
            <ul class="ecl-list ecl-list--inline ecl-footer__list ecl-footer__list--inline">
              <li class="ecl-footer__list-item ecl-footer__publication-date">Last published 26/06/2018</li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">Work for the EU</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">Sitemap</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">About this site</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">Language policy</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">Legal notice</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">Cookies</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/eu-template-community
  • Tags: template
  • Preview:
  • Filesystem Path: ../../src/systems/eu/eu-template/eu-template-community/eu-template-community.twig