change_over_time.html

<a class='cl-kpi' href='javascript:;' data-bind='navigate:{url : url()}'>
	<div class='cl-kpi-body'>
		<div class='cl-kpi-cot-left'>
			<div class='cl-kpi-heading-container'>
				<span class='cl-kpi-heading' data-bind='text:heading'></span>
				<span class='cl-kpi-subheading' data-bind='text:subHeading'></span>
			</div>
			<span class='cl-kpi-subtext' data-bind='text:subText'></span>
		</div>
		<div class='cl-kpi-cot-right'>
			<span class='cl-kpi-cot-arrow'>
				<span data-bind="css: arrowDirection"></span>
			</span>
			<div class='cl-kpi-cot-percentage'>
				<span class='cl-kpi-cot-percentage-value' data-bind='text:percentage'></span>
				<span class='cl-kpi-cot-percentage-sign' data-bind='visible:showPercentSign'>%</span>
			</div>
		</div>
	</div>
</a>

top_n_group.html

<a class='cl-kpi' href='javascript:;' data-bind='navigate:{url : url()}'>
	<div class="cl-kpi-body">
		<div class='cl-kpi-heading-container'>
			<span class='cl-kpi-heading' data-bind='text:heading'></span>
			<span class='cl-kpi-top-n-subheading' data-bind='text:subheading'></span>
		</div>
		<div data-bind='foreach: metrics'>
			<div class='cl-kpi-top-divider'></div>
			<div class='cl-kpi-top-row'>
				<span class='cl-kpi-top-bar-title' data-bind="text: GroupTitle"></span>
				<span class='cl-kpi-top-bar-wrapper'>
					<span class="cl-kpi-top-bar" data-bind="style: {width: BarPercentage + '%'}"></span>
				</span>
				<span class="cl-kpi-top-bar-count" data-bind="text: Count"></span>
			</div>
		</div>
	</div>
</a>