Page Last modified 31 Jul 2023
3 min read
This page was archived on 31 Jul 2023 with reason: Other (new version on
Elements are page elements with a single function such as icons or buttons.


Below we have the standard button style applied to inputs and links.

EEA icons (scalable vector icons)

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

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

You can use the entire set of Font Awesome v4.7.0 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

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

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

Information portal message

Your screensaver has been upgraded, please consider to restart your computer ... Have a good day

Error portal message

This is an example of an error message

Warning portal message

Warning! Core meltdown at EEA HQ, code super-duper-red

Attention portal message

This is an example of an message that requires your attention

Thumbs up portal message

Thumbs up for the content on this site

Yes portal message

Message which could indicate an agreement or something done

No portal message

Message which could indicate a disagreement or something not done

Rosette translation portal message

Message which could indicate a translation message

Idea portal message

Message which could indicate a call to action message

Smiley portal message

Smiley Message type

Note portal message

Note Message

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.

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.


Fixed size

The following tooltips have fixed width and height.

Flexible size

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


Geographic coverage


Filed under:
Filed under: corporate design
Document Actions