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.

KeyFacts box

Fullwidth box

Left box

Right box

Boxes options

Each box has the following options:

1. Color options:
   1. box-primary
   2. box-secondary
   3. box-tertiary
2. Size options:
   1. box--full
   2. box--left
   3. box--right

All of these box variants are selectable from the editor style dropdown.

Examples of box-full:

Examples of box--left:

Example is wrapped in clearfix div since box left is floated left.

Examples of box--right:

Example is wrapped in clearfix div since box right is floated right.

Cards

Used on themecentre pages, these cards are used to promote featured content for the themecentre section.

Simple card

Double card

Used on themecentre pages sections, these cards are used to promote two featured content side by side.

National Emission reduction Commitments Directive reporting status 2020

Published: 30 Jun 2020

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.

Fullwidth card

Used on themecentre pages sections, these cards are used to promote one featured content predominantly.

The way urban policies influence the air we breathe

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:

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.

Maecenas scelerisque laoreet eros, ac faucibus massa ultricies ut.

Fusce fermentum diam eget nunc facilisis porttitor tristique justo posuere.

Donec consectetur posuere enim, et cursus sapien aliquet sed.

Quisque scelerisque nisi quis nulla sagittis dignissim.

Fusce imperdiet risus et leo mattis condimentum.

Nullam sed velit id felis lacinia pulvinar vitae dictum nunc.

Quisque elementum lacus a tortor vehicula porttitor.

Phasellus dictum ante sit amet mauris luctus nec aliquam risus pulvinar.

Cras non lectus ante, quis cursus nunc.

Sed bibendum velit eu lectus tristique in condimentum nunc ornare.

Morbi accumsan nulla eget elit vestibulum euismod.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Aenean congue posuere lectus, eget mollis orci scelerisque nec.

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

Maecenas scelerisque laoreet eros, ac faucibus massa ultricies ut.

Fusce fermentum diam eget nunc facilisis porttitor tristique justo posuere.

Donec consectetur posuere enim, et cursus sapien aliquet sed.

Quisque scelerisque nisi quis nulla sagittis dignissim.

Fusce imperdiet risus et leo mattis condimentum.

Nullam sed velit id felis lacinia pulvinar vitae dictum nunc.

Quisque elementum lacus a tortor vehicula porttitor.

Phasellus dictum ante sit amet mauris luctus nec aliquam risus pulvinar.

Cras non lectus ante, quis cursus nunc.

Sed bibendum velit eu lectus tristique in condimentum nunc ornare.

Morbi accumsan nulla eget elit vestibulum euismod.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Aenean congue posuere lectus, eget mollis orci scelerisque nec.

Tab number 2

Maecenas scelerisque laoreet eros, ac faucibus massa ultricies ut.

Fusce fermentum diam eget nunc facilisis porttitor tristique justo posuere.

Donec consectetur posuere enim, et cursus sapien aliquet sed.

Quisque scelerisque nisi quis nulla sagittis dignissim.

Fusce imperdiet risus et leo mattis condimentum.

Nullam sed velit id felis lacinia pulvinar vitae dictum nunc.

Quisque elementum lacus a tortor vehicula porttitor.

Phasellus dictum ante sit amet mauris luctus nec aliquam risus pulvinar.

Cras non lectus ante, quis cursus nunc.

Sed bibendum velit eu lectus tristique in condimentum nunc ornare.

Morbi accumsan nulla eget elit vestibulum euismod.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Aenean congue posuere lectus, eget mollis orci scelerisque nec.

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)

jQuerytools accordion (collapsed-by-default)

jQuerytools accordion (collapsed-by-default and non-exclusive)

jQuerytools accordion (non-exclusive)

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.

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,

or eea-accordion-panels-bordered-secondary meant to be added manually to the Briefing Identifiers, References and footnotes section.

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.

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.

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:

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

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.

jQuerytools arrows tabs

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.

Typography

26 Oct 2020

Site typography, including global settings, headings, body text, lists.

Read more

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

20

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

1. There are extra styles for object type, type thumbnail, tags and url
2. 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

Two tiles with video content

Three tiles

Four tiles

Tiles options

Tiles have a tile--bordered modifier which if applied adds a top and bottom grey border to the tile section.

They can also be wrapped with fullwidth background sections in case we need to provide such a focus area for the tiles.