Personal tools

Subscriptions
Sign up to receive our reports (print and/or electronic) and quarterly e-newsletter.
Follow us
Twitter icon Twitter
Facebook icon Facebook
YouTube icon YouTube channel
RSS logo RSS Feeds
More

Write to us Write to us

For the public:


For media and journalists:

Contact EEA staff
Contact the web team
FAQ

Call us Call us

Reception:

Phone: (+45) 33 36 71 00
Fax: (+45) 33 36 71 99


next
previous
items

Skip to content. | Skip to navigation

Sound and independent information
on the environment

You are here: Home / Code and APIs for developers / Web design elements (CSS, HTML, JS)

Web design elements (CSS, HTML, JS)

Documentation for standardized CSS classes and HTML markup to use on EEA sites.
Contents
 

Welcome to EEA Web design elements

This page shows common html markup, css classes and javascripts we use across the EEA website. See example code and use Firefox Firebug plugin to inspect elements code. Intended audience: web designers, web developers, UX/UI experts.

Basic text styles

This is a h1

This is a h2

This is a h3

This is a h4

This is a paragraph.  This is a moreLink

Lists

Unordered lists:

  • Item 1
  • Item 2

Definition lists:

Term item 1
Description 1
Term item 2
Description 2

Quotations

Europe has made considerable progress over recent decades in cleaning the air that we breathe, but air pollution remains a serious problem and continues to damage our health and the environment.

Stavros Dimas, Commissioner for Environment

Gallery view

You need to enter an image scale after the image src otherwise the gallery will load the full-resolution images which could dramatically slow the page

  • Overlay text goes here
        <ul id="galleryView">
            <li>
                <span class="panel-overlay">Overlay text goes here</span>
                <img src="mr-monkey/image_large" />
            </li>
            <li><img src="monkey-with-makeup/image_large" /></li>
        </ul>

You can now use more than you galleryView on the page if needed by using the galleryView 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 has also an id thou as the gallery makes use of an id selector

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.

  • Overlay text goes here
        <ul id="galleryView2" class="galleryView js-noFilmstrip">
            <li>
                <span class="panel-overlay">Overlay text goes here</span>
                <img src="mr-monkey/image_large" />
            </li>
            <li><img src="monkey-with-makeup/image_large" /></li>
        </ul>

Tabs

Navigation tabs

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. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
        <ul class="tabbedmenu">
            <li><a href="#first" class="first-tab">First Tab</a></li>
            <li><a href="#second" class="current">Second Tab</a></li>
            <li><a href="#third">Third Tab</a></li>
        </ul>
        <div class="tabbedmenu-panel">
            Content
        </div>
        

jQuerytools tabs

  • 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. 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. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
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. Sed auctor, mauris sit amet ornare condimentum, odio mauris pulvinar libero, in bibendum odio risus et metus. Vivamus sit amet viverra arcu. Nunc non sem et nulla ultricies ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla dictum congue est, eget volutpat elit vestibulum eu. Ut id dui augue, vitae pretium elit. Fusce porta, quam sit amet fermentum ultricies, nisi nisl condimentum est, et dignissim urna tortor suscipit est. Ut libero felis, fringilla convallis tristique a, sollicitudin vel est. Nullam quis sagittis augue.
        <ul class="eea-tabs">
            <li>First Tab</li>
            <li>Second Tab</li>
            <li>Third Tab</li>
        </ul>
        <div class="eea-tabs-panels">

            <div class="eea-tabs-panel">
                Content for first tab
            </div>
            <div class="eea-tabs-panel">
                Content for second tab
            </div>

            <div class="eea-tabs-panel">
                Content for third tab
            </div>
        </div>
        

jQuerytools tabs two rows title

  • First tab
  • Second tab with a long title that spans across two rows
  • Third tab

If you have tabs that have longer titles consider using the extra 'two-rows' class for the tabs which makes the tabs larger in height and better styled to accommodate larger titles.

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. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
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. Sed auctor, mauris sit amet ornare condimentum, odio mauris pulvinar libero, in bibendum odio risus et metus. Vivamus sit amet viverra arcu. Nunc non sem et nulla ultricies ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla dictum congue est, eget volutpat elit vestibulum eu. Ut id dui augue, vitae pretium elit. Fusce porta, quam sit amet fermentum ultricies, nisi nisl condimentum est, et dignissim urna tortor suscipit est. Ut libero felis, fringilla convallis tristique a, sollicitudin vel est. Nullam quis sagittis augue.
        <ul class="eea-tabs two-rows">
            <li>First tab</li>
            <li>Second tab with longer title</li>
            <li>Third tab</li>
        </ul>
        <div class="eea-tabs-panels">

            <div class="eea-tabs-panel">
                Content for first tab
            </div>
            <div class="eea-tabs-panel">
                Content for second tab
            </div>

            <div class="eea-tabs-panel">
                Content for third tab
            </div>
        </div>
        

