next
previous
items

Components

Page Last modified 31 Jul 2023
18 min read
This page was archived on 31 Jul 2023 with reason: Other (new version on http://eea.github.io/)
Documentation of complex css and html elements used within our site.
Contents
 

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:

  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:

Are you a journalist?

Contact our press team

Write to the following:

  • EEA Press officer
  • EEA Press officer

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:

  • EEA Press officer
  • EEA Press officer

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:

  • EEA Press officer
  • EEA Press officer

Notice that this is demo text at full size

Thank you for your contact

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:

  • EEA Press officer
  • EEA Press officer

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:

  • EEA Press officer
  • EEA Press officer

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:

  • EEA Press officer
  • EEA Press officer

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:

  • EEA Press officer
  • EEA Press officer

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:

  • EEA Press officer
  • EEA Press officer

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:

  • EEA Press officer
  • EEA Press officer

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.

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.

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:

Hello World!

Click me!

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

Lorem ipsum dolor sit amet...

Second panel title

Claritas est etiam processus dynamicus...

Third panel title

Suspendisse tristique sapien non ipsum...

jQuerytools accordion (collapsed-by-default)

First panel title

Lorem ipsum dolor sit amet...

Second panel title

Claritas est etiam processus dynamicus...

Third panel title

Suspendisse tristique sapien non ipsum...

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

First panel title

Lorem ipsum dolor sit amet...

Second panel title

Claritas est etiam processus dynamicus...

Third panel title

Suspendisse tristique sapien non ipsum...

jQuerytools accordion (non-exclusive)

First panel title

Lorem ipsum dolor sit amet...

Second panel title

Claritas est etiam processus dynamicus...

Third panel title

Suspendisse tristique sapien non ipsum...

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

Lorem ipsum dolor sit amet...

Second panel title

Claritas est etiam processus dynamicus...

Third panel title

Suspendisse tristique sapien non ipsum...

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

Lorem ipsum dolor sit amet...

Second panel title

Claritas est etiam processus dynamicus...

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

First panel title

Lorem ipsum dolor sit amet...

Second panel title

Claritas est etiam processus dynamicus...

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

Styled for the latest Briefing redesign the photoAlbum component has the following look when it's part of the relatedItems section.

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. Accusantium architecto distinctio doloremque doloribus excepturi exercitationem facilis in laboriosam laudantium magni, omnis optio porro quisquam quos repellat sit suscipit ullam voluptas.

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.

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. Accusantium architecto distinctio doloremque doloribus excepturi exercitationem facilis in laboriosam laudantium magni, omnis optio porro quisquam quos repellat sit suscipit ullam voluptas.

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:

Chart content panel, pay attention to classname of tab link for proper tab image
Table content panel, pay attention to classname of tab link for proper tab image

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.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

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
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
Suspendisse tristique sapien non ipsum rutrum quis blandit nulla laoreet. Aliquam erat volutpat. Proin elementum pretium diam varius consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

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
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
Suspendisse tristique sapien non ipsum rutrum quis blandit nulla laoreet. Aliquam erat volutpat. Proin elementum pretium diam varius consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer eget tincidunt mauris.

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.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

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

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

10 years

of tracking industrial emissions

Two tiles with video content

What & how?

Key messages

Three tiles

10 years

of tracking industrial emissions

10 years

of tracking industrial emissions

10 years

of tracking industrial emissions

Four tiles

10 years

of tracking industrial emissions

10 years

of tracking industrial emissions

10 years

of tracking industrial emissions

10 years

of tracking industrial emissions

Tiles options

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

bordered tile

this section is bordered

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

tile header

background wrapped tile

Permalinks

Geographic coverage

Tags

Filed under:
Filed under: corporate design
Document Actions