Navigation components index

Feature box containing more items: center

Type Navigation Component
Navigation pattern Direct navigation to destinations anywhere in the site
Inclusion Optionally included on the web page by means of <!--#include virtual="....."--> syntax
Component structure <table class="featureMultiple">
Content formatting Unorderd list: <ul>
Description and use
  • Used to highlight multiple resources or sections of the site.
  • The box is usually titled "Feature" or as alternative "Key resources", but the title can be different in case it gives more meanning to the links (see example).
  • It can contain a combination of : an image, title that acts as a link to the highlighted resource or section, short description, additional links for more information.
  • When the list exceed 4/6 items, a link "more" leads to a following page with the rest of the list.
Position on the page Center column ("Feature" or "Ongoing and upcoming events", see example)
Conventional File name used feature.htm in case of inclusion

Types of list

Links only, case1

If the sentences are not too long it is possible to link all the sentence
/public/english/template1/components/feature_center/link_only1.htm


Links and blurbs

Note that the link is normal (not bold) also in case of brief decription following the link.
/public/english/template1/components/feature_center/link_blurb1.htm


News item with more links and blurb

In this case links follow the blurb.
/public/english/template1/components/feature_center/more_links_blurb.htm


Links, blurbs and images

The images have to be alternated left and right in the list using in the tag <img src> the class="floatLeft" and class="floatRight"
Note also that this list doesn't use the red arrow
/public/english/template1/components/feature_center/link_blurb_image.htm


News item with more links and blurb along with image

This sample is a mix of the previous two. Note that the Title is composed using the class="titleListNo" and that the images are aligned on the left using the class="floatLeft".
/public/english/template1/components/feature_center/more_links_blurb_image.htm


Links only

In case the sentences are very long its is suggested to link the word "more"
Note that it is not used the red arrow in this list. The red arrow can be used only when the whole sentence is a link
/public/english/template1/components/feature_center/link_only.htm



^ top