Europa Component Library

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 '@ec-europa/ecl-skip-links' with {
  'href': '#main-content',
  'label': 'Skip to main content'
} %}

{% include '@ec-europa/ecl-site-headers' with {
  site_switcher: {
    political: { href: '#', label: 'Commission and its priorities' },
    info: {
      href: '#',
      label: 'Policies, information and services',
      is_active: true,
    },
  },
  user_menu: {
    title: 'User menu',
    links: [
      { href: '#', label: 'My workbench' },
      { href: '#', label: 'My account' },
      { href: '#', label: 'Log out' },
    ],
  }
} %}

{% include '@ec-europa/ecl-page-headers' with {
  variant: 'basic',
  breadcrumb: [
    { href: '#', label: 'European Commission' },
    { href: '#', label: 'Group lists' },
  ],
} %}

{% include "@ec-europa/ecl-navigation-menus" with {
  menu_aria_label: 'Main Navigation',
  menu_label: 'Menu',
  links: [
    {
      label: 'Home',
      href: '#',
    },
    {
      label: 'Communities',
      href: '#',
      is_active: true,
      children_links: [
        {
          label: 'Homepage',
          href: '#',
          is_active: true,
        },
        {
          label: 'Articles',
          href: '#',
        },
        {
          label: 'Events',
          href: '#',
        },
        {
          label: 'Media gallery',
          href: '#',
        }
      ],
    },
    {
      label: 'Events',
      href: '#',
    },
    {
      label: 'Galleries',
      href: '#',
    }
  ]
} %}