jQuerytools accordions

jQuerytools accordion (standard)

        <div class="eea-accordion-panels">
            ...
        </div>
    

First panel title

Lorem ipsum dolor sit amet...

Second panel title

Claritas est etiam processus dynamicus...

Third panel title

Suspendisse tristique sapien non ipsum...
        <div class="eea-accordion-panels">
            <div class="eea-accordion-panel">
                <h2 class="notoc eea-icon-right-container">First panel title</h2>
                <div class="pane">Lorem ipsum dolor sit amet...
                </div>
            </div>

            <div class="eea-accordion-panel">
                <h2 class="notoc eea-icon-right-container current">Second panel title</h2>
                <div class="pane">Claritas est etiam processus dynamicus...
                </div>
            </div>

            <div class="eea-accordion-panel">
                <h2 class="notoc eea-icon-right-container">Third panel title</h2>
                <div class="pane">Suspendisse tristique sapien non ipsum...
                </div>
            </div>
        </div>
    

jQuerytools accordion (collapsed-by-default)

        <div class="eea-accordion-panels collapsed-by-default">
        ...
        </div>
    

First panel title

Lorem ipsum dolor sit amet...

Second panel title

Claritas est etiam processus dynamicus...

Third panel title

Suspendisse tristique sapien non ipsum...
        <div class="eea-accordion-panels collapsed-by-default">
            <div class="eea-accordion-panel">
                <h2 class="notoc eea-icon-right-container">First panel title</h2>
                <div class="pane">Lorem ipsum dolor sit amet...
                </div>
            </div>

            <div class="eea-accordion-panel">
                <h2 class="notoc eea-icon-right-container">Second panel title</h2>
                <div class="pane">Claritas est etiam processus dynamicus...
                </div>
            </div>

            <div class="eea-accordion-panel">
                <h2 class="notoc eea-icon-right-container">Third panel title</h2>
                <div class="pane">Suspendisse tristique sapien non ipsum...
                </div>
            </div>
        </div>
    

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

    <div class="eea-accordion-panels collapsed-by-default non-exclusive">
    ...
    </div>

First panel title

Lorem ipsum dolor sit amet...

Second panel title

Claritas est etiam processus dynamicus...

Third panel title

Suspendisse tristique sapien non ipsum...
        <div class="eea-accordion-panels collapsed-by-default non-exclusive">
            <div class="eea-accordion-panel">
                <h2 class="notoc eea-icon-right-container">First panel title</h2>
                <div class="pane">Lorem ipsum dolor sit amet...
                </div>
            </div>

            <div class="eea-accordion-panel">
                <h2 class="notoc eea-icon-right-container">Second panel title</h2>
                <div class="pane">Claritas est etiam processus dynamicus...
                </div>
            </div>

            <div class="eea-accordion-panel">
                <h2 class="notoc eea-icon-right-container">Third panel title</h2>
                <div class="pane">Suspendisse tristique sapien non ipsum...
                </div>
            </div>
        </div>
    

jQuerytools accordion (non-exclusive)

    <div class="eea-accordion-panels non-exclusive">
    ...
    </div>
    

First panel title

Lorem ipsum dolor sit amet...

Second panel title

Claritas est etiam processus dynamicus...

Third panel title

Suspendisse tristique sapien non ipsum...
        <div class="eea-accordion-panels non-exclusive">
            <div class="eea-accordion-panel">
                <h2 class="notoc eea-icon-right-container">First panel title</h2>
                <div class="pane">Lorem ipsum dolor sit amet...
                </div>
            </div>

            <div class="eea-accordion-panel">
                <h2 class="notoc eea-icon-right-container current">Second panel title</h2>
                <div class="pane">Claritas est etiam processus dynamicus...
                </div>
            </div>

            <div class="eea-accordion-panel">
                <h2 class="notoc eea-icon-right-container current">Third panel title</h2>
                <div class="pane">Suspendisse tristique sapien non ipsum...
                </div>
            </div>
        </div>
    

Fancybox pop-ups

Hello World!

Arbitrary HTML

You can have arbitrary HTML in the pop-ups:

Click me!

Image pop-ups

