h2, h3, h4

Contents

Welcome to EEA Web design elements, your browser should have autoscrolled down to me

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>

Jquerytools tabs

• First tab
• Second tab
• Third tab

        <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 two rows
• Second tab with longer title
• Third tab two rows

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.

        <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 accordion

    <div class="eea-accordion-panels">
        <div class="eea-accordion-panel">
            <h2>First panel title</h2>
            <div class="pane">
                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.
            </div>
        </div>
        <div class="eea-accordion-panel">
            <h2>Second panel title</h2>
            <div class="pane">
                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.
            </div>
        </div>
        <div class="eea-accordion-panel">
            <h2>Third panel title</h2>
            <div class="pane">
                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.
            </div>
        </div>
    </div>
    

Fancybox pop-ups

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

<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 tooltips

<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" />
    

Sortable tables

    <table class="listing">
    <thead>
        <tr><th>Product</th><th>Price</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>

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

Image scales

image_large

image_preview

image_mini

image_thumb

image_tile

image_icon

image_listing

image_thumb (videos get play button and black borders applied correctly)

image_wide (only available for videos)

Portal messages

These classes can be added manually in markup or they can be added on text fields using TinyMCE through the Styles DropDown

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

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

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

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

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

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

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

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

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

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

Auto-Link-Icons

Link types 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.

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.

            <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

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.

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