<main>
  <a id="main-content" tabindex="-1"></a>

  <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-sm-3">
        {% include '@ec-europa/ecl-forms-labels' with {
          for_attribute: 'create-content',
          label: 'Create content'
        } %}

        {% embed '@ec-europa/ecl-forms-selects' 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 '@ec-europa/ecl-link-blocks' with {
          wrapper: true,
          title: 'Members list',
          links: [
            { href: '#', label: 'John Doe' },
            { href: '#', label: 'Jane Doe' },
            { href: '#', label: 'Mike Doe' },
            { href: '#', label: 'Richard Doe' }
          ],
          extra_classes: 'ecl-u-mt-m',
        } %}
      </div>

      <div class="ecl-col-sm-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 '@ec-europa/ecl-gallery-base' with {
          data: {
            rows: [
              [
                {
                  classes: 'ecl-col-md-4',
                  image: {
                    src: 'http://placehold.it/380x185',
                    alt: 'Example alt text',
                    extraAttributes: [
                      { 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',
                    extraAttributes: [
                      { 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',
                    extraAttributes: [
                      { 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',
                    extraAttributes: [
                      { 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',
                    extraAttributes: [
                      { 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',
                    extraAttributes: [
                      { 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',
                    extraAttributes: [
                      { 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',
                    extraAttributes: [
                      { name: 'typeof', value: 'foaf:Image' },
                      { name: 'width', value: '380' },
                      { name: 'height', value: '185' },
                    ],
                  },
                  caption: 'Example image caption',
                },
              ],
            ],
          },
        } %}

        {% include '@ec-europa/ecl-buttons' with {
          label: "Unsubscribe",
          modifier: "default",
          extra_classes: "ecl-u-mt-m",
        } %}
      </div>
    </div>
  </div>
</main>

{% include '@ec-europa/ecl-footers' with {
  footer_menus: [
    {
      type: 'normal',
      wrapper_class: 'ecl-footer__site-corporate',
      menus: [
        {
          title: {
            value: 'European Commission',
            classes: 'ecl-h4 ecl-footer__title',
          },
          classes: 'ecl-footer__menu',
          items: [
            {
              classes: 'ecl-footer__menu-item',
              link: {
                href: 'https://ec.europa.eu/commission/index_en',
                label: 'Commission and its priorities',
              },
            },
            {
              classes: 'ecl-footer__menu-item',
              link: {
                href: 'https://ec.europa.eu/info/index_en',
                label: 'Policies information and services',
              },
            },
          ],
        },
        {
          title: {
            value: 'Follow the European Commission',
            classes: 'ecl-h4 ecl-footer__title',
          },
          classes:
            'ecl-footer__menu ecl-list--inline ecl-footer__social-links',
          items: [
            {
              classes: 'ecl-footer__menu-item',
              link: {
                href: '#',
                label: 'Facebook',
                label_wrapper_class:
                  'ecl-icon ecl-icon--facebook ecl-footer__social-icon',
              },
            },
            {
              classes: 'ecl-footer__menu-item',
              link: {
                href: '#',
                label: 'Twitter',
                label_wrapper_class:
                  'ecl-icon ecl-icon--twitter ecl-footer__social-icon',
              },
            },
            {
              classes: 'ecl-footer__menu-item',
              link: {
                href: '#',
                label: 'Other social media',
                variant: 'external',
              },
            },
          ],
        },
        {
          title: {
            value: 'European Union',
            classes: 'ecl-h4 ecl-footer__title',
          },
          classes: 'ecl-footer__menu',
          items: [
            {
              classes: 'ecl-footer__menu-item',
              link: {
                href: '#',
                label: 'EU institutions',
                variant: 'external',
              },
            },
            {
              classes: 'ecl-footer__menu-item',
              link: {
                href: '#',
                label: 'European Union',
                variant: 'external',
              },
            },
          ],
        },
      ],
    },
    {
      type: 'plain',
      wrapper_class: 'ecl-footer__ec',
      menus: [
        {
          classes: 'ecl-list--inline ecl-footer__menu',
          items: [
            {
              classes: 'ecl-footer__menu-item',
              link: {
                href:
                  'http://ec.europa.eu/info/about-commissions-new-web-presence_en',
                label: "About the Commission's new web presence",
              },
            },
            {
              classes: 'ecl-footer__menu-item',
              link: {
                href: 'http://ec.europa.eu/info/resources-partners_en',
                label: 'Resources for partners',
              },
            },
            {
              classes: 'ecl-footer__menu-item',
              link: {
                href: 'http://ec.europa.eu/info/cookies_en',
                label: 'Cookies',
              },
            },
            {
              classes: 'ecl-footer__menu-item',
              link: {
                href: 'http://ec.europa.eu/info/legal-notice_en',
                label: 'Legal notice',
              },
            },
            {
              classes: 'ecl-footer__menu-item',
              link: {
                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>
 
{
  "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">

    <nav class="ecl-navigation-list-wrapper ecl-u-f-r">
      <h2 class="ecl-u-sr-only">User menu</h2>
      <ul class="ecl-navigation-list ecl-navigation-list--small">
        <li class="ecl-navigation-list__item">

          <a class="ecl-link ecl-link--small ecl-navigation-list__link" href="#">My workbench</a>
        </li>
        <li class="ecl-navigation-list__item">

          <a class="ecl-link ecl-link--small ecl-navigation-list__link" href="#">My account</a>
        </li>
        <li class="ecl-navigation-list__item">

          <a class="ecl-link ecl-link--small ecl-navigation-list__link" href="#">Log out</a>
        </li>
      </ul>
    </nav>
  </div>

  <div class="ecl-site-switcher ecl-site-switcher--header">
    <ul class="ecl-site-switcher__list ecl-container">
      <li class="ecl-site-switcher__option">

        <a class="ecl-link ecl-link--header ecl-site-switcher__link" href="#">Commission and its priorities</a>
      </li>
      <li class="ecl-site-switcher__option ecl-site-switcher__option--is-selected">

        <a class="ecl-link ecl-link--header ecl-site-switcher__link" href="#">Policies, information and services</a>
      </li>
    </ul>
  </div>

  <div class="ecl-container ecl-site-header__banner">

    <a href="https://ec.europa.eu" 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>
        <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-message__dismiss ecl-message__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 class="ecl-button ecl-button--form ecl-search-form__button" type="submit">Search</button>
    </form>
  </div>
</header>

<div class="ecl-page-header">
  <div class="ecl-container">

    <nav class="ecl-breadcrumbs " aria-label="breadcrumbs">
      <span class="ecl-u-sr-only">You are here:</span>
      <ol class="ecl-breadcrumbs__segments-wrapper">
        <li class="ecl-breadcrumbs__segment ecl-breadcrumbs__segment--first">

          <a class="ecl-link ecl-link--inverted ecl-link--standalone ecl-breadcrumbs__link" href="#">European Commission</a>
        </li>
        <li class="ecl-breadcrumbs__segment ecl-breadcrumbs__segment--last">

          <a class="ecl-link ecl-link--inverted ecl-link--standalone ecl-breadcrumbs__link" href="#">Group lists</a>
        </li>
      </ol>
    </nav>

    <div class="ecl-page-header__body">

    </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="#" class="ecl-navigation-menu__link">Home</a>
      </li>
      <li class="ecl-navigation-menu__item ecl-navigation-menu__item--active">
        <a href="#" class="ecl-navigation-menu__link" aria-controls="nav-menu-expandable-group-2" aria-expanded="false" aria-haspopup="true">Communities</a>
        <ul class="ecl-navigation-menu__group" id="nav-menu-expandable-group-2">
          <li class="ecl-navigation-menu__item"><a href="#" class="ecl-navigation-menu__link ecl-navigation-menu__link--active">Homepage</a></li>
          <li class="ecl-navigation-menu__item"><a href="#" class="ecl-navigation-menu__link">Articles</a></li>
          <li class="ecl-navigation-menu__item"><a href="#" class="ecl-navigation-menu__link">Events</a></li>
          <li class="ecl-navigation-menu__item"><a href="#" class="ecl-navigation-menu__link">Media gallery</a></li>
        </ul>
      </li>
      <li class="ecl-navigation-menu__item">
        <a href="#" class="ecl-navigation-menu__link">Events</a>
      </li>
      <li class="ecl-navigation-menu__item">
        <a href="#" class="ecl-navigation-menu__link">Galleries</a>
      </li>
    </ul>
  </div>
</nav>

<main>
  <a id="main-content" tabindex="-1"></a>

  <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-sm-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="#">John Doe</a>
            </li>
            <li class="ecl-link-block__item">

              <a class="ecl-link ecl-link--standalone ecl-link-block__link" href="#">Jane Doe</a>
            </li>
            <li class="ecl-link-block__item">

              <a class="ecl-link ecl-link--standalone ecl-link-block__link" href="#">Mike Doe</a>
            </li>
            <li class="ecl-link-block__item">

              <a class="ecl-link ecl-link--standalone ecl-link-block__link" href="#">Richard Doe</a>
            </li>
          </ul>
        </div>
      </div>

      <div class="ecl-col-sm-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">
            <div class="ecl-col-md-4 ecl-gallery__item">
              <div class="ecl-gallery__item-container">

                <img alt="Example alt text" src="http://placehold.it/380x185" />

                <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 alt="Example alt text" src="http://placehold.it/285x185" />

                <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 alt="Example alt text" src="http://placehold.it/190x185" />

                <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 alt="Example alt text" src="http://placehold.it/285x185" />

              </div>
            </div>
          </div>
          <div class="ecl-row">
            <div class="ecl-col-md-2 ecl-gallery__item">
              <div class="ecl-gallery__item-container">

                <img alt="Example alt text" src="http://placehold.it/190x185" />

                <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 alt="Example alt text" src="http://placehold.it/285x185" />

              </div>
            </div>
            <div class="ecl-col-md-3 ecl-gallery__item">
              <div class="ecl-gallery__item-container">

                <img alt="Example alt text" src="http://placehold.it/285x185" />

              </div>
            </div>
            <div class="ecl-col-md-4 ecl-gallery__item">
              <div class="ecl-gallery__item-container">

                <img alt="Example alt text" src="http://placehold.it/380x185" />

                <span class="ecl-gallery__caption">Example image caption</span>
              </div>
            </div>
          </div>
        </div>

        <button class="ecl-button ecl-button--default ecl-u-mt-m">Unsubscribe</button>
      </div>
    </div>
  </div>
</main>

<footer class="ecl-footer">
  <div class="ecl-footer__site-corporate">
    <div class="ecl-container">
      <div class="ecl-row">
        <div class="ecl-col-sm ecl-footer__column">

          <h4 class="ecl-h4 ecl-footer__title">European Commission</h4>

          <ul class="ecl-footer__menu">
            <li class="ecl-footer__menu-item">

              <a class="ecl-link ecl-link--inverted ecl-footer__link" href="https://ec.europa.eu/commission/index_en">Commission and its priorities</a>
            </li>
            <li class="ecl-footer__menu-item">

              <a class="ecl-link ecl-link--inverted ecl-footer__link" href="https://ec.europa.eu/info/index_en">Policies information and services</a>
            </li>
          </ul>
        </div>
        <div class="ecl-col-sm ecl-footer__column">

          <h4 class="ecl-h4 ecl-footer__title">Follow the European Commission</h4>

          <ul class="ecl-footer__menu ecl-list--inline ecl-footer__social-links">
            <li class="ecl-footer__menu-item">

              <a class="ecl-link ecl-link--inverted ecl-footer__link" href="#"><span class="ecl-icon ecl-icon--facebook ecl-footer__social-icon"></span>Facebook</a>
            </li>
            <li class="ecl-footer__menu-item">

              <a class="ecl-link ecl-link--inverted ecl-footer__link" href="#"><span class="ecl-icon ecl-icon--twitter ecl-footer__social-icon"></span>Twitter</a>
            </li>
            <li class="ecl-footer__menu-item">

              <a class="ecl-link ecl-link--inverted ecl-link--external ecl-footer__link" href="#">Other social media</a>
            </li>
          </ul>
        </div>
        <div class="ecl-col-sm ecl-footer__column">

          <h4 class="ecl-h4 ecl-footer__title">European Union</h4>

          <ul class="ecl-footer__menu">
            <li class="ecl-footer__menu-item">

              <a class="ecl-link ecl-link--inverted ecl-link--external ecl-footer__link" href="#">EU institutions</a>
            </li>
            <li class="ecl-footer__menu-item">

              <a class="ecl-link ecl-link--inverted ecl-link--external ecl-footer__link" href="#">European Union</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="ecl-footer__ec">
    <div class="ecl-container">
      <div class="ecl-row">
        <div class="ecl-col-sm ">

          <ul class="ecl-list--inline ecl-footer__menu">
            <li class="ecl-footer__menu-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__menu-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__menu-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__menu-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__menu-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>
</footer>

<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', function() {
    ECL.megamenu('.ecl-navigation-menu__root');
    ECL.initExpandables('.ecl-navigation-menu__toggle');
  });
</script>
  • Handle: @ec-europa/ecl-communities
  • Tags: template
  • Preview:
  • Filesystem Path: framework/templates/ecl-communities/ecl-communities.twig