This briefing presents progress made by the EU and its Member States1 towards meeting the 2010 emission ceilings that were applicable until the end of 2019 under Directive 2016/2284/EU — the National Emission reduction Commitments (NEC) Directive — on the reduction of national emissions of certain atmospheric pollutants. In addition, it assesses the emission reduction effort — compared with 2018 emissions levels — required by each country to comply with the 2020 and 2030 reduction commitments set out in the Directive.
Components
Boxes
Just like pullquote styles, box components can be used to add emphasis to a section of content wrapping the selected content with a given box background color.
Note
Note style is used for info message mimicking those found within charts.
Due to compatibility reasons the font size for this style is fixed to 12px.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid eaque inventore ipsum, iure quidem quisquam. A autem deserunt dicta ducimus eos expedita facilis hic illo perferendis possimus quo voluptate, voluptatum?
KeyFacts box
- Lorem ipsum dolor sit amet, consectetur adipisicing elit.
- Architecto cumque dignissimos dolor exercitationem fugiat, harum laborum, officiis optio reiciendis sed similique totam vero.
- Esse eum laborum qui quibusdam sint tempore.
Fullwidth box
Mattis pellentesque id nibh tortor id aliquet. Amet nisl purus in mollis nunc. Quisque non tellus orci ac auctor augue mauris. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget. A diam sollicitudin tempor id. Sed viverra tellus in hac habitasse platea dictumst vestibulum rhoncus.
Left box
Mattis pellentesque id nibh tortor id aliquet. Amet nisl purus in mollis nunc. Quisque non tellus orci ac auctor augue mauris. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget. A diam sollicitudin tempor id. Sed viverra tellus in hac habitasse platea dictumst vestibulum rhoncus.
Quisque non tellus orci ac auctor augue mauris. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget. A diam sollicitudin tempor id. Sed viverra tellus in hac habitasse platea dictumst vestibulum rhoncus. Amet consectetur adipiscing elit pellentesque habitant. Fermentum odio eu feugiat pretium nibh ipsum consequat nisl vel. Viverra mauris in aliquam sem. Turpis massa sed elementum tempus egestas sed sed risus pretium. Fermentum iaculis eu non diam phasellus. Consequat id porta nibh venenatis.
Right box
Mattis pellentesque id nibh tortor id aliquet. Amet nisl purus in mollis nunc. Quisque non tellus orci ac auctor augue mauris. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget. A diam sollicitudin tempor id. Sed viverra tellus in hac habitasse platea dictumst vestibulum rhoncus.
Quisque non tellus orci ac auctor augue mauris. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget. A diam sollicitudin tempor id. Sed viverra tellus in hac habitasse platea dictumst vestibulum rhoncus. Amet consectetur adipiscing elit pellentesque habitant. Fermentum odio eu feugiat pretium nibh ipsum consequat nisl vel. Viverra mauris in aliquam sem. Turpis massa sed elementum tempus egestas sed sed risus pretium. Fermentum iaculis eu non diam phasellus. Consequat id porta nibh venenatis.
Boxes options
Each box has the following options:
- Color options:
- box-primary
- box-secondary
- box-tertiary
- Size options:
- box--full
- box--left
- box--right
All of these box variants are selectable from the editor style dropdown.
Examples of box-full:
Are you a journalist?
Contact our press team
Write to the following:
Notice that this is demo text at full size
Thank you for your contact
Even table header | Odd table header |
---|---|
Even table item | Odd table item |
Odd table item | Even table item |
Are you a journalist?
Contact our press team
Write to the following:
Notice that this is demo text at full size
Thank you for your contact
Even table header | Odd table header |
---|---|
Even table item | Odd table item |
Odd table item | Even table item |
Examples of box--left:
Example is wrapped in clearfix div since box left is floated left.
Are you a journalist?
Contact our press team
Write to the following:
Notice that this is demo text at full size
Thank you for your contact
Are you a journalist?
Contact our press team
Write to the following:
Notice that this is demo text at full size
Thank you for your contact
Examples of box--right:
Example is wrapped in clearfix div since box right is floated right.
Are you a journalist?
Contact our press team
Write to the following:
Notice that this is demo text at full size
Thank you for your contact
Are you a journalist?
Contact our press team
Write to the following:
Notice that this is demo text at full size
Thank you for your contact
Cards
Used on themecentre pages, these cards are used to promote featured content for the themecentre section.
Simple card
Air pollution is the biggest environmental health threat in Europe and more and more people are taking action to claim their right to clean air. A new European Environment Agency (EEA) report provides an overview of low-cost devices that citizens and NGOs can use to measure local air quality.
Double card
Used on themecentre pages sections, these cards are used to promote two featured content side by side.
Fullwidth card
Used on themecentre pages sections, these cards are used to promote one featured content predominantly.
Given their proximity to citizens and knowledge of local concerns, local authorities are best placed to ensure we make an effective transition to more liveable and breathable cities.
Many city-specific measures have proved to be efficient but there is still much to do to empower citizens further and deliver coordinated actions across all governance levels.
Card options (variables)
The following modifier classes can be added to the eea-card component:
Name | Description |
---|---|
eea-card--double | Add whenever you want to use two cards on the same row |
eea-card--fullwidth | Add whenever you want card to span full width of parent |
eea-card--bg-light | Add whenever you want background color of body description to be white |
eea-card--landscape | Add whenever you want to use a landscape image |
eea-card--portrait | Add whenever you want to use a portrait image |
Client side pagination
Used on Soer 2020 intro page to paginate related items photoAlbum entries.
In order to add on other pages all that you need is a block element like a div with the class paginate and children as content inside of it.
By default after 12 children the content will be paginated.
This example has a couple of divs but the div with class paginate could contain anything.
Client side pagination with tabs
This example demonstrates the pagination with headers as tabs.
We need some extra markup besides the parent div with class paginate as found in the previous example.
First extra element is an h3 which contains the title of the tab.
Second extra element is a simple div that wraps the content that you would like to have paginated.
Tab number 1
Tab number 2
Fancybox pop-ups
Arbitrary HTML
Fancybox is a popup component where content is visible in a box upon clicking on a link.
You can have arbitrary HTML in the pop-ups:
Image gallery
This component takes a bunch of images and displays them in a carousel image gallery.
You need to enter an image scale after the image src otherwise the gallery will load the full-resolution images which could drastically slow the page.
You can now use more than one galleryView on the page if needed by using the gallery class. Also you can disable the filmstrip by assigning the js-noFilmstrip class to the gallery as you can see in the example below.
Make sure that this gallery also has an id thou as the gallery makes use of it.
Also if you add a width and height as an inline style the gallery will match these sizes instead of growing to the size of it's parent as it does by default.
jQuerytools accordions
Used on our site usually when we want to group similar content which can be hidden by default unless clicked upon, accordions can also be used as replacement for tabs when there are many headers or on mobile resolutions where there isn't enough space to list all of the tab lists on one line.
jQuerytools accordion (standard)
First panel title
Second panel title
Third panel title
jQuerytools accordion (collapsed-by-default)
First panel title
Second panel title
Third panel title
jQuerytools accordion (collapsed-by-default and non-exclusive)
First panel title
Second panel title
Third panel title
jQuerytools accordion (non-exclusive)
First panel title
Second panel title
Third panel title
jQuerytools accordion redesign
After Briefing content type redesign some new classes were created in order to simplify the design of the accordions.
jQuerytools accordion plain design
By applying the eea-accordion-panels-plain class to the accordion construct we change the design of the headers and panels to a more discreet look and feel.
Besides the lack of background color of the accordion panels these headers also use eea-icon-left-container class in order to move the accordion arrow to the left of the title instead of the right found in the classic accordion design.
First panel title
Second panel title
Third panel title
jQuerytools accordion plain design with top border
With the plain design we also have a border modifier which if applied adds a larger top border to the start of the accordion panels.
We can either choose to use eea-accordion-panels-bordered-primary which is used now on our website for the metadata info below the related content area,
First panel title
Second panel title
or eea-accordion-panels-bordered-secondary meant to be added manually to the Briefing Identifiers, References and footnotes section.
First panel title
Second panel title
Photo Album cards
Album views photo album cards
Used on atct_album_view template as well as other listings where we need to layout objects as part of an photo gallery album listing.
Other components that make use of this component are:
- Tab panels
- Accordion panels
Related items photo album cards
Styled for the latest Briefing redesign the photoAlbum component has the following look when it's part of the relatedItems section.
Related items photo album floated left cards
Styled for the latest Briefing redesign the photoAlbum component has the following look when it's part of the relatedItems section.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi asperiores autem dicta dolorem ea ipsa odio officiis quia quo repellat sed sit, unde ut! Beatae distinctio eius officia qui ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi asperiores autem dicta dolorem ea ipsa odio officiis quia quo repellat sed sit, unde ut! Beatae distinctio eius officia qui ut.
Related items photo album floated right cards
Styled for the latest Briefing redesign the photoAlbum component has the following look when it's part of the relatedItems section.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi asperiores autem dicta dolorem ea ipsa odio officiis quia quo repellat sed sit, unde ut! Beatae distinctio eius officia qui ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi asperiores autem dicta dolorem ea ipsa odio officiis quia quo repellat sed sit, unde ut! Beatae distinctio eius officia qui ut.
Tabs
Daviz tabs
Used by Daviz content types this tab resembles the jquerytools tab variant that also uses icons in the tabs.
It assumes the following structure:
FormTab tabs
Used by Indicator Assessment figure tabs, these elements make use of default Plone 4 form_tabbing.js logic to create tabs out of dl, dt and dd html tags.
It assumes the following structure:
- Tab title
- Tab content is here
- Tab title 2
- Tab 2 content is here
Server side tabs
Clicking on the tab which will take you to the page that the links points to.
As template logic you have to supply the current class on the tab that should be activated given the page visited.
jQuerytools tabs
These tabs are the most common type of tabs that we have on the site, used on several sections such as:
- Frontpage what's new gallery area
- Data and maps page
- Related contents area of each content type
- First tab
- Second tab
- Third tab
jQuerytools tabs accordion transformation
Previously we had an extra modifier class to eea-tabs named two-rows which added a max width to the tabs breaking some extra long titles into two rows in order to fit extra titles on one row.
Now with the current behavior eea-tabs transform into an accordion when any of the tab lists span over more than one line by checking the size of every element on window resize.
Upon another resize event, as soon as there is enough space to show every tab title on one line the accordion will transform back into a tab.
You can check this behavior by resizing the browser window and checking the example below as it transforms from a tab into an accordion and back.
- First tab
- Tab that will trigger accordion transformation on browser resize
- Third tab
jQuerytools arrows tabs
The synthesis report informs future European environmental policy in general and its implementation between 2015 and 2020 in particular. It includes a reflection on the European environment in a global context, as well as chapters summarising the state of, trends in, and prospects for the environment in Europe.
Tiles
Plone tiles
Used by the folder_summary_view template and in listings such as the what's new tab section on EEA frontpage, this tile's design and markup resembles Bootstrap's media object component.
Search app is also using this component as part of the list layout.
Themes tile card
Originally created for the elastic search apps, eea-tile components resemble the Bootstrap card component and they are used in places where there is a need to feature certain titles by using a traditional card component design.
Used on the themes page these tiles are used to promote featured content for the themes listing section.
Search app tiles
Colored tiles
Used on the search app frontpage these tiles are used to promote the ranges of values found for the right side facets.
These tiles components resemble Bulma's tile layout component.

