EurActiv Sections API

Select Version

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

Icons

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

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 Societe De L Information Sports Sustainable Dev Trade Society Transport Uk Europe Ukraine Und Eu

<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>

Banners

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.

<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:

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

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:

Name	Type	Description	Current Setting
`icon_height`	integer	Icon height, in pixels	20
`colors`	array	An 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 )
`combinations`	array	An 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_driver`	string	The callmap driver to use, either "sqlite", "fsstore" or "noop"	noop
`callmap_labels`	array	Labels for the callmap, where the key is the regular expression to match and the value is the label to use	Login to view this setting
`callmap_visualize_default`	array	Nodes to visualize by default	Login to view this setting
`callmap_probability`	integer	Probability that a given hit will log. Important for high traffic sites. Set higher for lower probability.	1000
`http_allowed_domains`	array	Allowed domains for fetching assets or generating URLs	Login to view this setting
`http_allowed_urls`	array	Specified URLs or regular expressions of specified URLs match for fetching assets or generating URLs	Login to view this setting
`http_connect_timeout`	integer	The amount of time, in seconds, that cURL should wait before returning an error status. 15 is a good value for most cases.	15