If the a-tag hrefs 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.

Video pop-ups

        <a href="http://www.eea.europa.eu/multimedia/electric-car" class="video-fancybox">
            <img src="http://www.eea.europa.eu/multimedia/electric-car/image_wide" />
        </a>
        

Tooltips

Fixed size

The following tooltips have fixed width and height.

<img src="fish" class="eea-tooltip-left" title="Tooltips can go right" />
<img src="fish" class="eea-tooltip-top" title="Tooltips can go up" />
<img src="fish" class="eea-tooltip-bottom" title="Tooltips can go down" />
<img src="fish" class="eea-tooltip-right" title="Tooltips can go left" />
    

Flexible size

The following tooltips have a dynamic height which is automatically adjusted depending on the amount of text used.

<img src="fish" class="eea-flexible-tooltip-left" title="The name given to the resource. Typically, a title will be a name by which the resource is formally known" />
<img src="fish" class="eea-flexible-tooltip-top" title="The nature or genre of the content of the resource. Type includes terms describing general categories, functions, genres, or aggregation levels for content" />
<img src="fish" class="eea-flexible-tooltip-bottom" title="Short description of the data resource" />
<img src="fish" class="eea-flexible-tooltip-right" title="Information about rights held in and over the resource. Typically a rights element will contain a rights management statement for the resource, or reference a service providing such information. Rights information often encompasses intellectual property rights (IPR), copyright and various property rights" />
    

Tables - sortable and no sortable

Product - not sortable Price - sortable
Ice cream50
Pony75
Car9999999
    <table class="listing">
    <thead>
        <tr>
            <th class="nosort">Product - not sortable</th>
            <th>Price - sortable</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>Ice cream</td><td>50</td></tr>
        <tr><td>Pony</td><td>75</td></tr>
        <tr><td>Car</td><td>9999999</td></tr>
    </tbody>
</table>

Buttons

Below the standard button style applied to
<input type="submit" ...:

You can also give a standard link the button style by adding
<a class="standardButton" ... :
Link (button style)

Image scales

image_large

image_preview

image_mini

image_thumb

image_tile

image_icon

image_listing

image_wide (only available for videos)

Portal messages and callouts

Portal messages (aka callout / text boxes) are "in publishing ... a short piece of text set in larger type than the rest of the page and intended to attract attention ... in word processing is a special text box with or without a small 'tail' that can be pointed to different locations on a document..." (definition source: Wikipedia)

These styles can be added manually in HTML by a developer or they can be added on text fields by content authors using the WYSIWYG editor (TinyMCE Styles DropDown)

Standard call-out

This is a callout: a piece of text set in a special layout intended to attract attention.

Key Facts call-out

We have a specific css class "keyFact" which we have given a call-out style. This helps us to systematically identify key facts / key messages added by content authors on webpages, extract them and create distinct list about them.

Key messages
  • Key message 1
  • Key message 2
  • ...
  • Key message n

Standard Portal Message

Settings have been applied
        <div class="portalMessage">
            Settings have been applied
        </div>
    

Information Portal Message

Your screensaver has been upgraded, please consider to restart your computer ... Have a good day
        <div class="portalMessage informationMessage">
            Your screensaver has been upgraded, please consider to
                    restart your computer ... Have a good day
        </div>
    

Error Portal Message

This is an example of an error message
        <div class="portalMessage errorMessage">
            This is an example of an error message
        </div>
    

Warning Portal Message

Warning! Core meltdown at EEA HQ, code super-duper-red
        <div class="portalMessage warningMessage">
            Warning! Core meltdown at EEA HQ, code super-duper-red
        </div>
    

Attention Portal Message

This is an example of an message that requires your attention
        <div class="portalMessage attentionMessage">
            This is an example of an message that requires your attention
        </div>
    

Thumbs Up Portal Message

Thumbs up for the content on this site
        <div class="portalMessage thumbsUpMessage">
            Thumbs up for the content on this site
        </div>
    

Yes Portal Message

Message which could indicate an agreement or something done
        <div class="portalMessage yesMessage">
            Message which could indicate an agreement or something done
        </div>
    

No Portal Message

Message which could indicate a disagreement or something not done
        <div class="portalMessage noMessage">
            Message which could indicate a disagreement or something not done
        </div>
    

Rosette Translation Portal Message

Message which could indicate a translation message
        <div class="portalMessage rosetteMessage">
            Message which could indicate a translation message
        </div>
    

Idea Portal Message

Message which could indicate a call to action message
        <div class="portalMessage ideaMessage">
            Message which could indicate a call to action message
        </div>
    

