Elements

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:

<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

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

Information portal message

Error portal message

Warning portal message

Attention portal message

Thumbs up portal message

Yes portal message

No portal message

Rosette translation portal message

Idea portal message

Smiley portal message

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

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.

Cras non lectus ante, quis cursus nun

Recent

Cras non lectus ante, quis cursus nun

Expired

Tooltips

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.