Macro component provides an option like template to piece together multiple ZK components and reuse them as a new component.

In this example, the includedMacro.zul page is declared as a macro component called newProduct in the demo page, which is then used as a regular ZK component.

<?component name="newProduct" macroURI="/widgets/composite/macro_component/includedMacro.zul"?>
<zk>
	
	<newProduct />
	<separator height="30px"></separator>
	<hlayout>
		<newProduct title="Monitor" desc="The new HDMI monitor" img="/widgets/composite/macro_component/img/item1.jpg" />
		<newProduct title="Cell" desc="This is zPhone" img="/widgets/composite/macro_component/img/item2.jpg" />
	</hlayout>
</zk>

<groupbox id="gb" mold="3d" width="240px" closable="false">
	<style>
		.desc { 
			color: #008bb6; 
			font-weight: bold;
			font-family: Times New Roman; 
		} 
		.pic { 
			width: 100px; 
			height: 100px; 
		}
	</style>
	<caption label="${empty arg.title ? 'Product Title Template': arg.title}" />
	<hlayout>
		<label class="desc" value="${empty arg.desc ? 'This product has no descriptions.': arg.desc}" />
		<image class="pic" src="${arg.img}" />
	</hlayout>
</groupbox>