Topics
20Card tiles
Used on the card layout of the search app, these tiles are used to list result objects arranged as cards.
The search app card tile design is added to the EEA website and they are documented in this page as well, however there are the following styles and behavior differences between these two:
- There are extra styles for object type, type thumbnail, tags and url
- On hover there is an animation effect and description slide in view action
Because of the missing styles currently the tile will look worse than it does on the search app as such we also show 2 screenshots of how a tile looks normally and when hovered.


TinyMCE templates
Besides the styles that you can select from the style dropdown we also have several templates that wrap several html tags in order to have more complex styles.
Here we list the following templates:
Tiles
Tiles are templates used to write a large impact text or a title followed by a video.
Within tiles we have the following variations:
One tile
10 years
Two tiles with video content
What & how?
Key messages
Three tiles
10 years
10 years
10 years
Four tiles
10 years
10 years
10 years
10 years
Tiles options
Tiles have a tile--bordered modifier which if applied adds a top and bottom grey border to the tile section.
bordered tile
They can also be wrapped with fullwidth background sections in case we need to provide such a focus area for the tiles.
tile header
Permalinks
- Permalink to this version
- 5b8eaf7d47874b359ce4b3485c8c5ade
- Permalink to latest version
- KBNU5279EO
Geographic coverage
For references, please go to https://www.eea.europa.eu/code/design-elements/components or scan the QR code.
PDF generated on 28 Jan 2023, 07:26 PM
Document Actions
Share with others