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.

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).

Accessibility

Put a title tag on each tag link to indicate the frequency of the tag for both the non-visual user and the visual user on hover. The title should fit one of the following formats:

  1. Filter by the tag [TAG NAME], which is used once
  2. Filter by the tag [TAG NAME], which is used [COUNT] times

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.

January 18, 2011: added accessibility section and title attributes to each tag link.

March 6, 2012: updated link colors/sizes to pass WCAG AA accessibility requirements.