Navigation components index

What's new

Type Navigation Component
Navigation pattern Direct navigation to destinations anywhere in the site
Inclusion Included on the web page by means of <!--#include virtual="....."--> syntax
Component structure <table cellspacing="0" class="newsBox">
Content formatting Unordered list using <ul class="noIndent noSpace floatImage">
All the items in the list, exluding the first one, use the class="lineTop": <li class="lineTop">
Description and use
  • Usually on the home page it can be used also on section's main page
  • Fed automatically by a query, listing the most recently added items of any type (news items, events, etc.), see example
  • It is suggested to keep the sentence and blurb (when exist) as much as possible short. This helps the user in reading faster, giving so more effectiveness to the area.
  • 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
Conventional File name used news.htm

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/news/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/news/link_blurb1.htm


News item with more links and blurb

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


List mixing together: items with one link, items with more links, items with image and without

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/news/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/news/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/news/link_only.htm



^ top