Skip to main content link. Accesskey S

Tag Cloud

A tag cloud is a way to display tags that shows the relative importance of them, based on the number of times a tag is used.

Directionality:

Classes

  • lotusTagCloud - goes on a containing div
  • lotusF5, lotusF4, lotusF3, lotusF2, lotusF1 - go on individual links, to set importance of links, with F5 being most important.

Basic Implementation

A tag cloud is created as a list of links. It is surrounded by a div assigned the class of lotusTagCloud.

To avoid some display issues with the tag cloud, create it in the source code with whitespace (formatted with each li tag on it's own line).

Examples

Sample HTML

CSS (tagCloud.css)

Theme CSS (tagCloudTheme.css)

The lotusTagCloud goes on a div instead of the unordered list to allow the component to include a dojo slider to control how many links are showing.

June 8, 2010: adding a right margin in between the li tags for each list item in case the cloud is created in the source code without whitespace (like we do our inline lists). There are display issues in IE8, however, if you create the cloud with no whitespace, so it is recommended at this point to create the cloud with each list item on it's own line in the source.

IBM, the IBM logo, ibm.com and Lotus are trademarks of International Business Machines Corp., registered in many jurisdictions worldwide. Other product and service names might be trademarks of IBM or other companies. A current list of IBM trademarks is available on the Web at "Copyright and trademark information" at www.ibm.com/legal/copytrade.shtml.