Smiley Portal Message

Smiley Message type
        <div class="portalMessage smileyMessage">
            Smiley Message
        </div>
    

Note Portal Message

Note Message
        <div class="portalMessage noteMessage">
            Note Message
        </div>
    

Custom Portal Message

By using the <span>-tag icon syntax, you can create custom portal messages. See section "EEA Icons" for all available icons.

Message with custom Icon.
        <div class="portalMessage">
             <span class="eea-icon eea-icon-eye"></span>
            Message with custom Icon.
        </div>
    

EEA Icons (scalable vector icons)

Simply use the <span> tag with specific classes as following:

eea-icon-camera-retro
<span class="eea-icon eea-icon-camera-retro"></span>
eea-icon-camera-retro

You can use the entire set of Font Awesome icons as part of the EEA web design. Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

More icons

More than 360 icons

There are many ways to customise the icons display. See the practical examples and just replace the generic fa classname with our eea-icon class prefix

Floated Icons

You can float icons right or left by using eea-icon-right or eea-icon-left class, instead of font awesome .pull-left and .pull-right:

<p><span class="eea-icon eea-icon-right eea-icon-comment"></span></a>Right
floated comment icon</p>

We can float the icon to the right of the text as we can see from this example.

Auto-Link-Icons based protocol and file extension

Link types (url protocol and file extension type) are automatically detected on client side by a javascript which will add the necessary class icon before the link. Here you see some examples:

Icons based on protocols

external link, secure link, FTP link, callto link, mailto link
Test links: new EEA domain link, PDF on new EEA domain link, Presentation on old EEA domain

Some popular file extensions

PDF document, Word document, Zip archive, Excel link, Fake PDF file extension (just add file extension in the URL as query at the end!),

There are more icons detected, see list of all icons available

Client Side Pagination

All that you need is a block element like a div with 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.

            <div class="paginate">
                <div class="photoAlbumEntry">
                    <a href="#">
                        <span class="photoAlbumEntryWrapper">
                            <img src="fish"/>
                        </span>
                        <span class="photoAlbumEntryTitle">Maecenas scelerisque laoreet eros, ac faucibus massa ultricies ut.
                        </span>
                    </a>
                </div>
                <div class="photoAlbumEntry">
                    <a href="#">
                        <span class="photoAlbumEntryWrapper">
                            <img src="fish"/>
                        </span>
                        <span class="photoAlbumEntryTitle">Fusce fermentum diam eget nunc facilisis porttitor tristique justo posuere.
                        </span>
                    </a>
                </div>
            ...
            </div>
        

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


            <div class="paginate">
                <h3>Tab number 1</h3>
                <div>
                    <div class="photoAlbumEntry">
                        <a href="#">
                            <span class="photoAlbumEntryWrapper">
                                <img src="fish"/>
                            </span>
                            <span class="photoAlbumEntryTitle">Maecenas scelerisque laoreet eros, ac faucibus massa ultricies ut.
                            </span>
                        </a>
                    </div>
                    <div class="photoAlbumEntry">
                            <a href="#">
                                <span class="photoAlbumEntryWrapper">
                                    <img src="fish"/>
                                </span>
                                <span class="photoAlbumEntryTitle">Fusce fermentum diam eget nunc facilisis porttitor tristique justo posuere.
                                </span>
                            </a>
                    </div>
                    ...
                </div>
                <h3>Tab number 2</h3>
                <div>
                    <div class="photoAlbumEntry">
                        <a href="#">
                            <span class="photoAlbumEntryWrapper">
                                <img src="fish"/>
                            </span>
                            <span class="photoAlbumEntryTitle">Maecenas scelerisque laoreet eros, ac faucibus massa ultricies ut.
                            </span>
                        </a>
                    </div>
                    <div class="photoAlbumEntry">
                            <a href="#">
                                <span class="photoAlbumEntryWrapper">
                                    <img src="fish"/>
                                </span>
                                <span class="photoAlbumEntryTitle">Fusce fermentum diam eget nunc facilisis porttitor tristique justo posuere.
                                </span>
                            </a>
                    </div>
                    ...
                </div>
            </div>
        

Geographical coverage

[+] Show Map

Document Actions

Comments

Subscriptions
Sign up to receive our reports (print and/or electronic) and quarterly e-newsletter.
Follow us
 
 
 
 
 
European Environment Agency (EEA)
Kongens Nytorv 6
1050 Copenhagen K
Denmark
Phone: +45 3336 7100