All official European Union website addresses are in the europa.eu domain.
See all EU institutions and bodiesDo something for our planet, print this page only if needed. Even a small action can make an enormous difference when millions of people do it!
We have fullwidth-container-centered class which when applied on a parent div it allows us to scale the child image while maintaining the children text values within the center column position.
This is a text that doesn't span as large as the image and is centered
Used by Briefings where there is a need for an emphasis area callout, this style combines the fullwidth image container with a div with class emphasis-area to show text centered on top of the large full width image in an area not larger then the main content column.
Here we also add fullwidth class to the image in order to make it absolute and allow the emphasis area to go over the image.
If we need some text to act as a copyright info found right below the image we can also add a paragraph with class eea-image-credit.
Image copyright belongs to: attribution here
Sometimes we need to enlarge an image or iframe beyond the center column that we have which is 830px.
For this reason we have max-container-centered class which when applied it allows us to scale the content outside of the content container, up to 1400px.
We use this style within Dashboard content types to enlarge Tableau dashboards or within Indicator Assessments to show charts alongside title and description.
This is a text that spans as large as the image and it follows the image size from left to right.
If the a-tag href links to an image, it will be displayed in the popup. Be careful though, if the URL does not end with an image extension, fancybox will hang. If the URL doesn't end with an image extension, you can still force it to display the popup, by adding an extra class: fancybox.image.
Used on audiovisuals faceted listing to play videos in a fancybox.
When loading images consider using image scales instead of original images in order to improve page loading times for high resolution images.
image_large
image_preview
image_mini
image_thumb
image_tile
image_icon
image_listing
image_wide (only available for videos)
For references, please go to https://www.eea.europa.eu/code/design-elements/images or scan the QR code.
PDF generated on 09 Jun 2023, 03:42 AM
Engineered by: EEA Web Team
Software updated on 12 March 2023 21:56 from version 23.1.28
Software version: EEA Plone KGS 23.3.11
Document Actions
Share with others