<section class="ecl-hero-banner ecl-hero-banner--image ecl-hero-banner--centered">
  <div class="ecl-hero-banner__image"
    style="background-image:url(https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg)"></div>
  <div class="ecl-container ecl-hero-banner__container">
    <div class="ecl-hero-banner__content">
      <h1 class="ecl-hero-banner__title">EU Budget for the future (image)</h1>
      <p class="ecl-hero-banner__description">The European Commission has put forward ambitious yet realistic proposals
        for a modern EU budget. It is time for an EU budget that reflects rapid developments in innovation, the economy,
        the environment and geopolitics, amongst others.</p><a href="/example"
        class="ecl-link ecl-link--cta ecl-link--icon ecl-link--icon-after"><span
          class="ecl-link__label">Subscribe</span> <svg focusable="false" aria-hidden="true"
          class="ecl-link__icon ecl-icon ecl-icon--xs ecl-icon--rotate-90">
          <use xlink:href="/dist/media/icons.db866e2e.svg#ui--corner-arrow"></use>
        </svg></a>
    </div>
  </div>
</section>

<section class="ecl-hero-banner ecl-hero-banner--image-shade ecl-hero-banner--centered">
  <div class="ecl-hero-banner__image"
    style="background-image:url(https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg)"></div>
  <div class="ecl-container ecl-hero-banner__container">
    <div class="ecl-hero-banner__content">
      <h1 class="ecl-hero-banner__title">EU Budget for the future (image shade)</h1>
      <p class="ecl-hero-banner__description">The European Commission has put forward ambitious yet realistic proposals
        for a modern EU budget. It is time for an EU budget that reflects rapid developments in innovation, the economy,
        the environment and geopolitics, amongst others.</p><a href="/example"
        class="ecl-link ecl-link--cta ecl-link--icon ecl-link--icon-after"><span
          class="ecl-link__label">Subscribe</span> <svg focusable="false" aria-hidden="true"
          class="ecl-link__icon ecl-icon ecl-icon--xs ecl-icon--rotate-90">
          <use xlink:href="/dist/media/icons.db866e2e.svg#ui--corner-arrow"></use>
        </svg></a>
    </div>
  </div>
</section>

<section class="ecl-hero-banner ecl-hero-banner--primary ecl-hero-banner--centered">
  <div class="ecl-container ecl-hero-banner__container">
    <div class="ecl-hero-banner__content">
      <h1 class="ecl-hero-banner__title">EU Budget for the future (primary)</h1>
      <p class="ecl-hero-banner__description">The European Commission has put forward ambitious yet realistic proposals
        for a modern EU budget. It is time for an EU budget that reflects rapid developments in innovation, the economy,
        the environment and geopolitics, amongst others.</p><a href="/example"
        class="ecl-link ecl-link--cta ecl-link--icon ecl-link--icon-after"><span
          class="ecl-link__label">Subscribe</span> <svg focusable="false" aria-hidden="true"
          class="ecl-link__icon ecl-icon ecl-icon--xs ecl-icon--rotate-90">
          <use xlink:href="/dist/media/icons.db866e2e.svg#ui--corner-arrow"></use>
        </svg></a>
    </div>
  </div>
</section>

<section class="ecl-hero-banner ecl-hero-banner--default ecl-hero-banner--centered">
  <div class="ecl-container ecl-hero-banner__container">
    <div class="ecl-hero-banner__content">
      <h1 class="ecl-hero-banner__title">EU Budget for the future (default)</h1>
      <p class="ecl-hero-banner__description">The European Commission has put forward ambitious yet realistic proposals
        for a modern EU budget. It is time for an EU budget that reflects rapid developments in innovation, the economy,
        the environment and geopolitics, amongst others.</p><a href="/example"
        class="ecl-link ecl-link--cta ecl-link--icon ecl-link--icon-after"><span
          class="ecl-link__label">Subscribe</span> <svg focusable="false" aria-hidden="true"
          class="ecl-link__icon ecl-icon ecl-icon--xs ecl-icon--rotate-90">
          <use xlink:href="/dist/media/icons.db866e2e.svg#ui--corner-arrow"></use>
        </svg></a>
    </div>
  </div>
</section>

<section class="ecl-hero-banner ecl-hero-banner--default">
  <div class="ecl-container ecl-hero-banner__container">
    <div class="ecl-hero-banner__content">
      <h1 class="ecl-hero-banner__title">EU Budget for the future (default)</h1>
      <p class="ecl-hero-banner__description">The European Commission has put forward ambitious yet realistic proposals
        for a modern EU budget. It is time for an EU budget that reflects rapid developments in innovation, the economy,
        the environment and geopolitics, amongst others.</p><a href="/example"
        class="ecl-link ecl-link--cta ecl-link--icon ecl-link--icon-after"><span
          class="ecl-link__label">Subscribe</span> <svg focusable="false" aria-hidden="true"
          class="ecl-link__icon ecl-icon ecl-icon--xs ecl-icon--rotate-90">
          <use xlink:href="/dist/media/icons.db866e2e.svg#ui--corner-arrow"></use>
        </svg></a>
    </div>
  </div>
</section>