h2, h3, h4

Contents

Welcome to EEA Web design elements

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

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

        <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

        <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

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.

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

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

Arrows TAB

• TAB 1
• TAB 2
• TAB 3
• TAB 4

        <ul class="eea-tabs eea-tabs-arrows">
            <li><span class="eea-icon eea-icon-clipboard eea-icon-2x"></>First tab</li>
            <li><span class="eea-icon eea-icon-globe eea-icon-2x"></>Second tab</li>
            <li><span class="eea-icon eea-icon-leaf eea-icon-2x"></>Third tab</li>
        </ul>
        <div class="eea-tabs-panels eea-tabs-panels-arrows">

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

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

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

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

        <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

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="https://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 cream	50
Pony	75
Car	9999999

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

Standard Portal Message

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

Information Portal Message

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

Error Portal Message

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

Warning Portal Message

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

Attention Portal Message

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

Thumbs Up Portal Message

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

Yes Portal Message

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

No Portal Message

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

Rosette Translation Portal Message

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

Idea Portal Message

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

Smiley Portal Message

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

Note Portal 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.

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

Animated icons

You can animate icons using Font Awesome Animation classes together with font awesome icons as following:

eea-icon-anim-burst animated

<span class="eea-icon eea-icon-heart eea-icon-anim-burst animated"></span>
eea-icon-heart eea-icon-anim-burst animated

More animated icons

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.

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

Ribbon albums

Photo album thumbnails can make use of a ribbon text.

The markup for this ribbon is:

            <div class="ribbon-wrapper"><div class="ribbon">Recent</div></div>
        

This can be styled different by adding recent or expired classes to the photoAlbumEntry parent div

            <div class="ribbon-example">
                <div class="photoAlbumEntry recent">
                    <a href="#">
                        <span class="photoAlbumEntryWrapper">
                            <img src="fish"/>
                        </span>
                        <span class="photoAlbumEntryTitle" i18n:translate="">Cras non lectus ante, quis cursus nun</span>
                    </a>
                    <div class="ribbon-wrapper"><div class="ribbon">NEW</div></div>
                </div>
                <div class="photoAlbumEntry expired">
                    <a href="#">
                        <span class="photoAlbumEntryWrapper">
                            <img src="fish"/>
                        </span>
                        <span class="photoAlbumEntryTitle" i18n:translate="">Cras non lectus ante, quis cursus nun</span>
                    </a>
                    <div class="ribbon-wrapper"><div class="ribbon">NEW</div></div>
                </div>
            </div>