Elements
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 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 message 1
- Key message 2
- ...
- Key message n
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.
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.
Permalinks
- Permalink to this version
- 61fbcade052349859eb254960dda1dbc
- Permalink to latest version
- 4P3TASJ7V8
Geographic coverage
For references, please go to https://www.eea.europa.eu/code/design-elements/elements or scan the QR code.
PDF generated on 16 Jan 2021, 08:22 AM
Document Actions
Share with others