Hide menu

Europa Style Guide

develop 03 June 2021 - 14:45
  • 0Overview
  • 1Auto cols
  • 2Banner
  • 3Breadcrumb
  • 4Buttons
  • 5Card
  • 6Comment
  • 7Context navigation
  • 8Date Block
  • 9Datepicker
  • 10EC Footer
  • 11EC Hero links
  • 12EC Wrapper
  • 13Expandable
  • 14Featured item
  • 15Field
  • 16File
  • 17Filters
  • 18Form
  • 19Gallery
  • 20Hero links
  • 21Highlighted item
  • 22Horizontal line
  • 23Icon
  • 24Inpage navigation
  • 25Labels
  • 26Language select (Page)
  • 27Link block
  • 28Listing
  • 29Messages
  • 30Meta
  • 31More link
  • 32Bootstrap: Nav tabs
  • 33Outreach
  • 34Page header
  • 35Pager
  • 36Profile topbar
  • 37RSS Link
  • 38Search form
  • 39Section
  • 40Site user menu
  • 41Site header
  • 42Social Media
  • 43Spinner
  • 44Splash Page
  • 45Table responsive
  • 46Tags
  • 47Timeline
  • 48Top image
  • 49Typography

11 #ec-hero-links EC Hero links

Example
President Juncker
President Juncker

President Juncker

The Commissioners
The Commissioners

The Commissioners

<div class="ec-hero-links">
  <div class="ec-hero-links__item">
    <div class="ec-hero-links__inner">
      <a href="https://ec.europa.eu/commission/commissioners/2019-2024/president_[europa_tokens:europa_interface_language]" class="wrapping-link" title="President Juncker">
        <span class="sr-only">President Juncker</span>
      </a>
      <div class="ec-hero-links__content">
        <div class="ec-hero-links__image">
          <img class="img-responsive" src="https://ec.europa.eu/info/sites/info/files/president_juncker.jpg" alt="President Juncker">
        </div>
        <p class="ec-hero-links__text">President Juncker</p>
      </div>
    </div>
  </div>
  <div class="ec-hero-links__item">
    <div class="ec-hero-links__inner">
      <a href="https://ec.europa.eu/commission/commissioners/2019-2024_[europa_tokens:europa_interface_language]" class="wrapping-link" title="The Commissioners">
        <span class="sr-only">The Commissioners</span>
      </a>
      <div class="ec-hero-links__content">
        <div class="ec-hero-links__image">
          <img class="img-responsive" src="https://ec.europa.eu/info/sites/info/files/the_commissioners_2017.jpg" alt="The Commissioners">
        </div>
        <p class="ec-hero-links__text">The Commissioners</p>
      </div>
    </div>
  </div>
</div>