EurActiv Sections API


Log in to deploy new versions or manage existing ones.


The purpose of this API is to provide a single location to store and build EurActiv section menu icons and banners. To use it:

<link href='//assets.euractiv.com/easections/v2/easections-min.css' rel='stylesheet'>

Documentation and Examples


To use the section icon, you need:

  • a wrapper of some kind with the class "ea-section-icons-[color_combo_name]"
  • a link with the class "ea-section-icon-[section_name]"

For example:

div.ea-section-icons-blue
    a.ea-section-icon-agriculture
      Agriculture

Except for the anchor, html structure does not matter, other markup is possible. For example, a list:

ul.ea-section-icons-blue
    li
        a.ea-section-icon-agriculture
            Agriculture
<div class="ea-section-icons-blue">
  <a href="#" class="ea-section-icon-aaa-default">Aaa Default</a>
  <a href="#" class="ea-section-icon-agriculture-alimentation">Agriculture Alimentation</a>
  <a href="#" class="ea-section-icon-agriculture-food">Agriculture Food</a>
  <a href="#" class="ea-section-icon-aide-au-developpement">Aide Au Developpement</a>
  <a href="#" class="ea-section-icon-central-europe">Central Europe</a>
  <a href="#" class="ea-section-icon-climate-environment">Climate Environment</a>
  <a href="#" class="ea-section-icon-climate-environnement">Climate Environnement</a>
  <a href="#" class="ea-section-icon-competition">Competition</a>
  <a href="#" class="ea-section-icon-development-policy">Development Policy</a>
  <a href="#" class="ea-section-icon-developpement-durable">Developpement Durable</a>
  <a href="#" class="ea-section-icon-digital">Digital</a>
  <a href="#" class="ea-section-icon-education">Education</a>
  <a href="#" class="ea-section-icon-elections">Elections</a>
  <a href="#" class="ea-section-icon-energie-und-umwelt">Energie Und Umwelt</a>
  <a href="#" class="ea-section-icon-energie">Energie</a>
  <a href="#" class="ea-section-icon-energy">Energy</a>
  <a href="#" class="ea-section-icon-enlargement">Enlargement</a>
  <a href="#" class="ea-section-icon-entwicklungspolitik">Entwicklungspolitik</a>
  <a href="#" class="ea-section-icon-eu-aussenpolitik">Eu Aussenpolitik</a>
  <a href="#" class="ea-section-icon-eu-innenpolitik">Eu Innenpolitik</a>
  <a href="#" class="ea-section-icon-eu-priorities">Eu Priorities</a>
  <a href="#" class="ea-section-icon-euro-finance">Euro Finance</a>
  <a href="#" class="ea-section-icon-euro-finances">Euro Finances</a>
  <a href="#" class="ea-section-icon-europakompact">Europakompact</a>
  <a href="#" class="ea-section-icon-europakompakt">Europakompakt</a>
  <a href="#" class="ea-section-icon-europe-de-l-est">Europe De L Est</a>
  <a href="#" class="ea-section-icon-europe-s-east">Europe S East</a>
  <a href="#" class="ea-section-icon-finanzen-und-wirtschaft">Finanzen Und Wirtschaft</a>
  <a href="#" class="ea-section-icon-gesundheit-und-verbraucherschutz">Gesundheit Und Verbraucherschutz</a>
  <a href="#" class="ea-section-icon-global-europe">Global Europe</a>
  <a href="#" class="ea-section-icon-health-consumers">Health Consumers</a>
  <a href="#" class="ea-section-icon-innovation-entreprises">Innovation Entreprises</a>
  <a href="#" class="ea-section-icon-innovation-industry">Innovation Industry</a>
  <a href="#" class="ea-section-icon-innovation">Innovation</a>
  <a href="#" class="ea-section-icon-justice">Justice</a>
  <a href="#" class="ea-section-icon-l-europe-dans-le-monde">L Europe Dans Le Monde</a>
  <a href="#" class="ea-section-icon-language">Language</a>
  <a href="#" class="ea-section-icon-langues-culture">Langues Culture</a>
  <a href="#" class="ea-section-icon-med-south">Med South</a>
  <a href="#" class="ea-section-icon-osterreich">Osterreich</a>
  <a href="#" class="ea-section-icon-politique">Politique</a>
  <a href="#" class="ea-section-icon-public-affairs">Public Affairs</a>
  <a href="#" class="ea-section-icon-regional">Regional</a>
  <a href="#" class="ea-section-icon-royaume-uni-en-europe">Royaume Uni En Europe</a>
  <a href="#" class="ea-section-icon-sante-modes-de-vie">Sante Modes De Vie</a>
  <a href="#" class="ea-section-icon-science-policymaking">Science Policymaking</a>
  <a href="#" class="ea-section-icon-sciences-legislation">Sciences Legislation</a>
  <a href="#" class="ea-section-icon-security">Security</a>
  <a href="#" class="ea-section-icon-social-europe-jobs">Social Europe Jobs</a>
  <a href="#" class="ea-section-icon-societe-de-l-information">Societe De L Information</a>
  <a href="#" class="ea-section-icon-sports">Sports</a>
  <a href="#" class="ea-section-icon-sustainable-dev">Sustainable Dev</a>
  <a href="#" class="ea-section-icon-trade-society">Trade Society</a>
  <a href="#" class="ea-section-icon-transport">Transport</a>
  <a href="#" class="ea-section-icon-uk-europe">Uk Europe</a>
  <a href="#" class="ea-section-icon-ukraine-und-eu">Ukraine Und Eu</a>
