Building Block - Vertical bar graph

Code does not work for small bar, percent text is displayed below the bar, not above.

Please provide a link.

Also the building block may be for older releases of Foundation which use row - column while newer versions of Foundation use grid-x/y - cell as the deafult grid is the XY grid now.

I see only these.

Vertical Bar Graph

	<ul class="bar-graph">
		<li class="bar-graph-axis">
			<div class="bar-graph-label">100%</div>
			<div class="bar-graph-label">80%</div>
			<div class="bar-graph-label">60%</div>
			<div class="bar-graph-label">40%</div>
			<div class="bar-graph-label">20%</div>
			<div class="bar-graph-label">0%</div>
		<li class="bar primary" style="height: 95%;" title="95">
			<div class="percent">95<span>%</span></div>
			<div class="description">Yetis</div>
		<li class="bar secondary" style="height: 90%;" title="90">
			<div class="percent">90<span>%</span></div>
			<div class="description">ZURBians</div>
		<li class="bar success" style="height: 80%;" title="80">
			<div class="percent">80<span>%</span></div>
			<div class="description">Cows</div>
		<li class="bar warning" style="height: 2%;" title="2">
			<div class="percent">2<span>%</span></div>
			<div class="description">Cows that think they're Yetis</div>
		<li class="bar alert" style="height: 40%;" title="40">
			<div class="percent">40<span>%</span></div>
			<div class="description">Who knows</div>

In general it makes sense, the 2% does not fit into the bar.
As you can see in the markup and code, the percent and the label are both placed in the graph bar. Not outside. So top and bottom absolute positions are dependent on the graph bar heights.

The building block is just an example.

You may want to extend the styles for .bar-graph .percent for bar graphs that are not high enough.

You can try some transform: translateY(-123px) or top: -123px, see

That worked… thanks (not a css expert… why I love using the building blocks!)