Pages: Simple

Documentation • Demo

Ready

Pages

When and how to use

Page template

View
Context
HTML
Info


        {#
  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' with { 'languages': languages } %}

{% include '@ecl/eu-component-page-header' with { variant: 'basic' }|merge(page_header|default({})) %}
{% if menu is defined and menu is not empty %}
  {% include '@ecl/eu-component-navigation-menu' with menu %}
{% endif %}

<main id="main-content">
  <div class="ecl-container ecl-u-mv-l">
    <h1 class="ecl-heading ecl-heading--h1">Page example</h1>
    <p class="ecl-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tortor elit, sagittis eu ante eu, tempor tempus lorem. Quisque auctor leo id tempor pulvinar. Nunc sapien orci, eleifend nec magna ac, feugiat viverra orci. Nulla efficitur nisl vitae risus pretium, sit amet aliquam dolor volutpat. Donec risus elit, congue at porta eget, posuere vitae ipsum. Nulla iaculis magna a lorem dignissim consequat. Praesent mattis libero ac tortor efficitur porta. In congue elementum nunc, vitae accumsan turpis dictum non.</p>
    <p class="ecl-paragraph">Integer convallis quis magna et dapibus. Aenean id lectus vitae nulla fringilla gravida sed id mauris. Aliquam commodo erat sit amet nisi mollis, ut suscipit dolor eleifend. Fusce at malesuada lorem. Ut rutrum nibh massa, sed tincidunt nibh pretium id. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed porttitor turpis a efficitur posuere. Integer eu est sodales, ornare elit ac, congue leo. Sed condimentum faucibus fermentum. Fusce aliquet ut enim euismod feugiat. Fusce nec interdum metus, id finibus nisl.</p>
  </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',
  },
} %}


        
            
            {
  "global": {
    "language": "en"
  },
  "languages": [
    {
      "href": "index_bg",
      "hreflang": "bg",
      "label": "български",
      "lang": "bg"
    },
    {
      "href": "index_es",
      "hreflang": "es",
      "label": "español",
      "lang": "es"
    },
    {
      "href": "index_cs",
      "hreflang": "cs",
      "label": "čeština",
      "lang": "cs"
    },
    {
      "href": "index_da",
      "hreflang": "da",
      "label": "dansk",
      "lang": "da"
    },
    {
      "href": "index_de",
      "hreflang": "de",
      "label": "Deutsch",
      "lang": "de"
    },
    {
      "href": "index_et",
      "hreflang": "et",
      "label": "eesti",
      "lang": "et"
    },
    {
      "href": "index_el",
      "hreflang": "el",
      "label": "ελληνικά",
      "lang": "el"
    },
    {
      "href": "index_en",
      "hreflang": "en",
      "is_active": true,
      "label": "English",
      "lang": "en"
    },
    {
      "href": "index_fr",
      "hreflang": "fr",
      "label": "français",
      "lang": "fr"
    },
    {
      "href": "index_ga",
      "hreflang": "ga",
      "label": "Gaeilge",
      "lang": "ga"
    },
    {
      "href": "index_hr",
      "hreflang": "hr",
      "label": "hrvatski",
      "lang": "hr"
    },
    {
      "href": "index_it",
      "hreflang": "it",
      "label": "italiano",
      "lang": "it"
    },
    {
      "href": "index_lv",
      "hreflang": "lv",
      "label": "latviešu",
      "lang": "lv"
    },
    {
      "href": "index_lt",
      "hreflang": "lt",
      "label": "lietuvių",
      "lang": "lt"
    },
    {
      "href": "index_hu",
      "hreflang": "hu",
      "label": "magyar",
      "lang": "hu"
    },
    {
      "href": "index_mt",
      "hreflang": "mt",
      "label": "Malti",
      "lang": "mt"
    },
    {
      "href": "index_nl",
      "hreflang": "nl",
      "label": "Nederlands",
      "lang": "nl"
    },
    {
      "href": "index_pl",
      "hreflang": "pl",
      "label": "polski",
      "lang": "pl"
    },
    {
      "href": "index_pt",
      "hreflang": "pt",
      "label": "português",
      "lang": "pt-pt"
    },
    {
      "href": "index_ro",
      "hreflang": "ro",
      "label": "română",
      "lang": "ro"
    },
    {
      "href": "index_sk",
      "hreflang": "sk",
      "label": "slovenčina",
      "lang": "sk"
    },
    {
      "href": "index_sl",
      "hreflang": "sl",
      "label": "slovenščina",
      "lang": "sl"
    },
    {
      "href": "index_fi",
      "hreflang": "fi",
      "label": "suomi",
      "lang": "fi"
    },
    {
      "href": "index_sv",
      "hreflang": "sv",
      "label": "svenska",
      "lang": "sv"
    }
  ],
  "page_header": {
    "breadcrumb": [
      {
        "href": "https://europa.eu/european-union/index_en",
        "label": "Home"
      },
      {
        "href": "../../example.html#",
        "label": "Example"
      },
      {
        "label": "Business, Economy, Euro"
      }
    ],
    "identity": "Site identity"
  },
  "_demo": {
    "scripts": "document.addEventListener('DOMContentLoaded', function () {\n            ECL.initBreadcrumb();\n            ECL.dialogs({\n              dialogOverlayId: 'ecl-overlay-language-list',\n              triggerElementsSelector: '#ecl-lang-select-sites__overlay'\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">

                        <a href="index_bg" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="bg" hreflang="bg" rel="alternate">български</a>

                        <a href="index_es" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="es" hreflang="es" rel="alternate">español</a>

                        <a href="index_cs" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="cs" hreflang="cs" rel="alternate">čeština</a>

                        <a href="index_da" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="da" hreflang="da" rel="alternate">dansk</a>

                        <a href="index_de" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="de" hreflang="de" rel="alternate">Deutsch</a>

                        <a href="index_et" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="et" hreflang="et" rel="alternate">eesti</a>

                        <a href="index_el" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="el" hreflang="el" rel="alternate">ελληνικά</a>

                        <a href="index_en" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button ecl-language-list__button--active" lang="en" hreflang="en" rel="alternate">English<span class="ecl-icon ecl-icon--check ecl-u-f-r"></span></a>

                        <a href="index_fr" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="fr" hreflang="fr" rel="alternate">français</a>

                        <a href="index_ga" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="ga" hreflang="ga" rel="alternate">Gaeilge</a>

                        <a href="index_hr" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="hr" hreflang="hr" rel="alternate">hrvatski</a>

                        <a href="index_it" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="it" hreflang="it" rel="alternate">italiano</a>
                      </div>
                      <div class="ecl-col-md-6">

                        <a href="index_lv" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="lv" hreflang="lv" rel="alternate">latviešu</a>

                        <a href="index_lt" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="lt" hreflang="lt" rel="alternate">lietuvių</a>

                        <a href="index_hu" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="hu" hreflang="hu" rel="alternate">magyar</a>

                        <a href="index_mt" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="mt" hreflang="mt" rel="alternate">Malti</a>

                        <a href="index_nl" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="nl" hreflang="nl" rel="alternate">Nederlands</a>

                        <a href="index_pl" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="pl" hreflang="pl" rel="alternate">polski</a>

                        <a href="index_pt" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="pt-pt" hreflang="pt" rel="alternate">português</a>

                        <a href="index_ro" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="ro" hreflang="ro" rel="alternate">română</a>

                        <a href="index_sk" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="sk" hreflang="sk" rel="alternate">slovenčina</a>

                        <a href="index_sl" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="sl" hreflang="sl" rel="alternate">slovenščina</a>

                        <a href="index_fi" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="fi" hreflang="fi" rel="alternate">suomi</a>

                        <a href="index_sv" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="sv" hreflang="sv" rel="alternate">svenska</a>
                      </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="https://europa.eu/european-union/index_en">Home</a>
        </li>
        <li class="ecl-breadcrumb__segment">

          <a class="ecl-link ecl-link--inverted ecl-link--standalone ecl-breadcrumb__link" href="../../example.html#">Example</a>
        </li>
        <li class="ecl-breadcrumb__segment ecl-breadcrumb__segment--last">
          <span>Business, Economy, Euro</span>
        </li>
      </ol>
    </nav>

    <div class="ecl-page-header__body">
      <div class="ecl-page-header__identity">
        Site identity
      </div>
    </div>
  </div>
</div>

<main id="main-content">
  <div class="ecl-container ecl-u-mv-l">
    <h1 class="ecl-heading ecl-heading--h1">Page example</h1>
    <p class="ecl-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tortor elit, sagittis eu ante eu, tempor tempus lorem. Quisque auctor leo id tempor pulvinar. Nunc sapien orci, eleifend nec magna ac, feugiat viverra orci. Nulla efficitur nisl vitae risus pretium, sit amet aliquam dolor volutpat. Donec risus elit, congue at porta eget, posuere vitae ipsum. Nulla iaculis magna a lorem dignissim consequat. Praesent mattis libero ac tortor efficitur porta. In congue elementum nunc, vitae accumsan turpis dictum non.</p>
    <p class="ecl-paragraph">Integer convallis quis magna et dapibus. Aenean id lectus vitae nulla fringilla gravida sed id mauris. Aliquam commodo erat sit amet nisi mollis, ut suscipit dolor eleifend. Fusce at malesuada lorem. Ut rutrum nibh massa, sed tincidunt nibh pretium id. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed porttitor turpis a efficitur posuere. Integer eu est sodales, ornare elit ac, congue leo. Sed condimentum faucibus fermentum. Fusce aliquet ut enim euismod feugiat. Fusce nec interdum metus, id finibus nisl.</p>
  </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>

Handle: @ecl/eu-template-page--simple
Tags: template
Variants (2): Simple , Page with menu
Preview:
- With layout
- Component only
Filesystem Path: ../../src/systems/eu/eu-template/eu-template-page/eu-template-page.twig