</div>

<div class="ea-section-icons-yellow">
  <a href="#" class="ea-section-icon-aaa-default">Aaa Default</a>
  <a href="#" class="ea-section-icon-agriculture-alimentation">Agriculture Alimentation</a>
  <a href="#" class="ea-section-icon-agriculture-food">Agriculture Food</a>
  <a href="#" class="ea-section-icon-aide-au-developpement">Aide Au Developpement</a>
  <a href="#" class="ea-section-icon-central-europe">Central Europe</a>
  <a href="#" class="ea-section-icon-climate-environment">Climate Environment</a>
  <a href="#" class="ea-section-icon-climate-environnement">Climate Environnement</a>
  <a href="#" class="ea-section-icon-competition">Competition</a>
  <a href="#" class="ea-section-icon-development-policy">Development Policy</a>
  <a href="#" class="ea-section-icon-developpement-durable">Developpement Durable</a>
  <a href="#" class="ea-section-icon-digital">Digital</a>
  <a href="#" class="ea-section-icon-education">Education</a>
  <a href="#" class="ea-section-icon-elections">Elections</a>
  <a href="#" class="ea-section-icon-energie-und-umwelt">Energie Und Umwelt</a>
  <a href="#" class="ea-section-icon-energie">Energie</a>
  <a href="#" class="ea-section-icon-energy">Energy</a>
  <a href="#" class="ea-section-icon-enlargement">Enlargement</a>
  <a href="#" class="ea-section-icon-entwicklungspolitik">Entwicklungspolitik</a>
  <a href="#" class="ea-section-icon-eu-aussenpolitik">Eu Aussenpolitik</a>
  <a href="#" class="ea-section-icon-eu-innenpolitik">Eu Innenpolitik</a>
  <a href="#" class="ea-section-icon-eu-priorities">Eu Priorities</a>
  <a href="#" class="ea-section-icon-euro-finance">Euro Finance</a>
  <a href="#" class="ea-section-icon-euro-finances">Euro Finances</a>
  <a href="#" class="ea-section-icon-europakompact">Europakompact</a>
  <a href="#" class="ea-section-icon-europakompakt">Europakompakt</a>
  <a href="#" class="ea-section-icon-europe-de-l-est">Europe De L Est</a>
  <a href="#" class="ea-section-icon-europe-s-east">Europe S East</a>
  <a href="#" class="ea-section-icon-finanzen-und-wirtschaft">Finanzen Und Wirtschaft</a>
  <a href="#" class="ea-section-icon-gesundheit-und-verbraucherschutz">Gesundheit Und Verbraucherschutz</a>
  <a href="#" class="ea-section-icon-global-europe">Global Europe</a>
  <a href="#" class="ea-section-icon-health-consumers">Health Consumers</a>
  <a href="#" class="ea-section-icon-innovation-entreprises">Innovation Entreprises</a>
  <a href="#" class="ea-section-icon-innovation-industry">Innovation Industry</a>
  <a href="#" class="ea-section-icon-innovation">Innovation</a>
  <a href="#" class="ea-section-icon-justice">Justice</a>
  <a href="#" class="ea-section-icon-l-europe-dans-le-monde">L Europe Dans Le Monde</a>
  <a href="#" class="ea-section-icon-language">Language</a>
  <a href="#" class="ea-section-icon-langues-culture">Langues Culture</a>
  <a href="#" class="ea-section-icon-med-south">Med South</a>
  <a href="#" class="ea-section-icon-osterreich">Osterreich</a>
  <a href="#" class="ea-section-icon-politique">Politique</a>
  <a href="#" class="ea-section-icon-public-affairs">Public Affairs</a>
  <a href="#" class="ea-section-icon-regional">Regional</a>
  <a href="#" class="ea-section-icon-royaume-uni-en-europe">Royaume Uni En Europe</a>
  <a href="#" class="ea-section-icon-sante-modes-de-vie">Sante Modes De Vie</a>
  <a href="#" class="ea-section-icon-science-policymaking">Science Policymaking</a>
  <a href="#" class="ea-section-icon-sciences-legislation">Sciences Legislation</a>
  <a href="#" class="ea-section-icon-security">Security</a>
  <a href="#" class="ea-section-icon-social-europe-jobs">Social Europe Jobs</a>
  <a href="#" class="ea-section-icon-societe-de-l-information">Societe De L Information</a>
  <a href="#" class="ea-section-icon-sports">Sports</a>
  <a href="#" class="ea-section-icon-sustainable-dev">Sustainable Dev</a>
  <a href="#" class="ea-section-icon-trade-society">Trade Society</a>
  <a href="#" class="ea-section-icon-transport">Transport</a>
  <a href="#" class="ea-section-icon-uk-europe">Uk Europe</a>
  <a href="#" class="ea-section-icon-ukraine-und-eu">Ukraine Und Eu</a>
