Tag cloud is a popular component on Web 2.0 sites that displays an array of tags in different styles.
This demo fetches the names of ZK components randomly and display them in 6 different tag levels. This is done by declaring a CSS definition in ZK's style component.

<zk xmlns:h="native">	
	<style>
		.main {
			margin: 0;
			padding: 5px;
			width: 100%;			
		}
		.main .tag {
			list-style: none outside none;
			position: relative;
			float: left;
			padding-right: 10px;
			line-height: 25px;
		}	
		.tagLevel-1, .tagLevel-1 .z-radio-cnt { font-size: 20px; font-weight: bold; color: #008BB6; }
		.tagLevel-2, .tagLevel-2 .z-radio-cnt { font-size: 18px; color: green; }
		.tagLevel-3, .tagLevel-3 .z-radio-cnt { font-size: 16px; color: darkorange; }
		.tagLevel-4, .tagLevel-4 .z-radio-cnt { font-size: 14px; }
		.tagLevel-5, .tagLevel-5 .z-radio-cnt { font-size: 12px; }
		.tagLevel-6, .tagLevel-6 .z-radio-cnt { font-size: 10px; color: gray;}
	</style>
	<div>	
		<!-- Data From Server -->
		<zscript><![CDATA[
			import org.zkoss.zk.ui.metainfo.*;
			
			//A simple Random method
			int getRandom() {
				return (int) (Math.random() * 6 + 1);
			}
			
			//Get All the components this ZK version Support
			ComponentDefinitionMap allCompMap = this.page.getLanguageDefinition().getComponentDefinitionMap();
			
			Map tagMap = new HashMap();
			for (Iterator it = allCompMap.getNames().iterator();it.hasNext();) {
				tagMap.put(it.next(), getRandom());
			} 
			
			Set tagSet = tagMap.entrySet();
		]]></zscript>
		
		<!-- Page Dom Structure -->
		<h:ul class="main">
			<h:li forEach="${tagSet}" class="tag" val="${each.value}">${each.key}</h:li>
		</h:ul>
			
		<!-- Client Handling -->
		<script>
			zk.afterMount(function() {
				jq(".main > li").addClass(function() {
 					return 'tagLevel-' + jq(this).attr('val');
 				}); 				
			});
		</script>
	</div>			
</zk>

<zk xmlns:h="native" xmlns:c="client">
	<style>
		.preview {
			margin: 0;
			padding: 0px;
		}
		.preview li {
			list-style: none outside none;
		}
		.preview li.high {
			background: #FFFFCC;
		}
	</style>
	<script><![CDATA[
		var level = 1;
		function colorChange(color) {
			jq(".tagLevel-" + level + ".z-radio").css("color", color);
			jq("li.tagLevel-" + level).css("color", color);
		};
		function hightlight(checked) {
			jq('.preview .tagLevel-' + level).parent().toggleClass('high');
			jq('.preview .tagLevel-' + checked.getValue()).parent().toggleClass('high');
			level = checked.getValue();
		}
	]]></script>
	<vlayout>
		Pick color :
		<colorbox id="colorbx" color="#008bb6" c:onChange="colorChange(this.getColor())" width="100px" />
	</vlayout>
	<separator />
	<groupbox closable="false" sclass="z-demo-config">
		<caption>Tag Level</caption>
		<radiogroup id="levelGroup">
			<h:ul class="preview">
				<h:li class="high">
					<radio class="tagLevel-1" value="1" c:onCheck="hightlight(this)" checked="true" label="Level 1 Text" />
				</h:li>
				<h:li>
					<radio class="tagLevel-2" value="2" c:onCheck="hightlight(this)" label="Level 2 Text" />
				</h:li>
				<h:li>
					<radio class="tagLevel-3" value="3" c:onCheck="hightlight(this)" label="Level 3 Text" />
				</h:li>
				<h:li>
					<radio class="tagLevel-4" value="4" c:onCheck="hightlight(this)" label="Level 4 Text" />
				</h:li>
				<h:li>
					<radio class="tagLevel-5" value="5" c:onCheck="hightlight(this)" label="Level 5 Text" />
				</h:li>
				<h:li>
					<radio class="tagLevel-6" value="6" c:onCheck="hightlight(this)" label="Level 6 Text" />
				</h:li>
			</h:ul>
		</radiogroup>
	</groupbox>
</zk>