</div>

<div class="ea-section-icons-yellow-alt">
  <a href="#" class="ea-section-icon-aaa-default">Aaa Default</a>
  <a href="#" class="ea-section-icon-agriculture-alimentation">Agriculture Alimentation</a>
  <a href="#" class="ea-section-icon-agriculture-food">Agriculture Food</a>
  <a href="#" class="ea-section-icon-aide-au-developpement">Aide Au Developpement</a>
  <a href="#" class="ea-section-icon-central-europe">Central Europe</a>
  <a href="#" class="ea-section-icon-climate-environment">Climate Environment</a>
  <a href="#" class="ea-section-icon-climate-environnement">Climate Environnement</a>
  <a href="#" class="ea-section-icon-competition">Competition</a>
  <a href="#" class="ea-section-icon-development-policy">Development Policy</a>
  <a href="#" class="ea-section-icon-developpement-durable">Developpement Durable</a>
  <a href="#" class="ea-section-icon-digital">Digital</a>
  <a href="#" class="ea-section-icon-education">Education</a>
  <a href="#" class="ea-section-icon-elections">Elections</a>
  <a href="#" class="ea-section-icon-energie-und-umwelt">Energie Und Umwelt</a>
  <a href="#" class="ea-section-icon-energie">Energie</a>
  <a href="#" class="ea-section-icon-energy">Energy</a>
  <a href="#" class="ea-section-icon-enlargement">Enlargement</a>
  <a href="#" class="ea-section-icon-entwicklungspolitik">Entwicklungspolitik</a>
  <a href="#" class="ea-section-icon-eu-aussenpolitik">Eu Aussenpolitik</a>
  <a href="#" class="ea-section-icon-eu-innenpolitik">Eu Innenpolitik</a>
  <a href="#" class="ea-section-icon-eu-priorities">Eu Priorities</a>
  <a href="#" class="ea-section-icon-euro-finance">Euro Finance</a>
  <a href="#" class="ea-section-icon-euro-finances">Euro Finances</a>
  <a href="#" class="ea-section-icon-europakompact">Europakompact</a>
  <a href="#" class="ea-section-icon-europakompakt">Europakompakt</a>
  <a href="#" class="ea-section-icon-europe-de-l-est">Europe De L Est</a>
  <a href="#" class="ea-section-icon-europe-s-east">Europe S East</a>
  <a href="#" class="ea-section-icon-finanzen-und-wirtschaft">Finanzen Und Wirtschaft</a>
  <a href="#" class="ea-section-icon-gesundheit-und-verbraucherschutz">Gesundheit Und Verbraucherschutz</a>
  <a href="#" class="ea-section-icon-global-europe">Global Europe</a>
  <a href="#" class="ea-section-icon-health-consumers">Health Consumers</a>
  <a href="#" class="ea-section-icon-innovation-entreprises">Innovation Entreprises</a>
  <a href="#" class="ea-section-icon-innovation-industry">Innovation Industry</a>
  <a href="#" class="ea-section-icon-innovation">Innovation</a>
  <a href="#" class="ea-section-icon-justice">Justice</a>
  <a href="#" class="ea-section-icon-l-europe-dans-le-monde">L Europe Dans Le Monde</a>
  <a href="#" class="ea-section-icon-language">Language</a>
  <a href="#" class="ea-section-icon-langues-culture">Langues Culture</a>
  <a href="#" class="ea-section-icon-med-south">Med South</a>
  <a href="#" class="ea-section-icon-osterreich">Osterreich</a>
  <a href="#" class="ea-section-icon-politique">Politique</a>
  <a href="#" class="ea-section-icon-public-affairs">Public Affairs</a>
  <a href="#" class="ea-section-icon-regional">Regional</a>
  <a href="#" class="ea-section-icon-royaume-uni-en-europe">Royaume Uni En Europe</a>
  <a href="#" class="ea-section-icon-sante-modes-de-vie">Sante Modes De Vie</a>
  <a href="#" class="ea-section-icon-science-policymaking">Science Policymaking</a>
  <a href="#" class="ea-section-icon-sciences-legislation">Sciences Legislation</a>
  <a href="#" class="ea-section-icon-security">Security</a>
  <a href="#" class="ea-section-icon-social-europe-jobs">Social Europe Jobs</a>
  <a href="#" class="ea-section-icon-societe-de-l-information">Societe De L Information</a>
  <a href="#" class="ea-section-icon-sports">Sports</a>
  <a href="#" class="ea-section-icon-sustainable-dev">Sustainable Dev</a>
  <a href="#" class="ea-section-icon-trade-society">Trade Society</a>
  <a href="#" class="ea-section-icon-transport">Transport</a>
  <a href="#" class="ea-section-icon-uk-europe">Uk Europe</a>
  <a href="#" class="ea-section-icon-ukraine-und-eu">Ukraine Und Eu</a>
</div>

To turn a section header into a banner, simply add the class ea-section-banner-[section_name] to the section title. For example:

<h1 class="ea-section-banner-[section_name]">
      Section Name
</h1>

The tag name does not matter, H1 is used here for an example.

Aaa Default

Agriculture Alimentation

Agriculture Food

Aide Au Developpement

Central Europe

Climate Environment

Climate Environnement

Competition

Development Policy

Developpement Durable

Digital

Education

Elections

Energie Und Umwelt

Energie

Energy

Enlargement

Entwicklungspolitik

Eu Aussenpolitik

Eu Innenpolitik

Eu Priorities

Euro Finance

Euro Finances

Europakompact

Europakompakt

Europe De L Est

Europe S East

Finanzen Und Wirtschaft

Gesundheit Und Verbraucherschutz

Global Europe

Health Consumers

Innovation Entreprises

Innovation Industry

Innovation

Justice

L Europe Dans Le Monde

Language

Langues Culture

Med South

Osterreich

Politique

Public Affairs

Regional

Royaume Uni En Europe

Sante Modes De Vie

Science Policymaking

Sciences Legislation

Security

Social Europe Jobs

Societe De L Information

Sports

Sustainable Dev

Trade Society

Transport

Uk Europe

Ukraine Und Eu

<h2 class="ea-section-banner-aaa-default">Aaa Default</h2>
<h2 class="ea-section-banner-agriculture-alimentation">Agriculture Alimentation</h2>
<h2 class="ea-section-banner-agriculture-food">Agriculture Food</h2>
<h2 class="ea-section-banner-aide-au-developpement">Aide Au Developpement</h2>
<h2 class="ea-section-banner-central-europe">Central Europe</h2>
<h2 class="ea-section-banner-climate-environment">Climate Environment</h2>
<h2 class="ea-section-banner-climate-environnement">Climate Environnement</h2>
<h2 class="ea-section-banner-competition">Competition</h2>
<h2 class="ea-section-banner-development-policy">Development Policy</h2>
<h2 class="ea-section-banner-developpement-durable">Developpement Durable</h2>
<h2 class="ea-section-banner-digital">Digital</h2>
<h2 class="ea-section-banner-education">Education</h2>
<h2 class="ea-section-banner-elections">Elections</h2>
<h2 class="ea-section-banner-energie-und-umwelt">Energie Und Umwelt</h2>
<h2 class="ea-section-banner-energie">Energie</h2>
<h2 class="ea-section-banner-energy">Energy</h2>
<h2 class="ea-section-banner-enlargement">Enlargement</h2>
<h2 class="ea-section-banner-entwicklungspolitik">Entwicklungspolitik</h2>
<h2 class="ea-section-banner-eu-aussenpolitik">Eu Aussenpolitik</h2>
<h2 class="ea-section-banner-eu-innenpolitik">Eu Innenpolitik</h2>
<h2 class="ea-section-banner-eu-priorities">Eu Priorities</h2>
<h2 class="ea-section-banner-euro-finance">Euro Finance</h2>
<h2 class="ea-section-banner-euro-finances">Euro Finances</h2>
<h2 class="ea-section-banner-europakompact">Europakompact</h2>
<h2 class="ea-section-banner-europakompakt">Europakompakt</h2>
<h2 class="ea-section-banner-europe-de-l-est">Europe De L Est</h2>
<h2 class="ea-section-banner-europe-s-east">Europe S East</h2>
<h2 class="ea-section-banner-finanzen-und-wirtschaft">Finanzen Und Wirtschaft</h2>
<h2 class="ea-section-banner-gesundheit-und-verbraucherschutz">Gesundheit Und Verbraucherschutz</h2>
<h2 class="ea-section-banner-global-europe">Global Europe</h2>
<h2 class="ea-section-banner-health-consumers">Health Consumers</h2>
<h2 class="ea-section-banner-innovation-entreprises">Innovation Entreprises</h2>
<h2 class="ea-section-banner-innovation-industry">Innovation Industry</h2>
<h2 class="ea-section-banner-innovation">Innovation</h2>
<h2 class="ea-section-banner-justice">Justice</h2>
<h2 class="ea-section-banner-l-europe-dans-le-monde">L Europe Dans Le Monde</h2>
<h2 class="ea-section-banner-language">Language</h2>
<h2 class="ea-section-banner-langues-culture">Langues Culture</h2>
<h2 class="ea-section-banner-med-south">Med South</h2>
<h2 class="ea-section-banner-osterreich">Osterreich</h2>
<h2 class="ea-section-banner-politique">Politique</h2>
<h2 class="ea-section-banner-public-affairs">Public Affairs</h2>
<h2 class="ea-section-banner-regional">Regional</h2>
<h2 class="ea-section-banner-royaume-uni-en-europe">Royaume Uni En Europe</h2>
<h2 class="ea-section-banner-sante-modes-de-vie">Sante Modes De Vie</h2>
<h2 class="ea-section-banner-science-policymaking">Science Policymaking</h2>
<h2 class="ea-section-banner-sciences-legislation">Sciences Legislation</h2>
<h2 class="ea-section-banner-security">Security</h2>
<h2 class="ea-section-banner-social-europe-jobs">Social Europe Jobs</h2>
<h2 class="ea-section-banner-societe-de-l-information">Societe De L Information</h2>
<h2 class="ea-section-banner-sports">Sports</h2>
<h2 class="ea-section-banner-sustainable-dev">Sustainable Dev</h2>
<h2 class="ea-section-banner-trade-society">Trade Society</h2>
<h2 class="ea-section-banner-transport">Transport</h2>
<h2 class="ea-section-banner-uk-europe">Uk Europe</h2>
<h2 class="ea-section-banner-ukraine-und-eu">Ukraine Und Eu</h2>

Source SVG files

Download all as a zip archive Select individual icons


Add a new section icon

It's easy as pie:

  1. Upload the new SVG icon to /plugins/easections/v-edge/svg/
  2. Log in and visit the this page again (v-edge) to trigger the build system.
  3. Copy the v-edge/ directory to the appropriate v[N] directory.


Configuration

Configuration is located in the file /config/easections.php. If you do not have the ability to modify this file, contact your administrator to have options changed. The configuration file should contain an array with the name $config containing the following offsets:

NameTypeDescriptionCurrent Setting
icon_heightintegerIcon height, in pixels
20
colorsarrayAn array mapping the colors that will be used when building. It should be a key:value map where the key is the color name to be referenced elsewhere and the value is the hex color.
Array (
    [blue] => #0c285d
    [white] => #ffffff
    [yellow] => #ffe300
    [orange] => #fec200
    [bluegrey] => #616366
    [bannerblue] => #1b4597
)
combinationsarrayAn array mapping the combination of colors that will be built as icon sprites. Should be an array of arrays with format:
array("default"=>$colorname, "hover"=>$colorname)
Array (
    [blue] => Array (
            [default] => white
            [hover] => yellow
            [background] => blue
        )

    [yellow] => Array (
            [default] => bluegrey
            [hover] => blue
            [background] => yellow
        )

    [yellow-alt] => Array (
            [default] => orange
            [hover] => blue
            [background] => yellow
        )

)
callmap_driverstringThe callmap driver to use, either "sqlite", "fsstore" or "noop"
noop
callmap_labelsarrayLabels for the callmap, where the key is the regular expression to match and the value is the label to useLogin to view this setting
callmap_visualize_defaultarrayNodes to visualize by defaultLogin to view this setting
callmap_probabilityintegerProbability that a given hit will log. Important for high traffic sites. Set higher for lower probability.
1000
http_allowed_domainsarrayAllowed domains for fetching assets or generating URLsLogin to view this setting
http_allowed_urlsarraySpecified URLs or regular expressions of specified URLs match for fetching assets or generating URLsLogin to view this setting
http_connect_timeoutintegerThe amount of time, in seconds, that cURL should wait before returning an error status. 15 is a good value for most cases.
15